前端性能：RAIL模式

RAIL模式

概念

• RAIL是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。

• 分为四个方面：

  1. Response
  2. Animation
  3. Idle
  4. Load

  

用户体验

• 用户对性能延迟的感知：

  延迟时间	用户感知
  0-16ms	很流畅
  0-100ms	基本流畅
  100-1000ms	感觉到网站上有一些加载任务
  1000ms or more	失去耐心了
  10000ms or more	直接离开，不会再访问了

Response

• 用户的输入到响应的时间不超过100ms，给用户的感觉就是瞬间完成了。
• 优化：
  1. 事件在50ms内完成。由于有idle task，事件会进行排队，等待时间在50ms。这个方法使用于click、toggle、starting animation等，不适用于drag和scroll。
  2. 复杂的js计算放在worker里进行。
  3. 超过50ms的响应，提供一定的返回。如进度条、倒计时等。
• idle task：除了要处理输入事件，浏览器还有其它任务要做，这些任务会占用部分时间，一般情况会花费50ms的时间，输入事件的响应则排在其后。
• 

Animation

• 在10ms内产生一帧。让浏览器保持60帧，每一帧在16ms，其中6ms用来渲染。

• 优化方案：

  1. 在动画中不要挑战CPU，做最少的事情。如设置style、offset等。
  2. 针对不同的动画进行优化。

• 动画不只是UI的视觉效果，以下行为都属于：

  • 视觉动画，如渐隐渐显，tweens，loading等
  • 滚动，包含弹性滚动，松开手指后，滚动会持续一段距离
  • 拖拽，缩放，经常伴随着用户行为

Idle

• 最大化空闲时间，以增大50ms内响应用户输入的几率。
• 优化方案：
  1. 用空闲的时间来完成延后的工作。如延后加载一些首屏不需要的文件。
  2. 在空闲时间的执行任务控制在50ms内。
  3. 用户在空闲时间进行任务交互，必须暂停空闲时间的任务，响应交互任务。

Load

• 加载页面快，用户的平均停留时间会更久，广告的查看率也更高。
• 可以根据设备、网络准备不同的加载和缓存方案，尽量做到第二次打开在2s内。
• 优化方案：
  1. 禁用渲染阻塞的资源，延后加载。
  2. 采用懒加载、代码拆分等手段。

分析RAIL的工具

1. ChromeDevTools
2. LightHouse：https://web.dev/measure/
3. WebpageTest

总结

• 聚焦用户
• 100ms内响应用户的输入
• 10ms内产生1帧，在滚动或者动画执行时
• 最大化主线程的空闲时间
• 5s内让网页变得可交互