前端性能优化总结

提高性能的指标有哪些

1、首字节时间

解释

浏览器拿到第一字节响应的时间， responseStart-navigationStart

指标意义

判断客户端和服务端之间连接反馈的效率，数字越小越好。如果时间超标，可能是客户端与服务端建立连接太慢或者服务端响应速度太慢（数据库查询慢等原因）

优化建议

• 减少 DNS查询
• 开启 http2.0
• 提早 Flush
• 服务端增加 redis/memcache等缓存，减少服务端数据处理和开销巨大的数据查询

2、domready时间

解释

页面 dom树构建完成时间

指标意义

反应页面 DOM和 CSSOM构建的速度，如果，如果数值偏大意味着， dom数量过多，或者 csscss效率低，或者构建过程中有 js执行

优化建议

• 减少dom结构的复杂度，节点尽可能少，嵌套不要太深
• 减少外部资源依赖
• 合并请求
• 资源异步加载

3、首次有效绘制/首屏时间

解释

浏览器首次有效渲染的时间

指标意义

反应用户感知页面主要内容显示的快慢，数值越小页面呈现越快

优化建议

• 采用页面首屏只出方式
• 首屏外的图片延迟加载
• 首屏结构尽量简单，非首屏内容资源做懒加载
• 优化关键呈现路径

4、可交互时间

解释

页面可以和用户进行交互的时间，可以采集 first Interactive时间

指标意义

反应网页从加载到真正可用的时间（可以与用户交互），浏览器中能看到图形，并不意味着可以点击。

优化建议

• 减少资源的请求数和文件大小
• 提高JS执行性能，减少首屏JS执行，减少首屏CSS数量

5、页面资源加载完成时间

解释

页面所有资源加载完毕时间

指标意义

反映页面的加载时间，加载速度和资源大小， JS执行时间等都会影响加载完成时间

优化建议

• 减少资源的请求数和文件大小
• 将非初始化脚本放到onLoad之后执行
• 启用压缩/ GZIP
• 通过CSS Sprites优化图片
• 不要在HTML中使用缩放图片
• 使用CDN

6、输入延迟

解释

用户发起交互到应用响应

指标意义

反映应用响应速度，数值越大，延迟越多，用户感知交互卡顿

优化建议

• 减少JS执行开销，执行耗时保持在16.667ms以内
• 大运算可以采用web worker开子进程运算

7、动画帧率

解释

动画渲染的帧频数

指标意义

反映动画流畅度，如果小于 60fps时，用户感知动画不流畅

优化建议

• 提高单帧内的JS执行效率
• 合理使用JS动画

8、渲染速度指数

解释

页面内容展示的速度

指标意义

反映页面渲染的速度，数值越小，渲染越快

优化建议

• 减少DOM
• 优化关键渲染路径

质量指标

脚本异常数

优化建议

• 解决所有JS error，提高页面稳定性
• 使用eslint等语法检测工具

失败状态的请求数

总cookie传输量

优化建议

• 减小cookie大小,减少使用泛域名cookie，例如(*.pingan.com)

页面大小

优化建议

• 精简DOM数量
• 非首屏必须的静态资源采用外联方式引用

首屏页面DOM数量

优化建议

• 精简DOM数量

页面总流量

优化建议

• 减小cookie传输
• 静态资源压缩，图片采用webp
• 启用压缩/ GZIP
• 精简DOM数量

页面总请求数

优化建议

• 合并静态资源
• 使用http2.0 http push

总域名数

优化建议

• 减少第三方依赖
• 一个站点（子站点）控制在2-3个域名