运行时性能是指页面在运行时的表现，而不是加载时的表现。

本文探讨如何使用 Chrome DevTools 性能面板分析运行时性能。 就 RAIL 模型而言，这个工具对于分析页面的 Response、Animation 和 Idle 阶段非常有用。

什么是 Web 应用中的 RAIL 模型？

RAIL 是一种用于衡量 Web 应用程序性能的模型，它的名字代表了其四个核心组成部分：响应(Response)、动画(Animation)、空闲(Idle)和负载(Load)。RAIL 模型帮助开发人员将应用程序的性能拆分成这四个部分，并提供了一些指导方针来改进每个部分的性能，从而提高整体应用程序的响应速度和用户体验。

具体来说，RAIL 模型包括以下四个部分：

• 响应(Response)：指应用程序对用户输入的快速响应能力，包括在100毫秒之内响应用户的操作、按需加载资源等。

• 动画(Animation)：指应用程序提供流畅的动画效果，包括使动画在 60 帧/秒的帧率下运行、使用 requestAnimationFrame() API 等。

• 空闲(Idle)：指应用程序在不占用主线程的情况下执行后台任务，包括使用 requestIdleCallback() API、合理地利用 Service Workers 等。

• 负载(Load)：指应用程序在加载和处理资源方面的性能表现，包括使用 HTTP/2 协议、使用现代浏览器缓存等。

RAIL 模型旨在帮助开发人员将应用程序性能拆分成不同的部分，并提供一些指导方针来改进每个部分的性能，从而提高整体应用程序的响应速度和用户体验。

在使用 Chrome 开发者工具 performance 面板时，请确保在Incognito Mode 下开启应用。

隐身模式确保 Chrome 在干净的状态下运行。 例如，如果您安装了很多扩展，这些扩展可能会在您的性能测量中产生噪音。

移动设备的 CPU 能力远低于台式机和笔记本电脑。 每当开发人员分析一个页面时，可以使用 CPU 节流(throttle)来模拟页面在移动设备上的表现。