RAIL（Response Animation Idle load）

爱狐狸
1,458 阅读4分钟

概念

RAIL（Response Animation Idle load）,是以用户为中心的表现模型，将用户体验分解成按键操作。浏览器页面、手机App都是属于RAIL模型的。RAIL的目标和准则是帮助开发者和设计者确保对任何一个用户行为（点击、按键、拖拽等操作）都可以给出一个友好的响应，从而实现友好的体验。 通过一种考虑了性能的结构（structure），RAIL允许开发者和设计者能够可靠地进行目标工作，能够高度有效（高质量）地影响用户体验。

（图：RAIL的表现模型——for webApp）

用户对性能延时的感受

用户不喜欢动画不流畅的时候。只要每秒钟渲染60帧，他们就会认为动画是平滑的。这相当于每帧16毫秒，包括浏览器将新帧绘制到屏幕上所需的时间，而应用程序生成一帧所需的时间约为10毫秒。
0-16ms 流畅
16-100ms 较为流畅
100-300ms 略感迟钝、卡顿
300-1000ms 用户感知，正在执行任务，可以等待其执行完整
1000ms+ 用户会失去对正在执行的事务的注意力
10000ms+ 用户将会失去耐心，放弃当前事务

用户对性能延迟的感知不同，这取决于网络条件和硬件。例如，在功能强大的台式机上通过快速Wi-Fi连接加载1000ms的体验是可行的，因此用户已经习惯了1000ms的加载体验。但对于速度较慢的3G连接的移动设备来说，5000ms的负载是一个更现实的目标，因此移动用户通常更有耐心。

目标和准则

  • 50ms内处理用户的输入的事件

  • 100ms内响应，让用户看到可见的响应

    以上2点对任何动作（点击、滑动、拖拽等）均适用。

  • 5s内让用户看到内容并可以响应用户操作

evernotecid://E6FB590A-664F-47BB-8E48-D99D9C95AA62/appyinxiangcom/29499089/ENResource/p42

渲染达标（5s内）准则

  1. 专注于优化关键的渲染路径以解块渲染。
  2. 您不需要在5秒内加载所有内容来产生完整加载的感觉。启用渐进式渲染并在后台做一些工作。将非必要的负载延迟到空闲时间。参见网站性能优化。
  3. 识别影响页面加载性能的因素:
    • 网络速度和延迟
    • 硬件(例如，较慢的cpu)
    • 缓存被驱逐
    • L2/L3缓存的不同之处
    • 解析JavaScript

RAIL测量工具

  • Chrome DevTools
  • Lighthouse
  • WebPageTest
Chrome DevTools测量方法
  • Throttle your CPU:模拟CPU差的情况
  • Throttle the network:模拟网速差的情况
  • View main thread activity:查看主线程活动，以查看在记录时主线程上发生的每个事件
  • View main thread activities in a table:查看表中的主线程活动，根据占用时间最多的活动对其进行排序
  • Analyze frames per second (FPS):分析每秒帧数(FPS)，以度量动画是否真正平稳地运行
  • Monitor CPU usage, JS heap size, DOM nodes, layouts per second:使用性能监视器实时监视CPU使用情况、JS堆大小、DOM节点、每秒布局等
  • Visualize network requests:可视化在您使用网络部分进行记录时发生的网络请求
  • Capture screenshots while recording:在记录时捕捉屏幕截图，以准确地回放页面加载或动画触发时的页面外观等
  • View interactions:查看交互，以快速确定用户与页面交互后页面上发生了什么
  • Find scroll performance issues in real-time:通过在潜在问题侦听器触发时突出显示页面，实时查找滚动性能问题
  • View paint events in real-time:实时查看绘制事件，以识别可能会损害动画性能的昂贵的绘制事件
lighthouse
最简便的方式

在https://developers.google.com/speed/pagespeed/insights输入要测量的网页的网址

（图——报告结果显示，默认含移动设备和桌面设备两种）

其他方式：
  1. 通过google的Audit使用 2.打开链接，直接输入需要进行Audit的网址 web.dev/measure/
  2. node命令行
    npm install -g lighthouse
    lighthouse <url>

  1. 安装谷歌插件 Lighthouse

  2. Lighthouse Viewer https://googlechrome.github.io/lighthouse/viewer/用于查看和分享报告

< https://developers.google.com/web/tools/lighthouse#get-started
>
WebPageTest

在 https://webpagetest.org/easy 中输入你要测量的网页的网址。

（图——首页）

（图——结果以表格形式展示）

参考文章

<
1.https://developers.google.com/web/fundamentals/performance/rail
>
avatar
文章
阅读
粉丝