webapp优化的辛酸之路

标签（空格分隔）： 优化

---

移动端的首屏加载速度非常重要，使用了vue.js搭建的SPA项目，在页面打开的时候会有5s左右的加载动画，所以需要优化。

背景：辛辛苦苦做的H5页面，调试成功后，发布到线上，运营人员发布后，用客户端体验，觉得速度太慢，悄悄的撤下来，我去，1天的工作只存在了几分钟的价值？

现实：速度确实有点慢，超过了3s的接受时间，只能埋头苦干，研究原因，找出速度慢的原因。

策略1：H5自身找原因

在自己的地盘上，随便怎么整都方便，使用的方法
1，js很少的文件，直接把其中的js代码放到html中，减少http请求
2，三个js文件，依次为manifrest.js,vendor.js,app.js,js放在</body>前，同时设置defer 属性，无阻塞式下载，（为什么没有用async属性呢，async也是异步下载，不过没办法保证执行顺序，前面3个js需依次执行，具体可见https://segmentfault.com/q/1010000000640869），使用defer方式下载，虽然是异步，但是DOMContentLoaded事件需等这3个js文件下载完成后才触发，这里就是vue.js做spa项目的一个不好的地方，非得等js完加载才可以dom完成，页面才能出来。
3，使用lazyload预加载图片，延迟加载、按需加载
4，gzip打包项目文件
结论：经过以上调整，页面速度提升了一些，主要是图片预加载方面可以看到

策略2：客户端找原因

策略1中使用lazyload预加载图片，为什么这么做呢，本来是应该这么做，但是不做也不会太影响吧。其实不然，经过和客户端一起分析，通过fillder工具抓包发现，先是加载页面所有图片后再显示出H5页面，用户看到的是图片已经全部出来了，但这个有点浪费用户流量及大大延长了进入首屏时间，所以和客户端一起讨论，解决如下：先不加载图片，等进入H5页面后再加载图片，移动端图片很多，占大头，这点是必须要优化的。

策略3：从服务器端找原因

经过前面的工作，大部分问题解决了，但是速度还是不理想，通过chrome network发现，加载js的时间过长了，咦，这个文件的大小怎么那么大呢，明明是用了gzip压缩过了啊，但是网页下载下来的还是原来那么大，再看看响应头

image.png

没有Content-Encoding:gzip 这一项，赶紧去和服务器同学沟通，服务器已经开启gzip，但是对js文件类型没有加上gzip，
等服务器同学加上之后，js文件大小大大减少，速度明显快很多。

image.png

从以上3点看，移动端H5页面优化，不仅仅只能看前端页面，也要考虑客户端、服务器方面的原因。一切都是在慢慢摸索中前行，依次给别人一些借鉴。