前端性能优化实践方案总结

此篇文章介绍前端性能优化的一些实践方案。主要是结合结尾几个案例摘抄总结，找出性能优化过程中一些通用的方案。

1. 客户端将初始化webview和加载内容同步进行，通过客户端的长链接来加载内容。如果长链接通过够快，可能webview启动完成，页面就可以显示出来了。

2. 离线缓存：客户端缓存html页面，webview启动时用缓存的页面展示给用户，wns组件同时计算缓存页面的md5，并放到请求头的e-tag上，服务器收到请求后，将服务器上需要返回给客户端的html页面的md5值与缓存页面的md5值进行比对，如果一致返回304，如果不一致，则刷新webview，显示最新数据，并更新缓存内容。只缓存html资源，其它静态资源依赖浏览器缓存。

3. 增量更新：内容拆分成静态内容和动态内容后，对静态内容进行增量更新，也就是只更新有变化的部分。将静态资源打包动态更新至客户端，客户端提前下载静态资源包，用户访问先从本地加载资源，减少白屏时间。此种方法只在核心页面使用，根据资源包的大小，网络环境判断是否下载。例如低于 100kb的资源包，3g、4g、WIFI 环境启动下载，超过 500KB WIFI 环境下才会下载。

4. 预加载：通过前置页面提前预加载相关资源。

5. 页面图片的处理：雪碧图，CSS3写的图，使用base64位引用小的icon图。支持webp图片格式。针对不同的网络带宽下载不同的图片格式，比如wifi下载高清图，4g普通图，3g低质量的图。图片的懒加载。减少图片大小和图片请求。

6. 首屏优化：域名收敛（减少dns寻址时间），html文档压缩（减少同步返回的数据量），静态资源合并，模块异步加载，图片懒加载等。

7. 合适的数据渲染方式：模版的渲染到底是前端做还是后端输出视情况而定。后端输出模版适用于数据量不大的情况，当数据量较大，后端输出的html体积会增大，此时可采用前端模版来渲染，后端开接口只提供数据，前端组装页面模块并展示。折中的办法是后端输出部分的静态数据，加快页面展示，前端再去获取最新数据并对模块进行更新。目前我们的活动模板就采用了这种方式。

8. 提前缓存大促相关资源：大促预热期间，使用localstorage缓存大促期间要用的公共静态资源，减少cdn的压力。

9. 兜底容灾：接口请求错误时使用缓存数据补上，如果缓存数据没有，则隐藏该模块。

10. 支持http/2

11. 利用调试工具分析网页的cpu 和内存占用，网络请求，动画性能等指标。

12. service worker+流的结合：在网站和客户端之间放置一个service worker，service worker的作用是在获取缺失信息的同时缓存某些固定不变的数据，加速页面的渲染。

13. 所有的静态文件在上线前都内联到页面上，从而减少请求数量。这个打包工具会做处理。

14. 本地缓存：将页面中不变的静态资源，比如css,html,js文件保存在本地的localstorage里，甚至把页面上某个节点的内容保存在localstorage里，挂个空的钩子。获取钩子去加载本地存储的具体内容。

15. 合并外链请求：将外链的资源文件缓存到localstorage里，每个文件有对应的版本号，后端返回新的版本号后，与本地存储的版本号进行对比，将不一样的版本号进行合并后发送请求。

16. 模块的异步加载，不在首屏的先不加载，等到滚动或其他外部条件触发时再加载。

17. 分析统计数据：给请求加埋点，统计耗时，错误请求等。模块5秒钟内没有渲染完成加埋点等。根据统计结果针对性分析。

18. dns阶段可以做域名收敛。

19. 获取html文件阶段，可以考虑离线包。