随着开发经验的增长、经历的项目越来越多，在处理前端项目的时候越来越重视前端性能优化。
前言
我最近在写一个金融类app的时候接到一个优化问题：首屏加载的有点慢。这个app是使用h5嵌入一个原生壳子的方式开发的，所以使用的效果肯定是没有原生的体验好，但是首屏优化确实是一个h5项目必须要去处理的任务，所以关于首屏前端优化我进行了总结。
首屏性能衡量的指标
- FPS：最能反映页面性能的指标FPS(frame per second)，一般系统设置屏幕的刷新率为60fps。小于24就会出现明显的卡顿
- DOMContentLoaded：DOM加载并解析完成会触发DOMContentLoaded事件，如果源码输出的内容太多，客户端解析DOM的时间也会变长，例如增加2000个嵌套层叠可能会相应增加50-200ms，尽量保证首屏输出即可，后续的内容只保留钩子，利用js渲染。
- 流畅度：FPS 值越高，视觉呈现越流畅，在等待的过程中可以加入一些视觉缓冲。
- 首屏加载时间：通过
window.performance.timing来计算出来。
1. DNS解析耗时: domainLookupEnd - domainLookupStart
2. TCP连接耗时: connectEnd - connectStart
3. SSL安全连接耗时: connectEnd - secureConnectionStart
4. 网络请求耗时(TTFB): responseStart - requestStart
5. 数据传输耗时: responseEnd - responseStart
6. DOM解析耗时: domInteractive - responseEnd
7. 资源加载耗时: loadEventStart - domContentLoadedEventEnd
8. 首包时间: responseStart - domainLookupStart
9. 首次渲染时间 / 白屏时间: responseEnd - fetchStart
10. 首次可交互时间: domInteractive - fetchStart
11. DOM Ready时间: domContentLoadEventEnd - fetchStart
12. 页面完全加载时间: loadEventStart - fetchStart
优化的思考角度
1. 首屏一定要快
2. 滚屏一定要流畅
3. 能不加载的先别加载
4. 能不执行的先别执行
5. 渐进展现、圆滑展现
为什么首屏会加载缓慢？
我先列一下目前我遇见影响加载的点：
1. 静态资源的加载未处理，资源加载过多
2. 调用的接口太多，接口的时间太久（此处前端也没有办法...）
3. 前端组件根据后端返回按需加载
如何进行优化
首屏优化根据上述原因可列举以下方法
懒加载
优先加载主要模块，让用户第一眼能看到最重要的信息。比如只有某种情况才会加载的模块使用require()，按需加载，这个方法在webpack打包的时候把导入的模块单独打一个包，不会加入到首屏加载的包中，优化体积大小。
懒执行
一些需要点击或者hover才会触发的模块，就等触发的时候再加载。
图片尺寸的控制和懒加载
尽量使用webp格式的照片，因为同样的视觉效果，其体积为其他的1/3大小。
使用雪碧图来处理首屏上所有的小icon，走cdn缓存等。
webpack
待续...
辅助优化的工具
chrome中的调试工具测试页面性能，详细的使用功能可以自行阅读文档。
