无线略懂性能优化_1
Hanzhuo0322 opened this issue · comments
无线略懂性能优化_1
略懂无线性能优化第一弹： 从减少网络请求开始！
(数据的获取使用chrome浏览器， 所有网络请求数据抓取时关掉fiddler等抓包工具，去掉chrome浏览器的扩展工具，清除缓存)
首页加载情况：
详情页加载情况：
（以http://ld.sogou.com/m/question?qid=9503397为例）
第一部分： 针对所有页面可优化的点：
1.script.min.js（1.3KB）可以去掉，下图为script.min.js在首页的网络加载情况。
之前的一些需要异步加载的js文件，我们是在vm中通过script.min.js做到（$script('/sf/src/js/ld/mobile/lib/plugin/megapixImage/megapix-image.js')），因为用到的库都支持CommonJs方式的引用，所以现在都放在js文件中动态按需加载。
2.实名认证的样式加载目前没有按照ua来，既加载了无线又加载了pc相关样式：
shiming.css是无线弹窗样式，
attestation.css 为pc弹窗样式。
按照ua来按需加载，无线可去掉attestation.css（1.9KB）的加载。
3.hack.css为前端开发维护的一个css文件，main.css引用的是页面同学维护的css文件，考虑将hack.css文件统一放进main.css文件中引用，可以节省hack.css的网络请求
hack.css: 944B(体积很小，所以减少网络请求是比较合适的)
4.现在DT平台已经足够成熟支持略懂的参数上报，略懂统一采用DT上报，stget上报相关可以去掉，相关的js， an.js（ 2.6KB）可以去掉
| 优化的js/css文件 | 体积 |
|---|---|
| script.min.js | 1.3KB |
| attestation.css | 1.9KB |
| an.js | 2.6KB |
| hack.css | 944B(体积很小，所以减少网络请求是比较合适的) |
优化后首页减少体积5.8KB，减少了网络请求
第二部分： 针对详情页可优化的点
详情页出去上面四个文件的引用可以去掉，还有redux.min.js， react-redux.min.js，react-router-dom.min.js可以去掉，通过改写AppH5picture文件的写法
以上几个文件在详情页中的load情况如下：
| 优化的js/css文件 | 体积 |
|---|---|
| script.min.js | 1.3KB |
| attestation.css | 1.9KB |
| an.js | 2.6KB |
| hack.css | 944B(体积很小，所以减少网络请求是比较合适的) |
| redux.min.js | 2.8KB |
| react-router-dom.js | 9.0KB |
| react-redux.min.js | 5.2KB |