# 评判标准 无规矩不成方圆，所以这里先说说评判标准。评判标准主要指的是用户打开网页、浏览网页的体验和感受。我们需要一种客观的评估模型来统一量化用户体验的各个环节，这样才能找到需要优化的方向，找到开发极致用户体验网页的捷径。 ## RAIL评估模型 [RAIL](https://developers.google.com/web/fundamentals/performance/rail?hl=zh-cn)是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能。以用户为中心；最终目标不仅是让您的网站在任何特定设备上都能运行很快，而是使用户满意。  * Response，立即响应用户；在 100 毫秒以内确认用户输入，超过100ms建议加上动效或者loading，通过视觉冲击减少用户等待的焦虑。 * Animation，设置动画或滚动时，在 10 毫秒以内生成帧。 * Idle，最大程度增加主线程的空闲时间。主线程空闲才能随时都可以及时响应。 * Load，持续吸引用户；在 1000 毫秒以内呈现交互内容。 让用户成为您的性能工作的中心。用户花在网站上的大多数时间不是等待加载，而是在使用时等待响应。了解用户如何评价性能延迟：  ### 响应：在 100 毫秒以内响应 在用户注意到滞后之前您有 100 毫秒的时间可以响应用户输入。这适用于大多数输入，不管他们是在点击按钮、切换表单控件还是启动动画。但不适用于触摸拖动或滚动。 如果您未响应，操作与反应之间的连接就会中断。用户会注意到。 尽管很明显应立即响应用户的操作，但这并不总是正确的做法。使用此 100 毫秒窗口执行其他开销大的工作，但需要谨慎，以免妨碍用户。如果可能，请在后台执行工作。 对于需要超过 500 毫秒才能完成的操作，请始终提供反馈机制，比如loading，进度条等。 ### 动画：在 10 毫秒内生成一帧 动画不只是奇特的 UI 效果。例如，滚动和触摸拖动就是动画类型。 如果动画帧率发生变化，您的用户确实会注意到。您的目标就是每秒生成 60 帧，每一帧必须完成以下所有步骤：  从纯粹的数学角度而言，每帧的预算约为 16 毫秒（1000 毫秒 / 60 帧 = 16.66 毫秒/帧）。 但因为浏览器需要花费时间将新帧绘制到屏幕上，只有 10 毫秒来执行代码。 在像动画一样的高压点中，关键是不论能不能做，什么都不要做，做最少的工作。 如果可能，请利用 100 毫秒响应预先计算开销大的工作，这样您就可以尽可能增加实现 60fps 的可能性。 如需了解详细信息，请参阅[渲染性能](https://developers.google.com/web/fundamentals/performance/rendering/?hl=zh-cn)。 ### 空闲：最大程度增加空闲时间 利用空闲时间完成推迟的工作。例如，尽可能减少预加载数据，以便您的应用快速加载，并利用空闲时间加载剩余数据。 推迟的工作应分成每个耗时约 50 毫秒的多个块。如果用户开始交互，优先级最高的事项是响应用户。  要实现小于 100 毫秒的响应，应用必须在每 50 毫秒内将控制权返回给主线程，这样应用就可以执行其像素管道、对用户输入作出反应，等等。以 50 毫秒块工作既可以完成任务，又能确保及时的响应。 ### 加载：在 1000 毫秒以内呈现内容 在 1 秒钟内加载您的网站。否则，用户的注意力会分散，他们处理任务的感觉会中断。侧重于[优化关键渲染路径](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=zh-cn)以取消阻止渲染。 实际操作中，我们无需在 1 秒内加载所有内容以产生完整加载的感觉，而是启用渐进式渲染和在后台执行一些工作，默认只加载和渲染首屏内容，将非首屏、非必需的加载推迟到空闲时间段处理。 ### 关键 RAIL 指标汇总 要根据 RAIL 指标评估您的网站，请使用 Chrome DevTools [Timeline 工具](https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=zh-cn)记录用户操作。然后根据这些关键 RAIL 指标检查 Timeline 中的记录时间。  这是Google工程师提出来的RAIL优化模型，在实际前端业务监控中，我们可以拆分成更多的数据指标进行统计分析。 ## 性能和体验数据指标 数据驱动业务开发，我们的目标是高性能和极致用户体验，那么我们首先需要制定符合我们目标的性能数据指标和体验数据指标。 在制定数据指标之前，我们分析下页面加载过程，我们分为这四个部分：   **性能指标**：加载呈现又快又稳。加载到展现的性能指标和稳定性指标。 **体验指标**：操作反应灵敏。点击，滑动等交互响应及时，操作流畅，动画运行流畅。 加载性能指标： * 秒开率：页面首屏加载时间小于1s的比例，也就是页面加载到onload事件触发时所消耗的时间。 * [FP（first paint） 和 FCP（first content paint）](https://w3c.github.io/paint-timing/)分别是指页面首次绘制和首次内容绘制。FP（首次绘制）包括了任何用户自定义的背景绘制，它是首先将像素绘制到屏幕的时刻。FCP（首次内容绘制）是浏览器将第一个 DOM 渲染到屏幕的时间。该指标报告了浏览器首次呈现任何文本、图像、画布或者 SVG 的时间。这两个指标其实指示了我们通常所说的白屏时间。 * FMP(first meaningful paint)首次有意义绘制, 是页面可用性的度量标准。因为很难有一个通用标准来指示所有的页面当前时刻的渲染达是否到了有用的程度，所以当前并没有制定标准。对于开发者，我们可以根据自己的页面来确定那一部分是最重要的，然后度量这部分渲染出的时间作为FMP。 * TTFB(time to first byte, 首字节时间)，是指从浏览器发起第一个请求到数据返回第一个字节所消耗的时间，这个时间包含了网络时间，后端处理时间等等，可以作为一个链路数据综合参考指标。 稳定性指标 * 资源错误：静态资源加载错误，常见的就是404，资源地址不正确或者远程服务有问题。 * JS报错：页面运行时抛出来的异常信息。比如变量未定义，函数报错等等。 * Crash：页面白屏不展示内容，很可能是页面某个模块报错导致整个页面不展示。 * 内存堆栈：监控页面内存和堆栈使用情况，常见如页面内存泄露等原因会直接导致APP闪退。 * 接口报错：接口挂了，请求超时。或者接口返回了错误信息。或者接口返回数据错误，比如空数据，不符合预期。 操作体验指标： * 交互延迟：用户点击后页面没有响应或者响应时间超过100ms，用户感觉这次点击操作是延迟的（可称为无效点击）。通过[EventTiming API](https://www.fed123.com/pwa/3301.html)我们可以统计用户交互操作后的浏览器响应时间。 * 卡顿：统计浏览器中执行时间超过 50 ms 的任务，都是 long task（[Long tasks API](https://w3c.github.io/longtasks/) ），可能会造成页面卡顿。 * 滚动流畅性：滚动过程是否流畅，监测用户开始操作到页面开始滚动的时间差，按照前面的标准，小于100ms才会体验流畅。 * 动画流畅性：监测动画开始到动画结束，计算帧率FPS。按照前面的标准，每帧计算时间小于10ms才会体验流畅。 * TTI（[time to interactive](https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/preview#), 可交互时间)：指页面已渲染出内容，同时可以响应用户的输入的时间。 * [FID（First Input Delay）](https://developers.google.com/web/updates/2018/05/first-input-delay)，首次输入延迟，从用户看到页面到第一次输入的延迟，一般都是因为主线程阻塞，会导致响应慢。这个指标反映用户对当前页面的第一感觉，如果用户很久没有交互，说明首屏内容比较吸引人，或者用户很快就切走了，说明对用户没有吸引力。