1.性能的标准

1 行业标准

熟悉行业标准，才能知道开发的网站性能还是好。RAIL代表Web应用程序生命周期的四个不同方面：响应，动画，空闲和加载。RAIL是一个以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户的体验分解为关键操作（例如，点击，滚动，加载），并帮助您定义每个操作的性能目标。

1.1 Response响应

目标：在100毫秒内完成由用户输入启动的过渡，因此用户感觉交互是即时的。

指导方针：

• 为确保在100毫秒内可见响应，请在50毫秒内处理用户输入事件。这适用于大多数输入，例如单击按钮，切换表单控件或开始动画。这不适用于触摸拖动或滚动。
• 尽管听起来可能违反直觉，但这并不总是立即响应用户输入的正确选择。您可以使用此100毫秒窗口执行其他昂贵的工作，但请注意不要阻塞用户。如果可能，请在后台进行操作。
• 对于完成时间超过50毫秒的操作，请始终提供反馈。

50毫秒还是100毫秒？

目标是在100毫秒内响应输入，那么为什么我们的预算只有50毫秒？这是因为除了输入处理外，通常还要执行其他工作，并且该工作会占用一部分时间来接受可接受的输入响应。如果应用程序在空闲时间以建议的50 ms块执行工作，这意味着如果输入发生在这些工作块之一中，则输入最多可以排队50 ms。考虑到这一点，可以安全地假设只有剩余的50 ms可用于实际的输入处理。下图显示了这种效果，该图显示了如何在空闲任务期间接收到的输入排队，从而减少了可用处理时间：

1.2 Animation动画

目标：

• 在10毫秒或更短的时间内制作动画中的每一帧。从技术上讲，每帧的最大预算是16毫秒（1000毫秒/每秒60帧≈16毫秒），但是浏览器需要大约6毫秒才能渲染每帧，因此指导原则是每帧10毫秒。
• 旨在视觉平滑。用户会注意到帧频变化的时间。

指导方针：
在动画等高压点，关键是什么都不能做，而绝对最小值则不能做。尽可能利用100毫秒的响应来预先计算昂贵的工作，以便最大程度地提高达到60 fps的机会。

1.3 Idle 最大化空闲时间

目标：
最大化空闲时间，以增加页面在50毫秒内响应用户输入的几率。

指导方针：

• 使用空闲时间来完成延迟的工作。例如，对于初始页面加载，请加载尽可能少的数据，然后使用空闲时间加载其余数据。
• 在50毫秒或更短的空闲时间内执行工作。再过一遍，您就有可能干扰该应用在50毫秒内响应用户输入的功能。
• 如果用户在空闲时间工作期间与页面进行交互，则用户交互应始终具有最高优先级并中断空闲时间工作。

1.4 Load在5秒内交付内容并进行互动

当页面加载缓慢时，用户的注意力会散乱，用户会认为任务已中断。快速加载的网站具有更长的平均会话时间，更低的跳出率和更高的广告可见度。
目标：

• 针对用户的设备和网络功能进行优化以实现快速加载性能。当前，首​​次加载的好目标是加载页面并在3G连接速度慢的中档移动设备上在5秒或更短的时间内进行交互。
• 对于后续加载，一个不错的目标是在2秒内加载页面。

指导方针：

• 在用户中常见的移动设备和网络连接上测试负载性能。您可以使用Chrome用户体验报告来查找用户的连接分布。如果您的站点没有可用的数据，则《移动经济2019》建议，良好的全球基准是中端Android手机（例如Moto
  G4）和较慢的3G网络（定义为400 ms RTT和400 kbps传输速度） ）。在WebPageTest上可以使用此组合。
• 请记住，尽管您的典型移动用户设备可能声称其处于2G，3G或4G连接上，但实际上，由于数据包丢失和网络变化，有效连接速度通常会明显变慢。
• 消除渲染阻塞资源。
• 您不必在5秒钟内加载所有内容即可产生完整加载的感觉。考虑延迟加载图像，代码拆分JavaScript包以及web.dev上建议的其他优化。

所以我们的网站应该向RAIL标准靠齐。