阅读 1572

前端首屏优化

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

前言

我最近在写一个金融类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来计算出来。

image.png image.png

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中的调试工具测试页面性能,详细的使用功能可以自行阅读文档。

image.png

文章分类
前端
文章标签