前言

对于Web开发人员来说，如何衡量一个 Web 页面的性能一直是一个难题。

最初，我们使用 Time to First Byte、DomContentLoaded 和 Load 这些衡量文档加载进度的指标，但它们不能直接反应用户视觉体验。

为了能衡量用户视觉体验，Web 标准中定义了一些性能指标。

RAIL性能模型

RAIL是Response，Animation，Idle和Load的首字母缩写，是一种由Google Chrome团队于2015年提出的性能模型，用于提升浏览器内的用户体验和性能。

RAIL 模型的理念是”以用户为中心，最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意”。

• 响应（Response）：应该尽可能快速的响应用户, 应该在 100ms 以内响应用户输入。
• 动画（Animation）：在展示动画的时候，每一帧应该以 16ms 进行渲染，这样可以保持动画效果的一致性，并且避免卡顿。
• 空闲（Idle）：当使用 Javascript 主线程的时候，应该把任务划分到执行时间小于 50ms 的片段中去，这样可以释放线程以进行用户交互。
• 加载（Load）：应该在小于 1s 的时间内加载完成你的网站，并可以进行用户交互。

RAIL - 术语表 | MDN

性能指标

基于用户体验的性能指标是 Google 在 web.dev 提出的。

测试工具

• Lighthouse: Optimize website speed | Chrome Developer
• WebPageTest
• Chrome DevTools