此篇文章介绍前端性能优化的一些实践方案。主要是结合结尾几个案例摘抄总结，找出性能优化过程中一些通用的方案。
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里，挂个空的钩子。获取钩子去加载本地存储的具体内容。
16. 模块的异步加载，不在首屏的先不加载，等到滚动或其他外部条件触发时再加载。
17. 分析统计数据：给请求加埋点，统计耗时，错误请求等。模块5秒钟内没有渲染完成加埋点等。根据统计结果针对性分析。
18. dns阶段可以做域名收敛。
19. 获取html文件阶段，可以考虑离线包。
20. 从cdn上获取js/css等静态文件的时候，可以考虑本地缓存，离线包等。
21. 开发环境与生产环境能自由切换。
22. 每个组件都包含自己需要的图片，样式，js，html模版等资源文件。加载一个组件时能将该组件所需要的所有资源加载到，实现组件的复用。
23. 组件的功能界限问题：哪些功能在组件内部封装，哪些功能由组件调用者实现。内部逻辑写在组件内部，可变内容由调用者提供。给组件传递参数的时候，可以将参数合并后整成对象传入。
24. 补充前端自动化测试：检测html是否规范，链接是否合法，静态资源的合法性，js报错，页面是否有弹出框，是否有console，页面js的内存纪录，接口的返回数据格式测试，模块是否开天窗等。
25. 快速上线的通道：只用于修改样式等简单的前端问题。
26. 页面展示阶段：懒加载，图片支持webp格式，裁剪尺寸等。
27. 使用requestAnimationFrame()将模版渲染切片。使用point-event:none,禁用滚动中页面的hover效果。
案例来源：
QQ空间前端工程师如何做首屏优化 （1，2，3，4点）
苏宁移动前端负责人朱海源：移动端电商类展示页面性能优化实战 （5，6，7，8，9点）
唯快不破：Web 应用的 13 个优化步骤 （10，11，12点）
[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿 （13，14，15，16点）
【第620期】PC与无线齐飞，Web共Native一色——天猫首页全解密 (17，18，19，20点)
【第597期】沪江易未来：沪江网校前端架构漫谈 （21，22，23点）
聊一聊淘宝首页和它背后的一套 （24，25，26，27点）