1. 什么是RAIL模型？
RAIL 是一个以用户为中心的性能模型，它提供了一个考虑性能的结构。该模型将用户体验分解为关键操作(例如，点击、滚动、加载) ，并帮助您为每个操作定义性能目标。 RAIL 代表 Web 应用程序生命周期的四个不同方面: 响应（Response）、动画(Animation)、空闲(Idle)和加载(Load)。用户对这4个方面有不同的性能期望，所以性能目标是基于环境（比如网络，是PC端还是移动端等）和 用户体验研究--用户如何感知延迟 来定义的。
在RAIL中，有两个术语，目标和指南：
- 目标：与用户体验相关的关键性能指标。例如，在100毫秒内点击绘制。由于人类的感知是相对恒定的，这些目标不太可能在短期内发生改变。
- 指南：帮助你实现目标的建议。这些可能特定于当前的硬件和网络连接条件，因此可能随着时间的推移而改变。
2. 用户对性能延迟时间的感知
| 延迟时间 | 用户感知 |
|---|---|
| 0-16毫秒 | 用户基本无感，认为动画是很平滑流畅的。 |
| 0-100毫秒 | 用户认为结果是实时反馈的。如果时间再长一些，用户的动作和系统的反应之间的联系就会打破。 |
| 100-1000毫秒 | 这个时间段内，用户能明显的感觉到页面在持续的加载或者更新视图的任务。 |
| 1000毫秒及以上 | 超过1秒后，用户就会对正在执行的任务是去关注。 |
| 10000毫秒及以上 | 10秒的等待延迟，用户基本会放弃任务，离开页面。 |
根据网络条件和硬件的不同，用户对性能延迟的感知是不同的。例如，通过快速 Wi-Fi 连接在功能强大的台式机上加载站点通常发生在1秒以内，用户已经习惯了这一点。在3G 连接较慢的移动设备上加载站点需要更多的时间，因此移动用户通常更有耐心，在移动设备上加载5秒钟是一个更现实的目标。
3. 用户对RAIL的具体期望目标及指南
1. 响应：在50毫秒内响应事件
目标:
- 在100毫秒内响应用户的输入，这样用户感觉交互是实时的！
指南：
- 为了确保100ms 内的可见响应，我们常常希望在50ms 内处理用户输入事件。这适用于大多数输入，如单击按钮、切换表单控件或启动动画。这不适用于触摸拖动或滚动。
- 尽管这听起来可能有违直觉，但是立即响应用户输入并不总是正确的。您可以使用这个100毫秒的窗口期来做一些更耗性能的工作，但要小心不要阻塞用户。如果可能的话，在后台工作。
- 对于需要50毫秒以上才能执行完的操作，始终提供反馈（比如，加一个进度条或者loading效果）。
我们的目标是在100毫秒内响应输入，那么为什么我们的预算只有50毫秒？这是因为除了输入处理之外，通常还有其他工作要做，这些工作占用了可接受输入响应的部分时间。如果应用程序在空闲时间执行推荐的50ms 块中的工作，则意味着如果输入在这些工作块中的某一块中发生，则输入事件的排队将长达50ms。考虑到这一点，我们就只剩下50毫秒可用于实际的输入处理。下图显示了在空闲任务期间接收到的输入是如何排队的，从而减少了可用的处理时间:
2. 动画: 10毫秒内完成一帧动画
目标：
- 在10毫秒或更短的时间内生成动画中的每一帧。从技术上讲，每帧的最大预算是16ms (1000ms/60帧率≈16ms) ，但浏览器渲染每帧需要大约6ms，因此用户期望值是每帧10ms。
- 以视觉流畅性为目标。用户会注意到帧速率的变化。
指南：
- 在像动画这样的高压点，关键是在你能做的地方什么都不做，在你不能做的地方做到最少。只要有可能，就利用100毫秒的窗口期来做一些更耗性能的工作，以便您最大限度地达到60帧每秒的机会。
- 有关各种动画优化策略，请参考 渲染性能 。
- 动画不仅仅是花哨的 UI 效果。这些交互中的每一个都被认为是动画:
- 可视化动画：比如渐隐渐入，加载指示器等
- 滚动效果
- 拖动，缩放等
3. 空闲：最大化空闲时间
目标：
- 最大化空闲时间，以增加页面响应用户输入在50毫秒内的几率。
指南：
- 利用空闲时间完成可以延迟的工作。例如，对于初始页面加载，加载尽可能少的数据，然后使用空闲时间加载其余数据。
- 在空闲时间内执行任务时，请尽量在50ms内完成。如果时间过长，你就有可能干扰应用程序在50毫秒内响应用户输入的能力。
- 如果用户在空闲时间内与页面进行交互，则用户交互应始终占据最高优先级，并中断空闲时间工作。
4. 加载：5秒内完成加载并呈现内容
当页面加载缓慢时，用户的注意力会游移，用户会认为任务已经中断。 加载速度快的网站平均会话时间更长，反弹率更低，广告可视性更高。 目标：
- 在一个网速较慢（3G）的中配设备上，5秒内完成首屏的加载。
- 对于后续页面的加载，2秒一个页面是比较合适的。
- 以上两条目标会随着科技的发展，要求会越来越快！
指南：
- 对于会阻塞渲染的资源，执行延后加载
- 可以采用懒加载、代码分割等技术手段，来加快首屏加载速度。
4. RAIL模型的测量工具
- Chrome DevTools
- Lighthouse
- WebPageTest
5. 总结
RAIL模型将网站的用户体验看作是一个由不同的交互组成的旅程，而它本身就像一个相机，记录下了这个旅程。了解用户对我们网站的关注点，以便于更好的设定各种性能目标！
- 了解用户对不同时常的延迟的反应
- 在100毫秒内响应用户输入
- 10毫秒内完成一帧动画
- 最大化空闲时间
- 5秒内完成首屏加载并曾献内容
