无线略懂性能优化_1

[Hanzhuo0322]

无线略懂性能优化_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

优化后详情页减少体积22.8KB，减少了网络请求