Web 前端性能优化-概述

性能优化的影响

1. 用户的留存
2. 网站的转化率
3. 体验与传播

谷歌性能评估模型 RAIL

响应

网站性能要求在用户感知到延迟之前接收到操作的反馈，而用户一般对于超过 100ms 的时间窗口，用户就会感知到延迟。

动画

虽然肉眼仅能分辨动画的 30 帧，但越高的帧率将带来更加流畅的体验，因此动画要尽力达到 60fps 的帧率。

空闲

并非所有的工作都需要在响应和加载阶段完成，我们可以利用浏览器的空闲时间处理可延迟的任务，这样可以减少预加载的数据大小，保证网站或应用更快的完成加载。

最大化利用空闲时间，以便于可以在 50ms 内响应用户的操作。

加载

在 5s 内加载完成关键渲染路径，并可进行交互。

性能测量工具

• 谷歌浏览器开发者工具

  • Performance

  • Lighthouse

• WebPageTest

  • 链接

性能优化指标

• First contentful paint (FCP): 测量从页面开始加载到屏幕上呈现页面内容的任何部分的时间
• Largest contentful paint (LCP): 测量从页面开始加载到最大的文本块或图像元素在屏幕上呈现的时间
• First input delay (FID): 衡量从用户首次与您的网站进行交互（即当他们单击链接，点击按钮或使用自定义的 JavaScript 驱动的控件）到浏览器实际能够响应该交互之间的时间
• Time to Interactive (TTI): 测量从页面开始加载到可视化呈现之间的时间，页面的初始脚本（如果有）已经加载，并且能够可靠地快速响应用户输入的时间
• Total blocking time (TBT): 测量主线程被阻塞足够长时间以防止输入响应的 FCP 和 TTI 之间的总时间
• Cumulative layout shift (CLS): 测量页面开始加载到页面生命周期状态变为隐藏之间发生的所有意外布局转换的累积分数

总结

了解性能优化的必要性，从多个角度分析，明确问题所在之后有目标地进行优化，不要单纯看到有人说这样怎么好怎么好就去做，适合的才是最优秀的优化。

参考资料

• 《Web前端性能优化》- 田佳奇
• google web 前端性能优化指南