前端性能优化 —— 页面性能指标及工具

最新推荐文章于 2024-06-04 13:50:29 发布

2401_84433807

最新推荐文章于 2024-06-04 13:50:29 发布

阅读量339

点赞数 3

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84433807/article/details/138381496

版权

程序员专栏收录该内容

177 篇文章 2 订阅

订阅专栏

本文介绍了Google的RAIL模型，一个以用户为中心的性能框架，关注点击、滚动和加载等关键操作的响应时间。模型强调100毫秒内的响应、动画10毫秒一帧、空闲时间最大化以及加载优化。同时提到了获取网页实时指标和HTML面试题的相关内容。

摘要由CSDN通过智能技术生成

RAIL模型是Google给出的一套以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解为关键操作（例如，点击、滚动、加载）并帮助您为每个操作定义性能目标。 RAIL分别代表：

Response:响应
Animation:动画
Idle:空闲
Load:加载如下图所示：

响应

在 100 毫秒内完成由用户输入发起的转换，让用户感觉交互是即时的。

为了确保在 100 毫秒内产生可见响应，需要在 50 毫秒内处理用户输入事件。这适用于大多数输入，例如点击按钮、切换表单控件或启动动画。但是，这不适用于触摸拖动或滚动。
尽管听起来可能有些自相矛盾，但是，即时响应用户输入并非总是正确的做法。您可以利用这 100 毫秒的时间窗口来执行其他需要消耗大量资源的工作，但是，注意不能妨碍用户。如果可能，应在后台工作。
对于需要 50 毫秒以上才能完成的操作，请随时提供反馈。

现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：110685036

50 毫秒还是 100 毫秒？

目标是在 100 毫秒内响应输入，那么，为什么我们的预算只有 50 毫秒？这是因为除输入处理外，通常还有需要执行其他工作，而且这些工作会占用可接受输入响应的部分可用时间。如果应用程序在空闲时间以推荐的 50 毫秒区块执行工作，这就意味着，如果输入在这些工作区块之一中发生，它最多可能会排队 50 毫秒。考虑到这一点，假设只有剩余的 50 毫秒可用于实际输入处理才是安全地做法。下图展示了这种影响，图中显示了在空闲任务期间收到的输入如何排队，从而减少可用的处理时间：