前端首屏优化

随着开发经验的增加、经历的项目愈来愈多，在处理前端项目的时候愈来愈重视前端性能优化。
复制代码

前言

我最近在写一个金融类app的时候接到一个优化问题：首屏加载的有点慢。这个app是使用h5嵌入一个原生壳子的方式开发的，因此使用的效果确定是没有原生的体验好，可是首屏优化确实是一个h5项目必需要去处理的任务，因此关于首屏前端优化我进行了总结。

首屏性能衡量的指标

1. FPS：最能反映页面性能的指标FPS(frame per second)，通常系统设置屏幕的刷新率为60fps。小于24就会出现明显的卡顿
2. DOMContentLoaded：DOM加载并解析完成会触发DOMContentLoaded事件，若是源码输出的内容太多，客户端解析DOM的时间也会变长，例如增长2000个嵌套层叠可能会相应增长50-200ms，尽可能保证首屏输出便可，后续的内容只保留钩子，利用js渲染。
3. 流畅度：FPS 值越高，视觉呈现越流畅，在等待的过程当中能够加入一些视觉缓冲。
4. 首屏加载时间：经过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. 前端组件根据后端返回按需加载
复制代码

如何进行优化

首屏优化根据上述缘由可列举如下方法

懒加载

优先加载主要模块，让用户第一眼能看到最重要的信息。
复制代码

懒执行

一些须要点击或者hover才会触发的模块，就等触发的时候再加载。
复制代码

图片尺寸的控制和懒加载

尽可能使用webp格式的照片，由于一样的视觉效果，其体积为其余的1/3大小。
使用雪碧图来处理首屏上全部的小icon，走cdn缓存等。
复制代码

webpack

待续...
复制代码

辅助优化的工具

chrome中的调试工具测试页面性能，详细的使用功能能够自行阅读文档。