RAIL 规则是什么

[nmsn]

如题

[nmsn]

概念

RAIL 规则是 Google 提出的一种衡量用户体验的方法，它包括四个指标：

Response 在 50 毫秒内处理事件

目标：在 100ms 完成由用户输入发起的转换，让用户感觉交互是及时的
指导方针：

• 事件处理函数尽量保证在50ms内完成，考虑到idle task的情况，事件会排队，等待时间大概在50ms。适用于click，toggle，starting animations等，不适用于drag和scroll
• 复杂的js计算尽可能放在后台，如web worker，避免对用户输入造成阻塞
• 超过50ms的响应，一定要提供反馈，比如倒计时，进度百分比等

Animation 在 10 毫秒内生成一帧

目标

• 产生每一帧的时间不要超过10ms，为了保证浏览器60帧，每一帧的时间在16ms左右，但浏览器需要用6ms来渲染每一帧
• 旨在视觉上的平滑。用户对帧率变化感知很敏感

指导方针

• 在一些高压点上，比如动画，不要去挑战cpu，尽可能地少做事，如：取offset，设置style等操作。尽可能地保证60帧的体验
• 有关各种动画优化策略，请参见渲染性能

Idle 空闲。指利用好空闲时间

空闲时间，即用户空闲时浏览器空闲时间的比例。

目标：最大化空闲时间，以增大 50ms 内响应用户输入的几率

指导方针：

• 用空闲时间来完成一些延后的工作（比如说埋点），如先加载页面可见的部分，然后利用空闲时间加载剩余部分，此处可以使用
• 在空闲时间内执行的任务尽量控制在50ms以内，如果更长的话，会影响input handle的pending时间
• 如果用户在空闲时间任务进行时进行交互，必须以此为最高优先级，并暂停空闲时间的任务

Load 传输内容到页面可交互的时间不超过5秒

加载时间，即从用户发出请求到页面加载完成的时间。

如果页面加载比较慢，用户的交点可能会离开。加载很快的页面，用户平均停留时间会变长，跳出率会更低，也就有更高的广告查看率

目标：

优化加载速度，可以根据设备、网络等条件。目前，比较好的一个方式是，让你的页面在一个中配的3G网络手机上打开时间不超过5秒
对于第二次打开，尽量不超过2秒

指导方针：

• 在手机设备上测试加载性能，选用中配的3G网络（400kb/s，400ms RTT），可以使用 WebPageTest 来测试
• 要注意的是，即使用户的网络是 4G，但因为丢包或者网络波动，可能会比预期的更慢
• 禁用渲染阻塞的资源，延后加载 defer、async 等
• 可以采用 lazy load 等其他优化手段，让第一次加载的资源更少

这四个指标对应用户体验的四个阶段：交互、动画、空闲和加载。RAIL 规则通过对这四个阶段的衡量，帮助前端开发者更好地优化 Web 应用的性能和用户体验。