随着Interaction to Next Paint (INP)成为官方的核心 Web 要素，高效地测量和调试页面响应能力变得比以往任何时候都更加重要。
尝试修复缓慢的页面时，可行的解决方案之一是识别并中断阻塞主线程的长任务。
虽然这是一种非常有效且（很多人会说）强制性的策略，但可能有更好、更全面的方法来处理 INP 问题。
输入 Chrome 的长动画帧（LoAF）API。
这个相对较新的工具旨在帮助网络开发人员和网站所有者更好地理解缓慢的用户界面更新。
继续阅读以了解为何以及 牙医数据库 如何将其添加到您的性能工具箱中。
什么是长动画帧？
当网页动画中的某一帧的渲染时间比所需的帧速率（通常为每秒 60 帧或 16.6 毫秒）更长时，就会出现长动画帧。
为了使网站看起来流畅、快速，浏览器 探店海马体北京金源店到 需要能够快速更新其内容。但是，运行许多占用大量 CPU 的任务会阻塞浏览器的主线程，从而延迟渲染过程并导致动画帧过长。
这种延迟通常由复杂的动画和高分辨率图形引起，会导致明显的滞后或不流畅，破坏动画的流畅度并导致用户体验响应迟钝。
您可以在 Chrome DevTools 的“性能”选项卡中查看渲染帧数。红色条目表示丢失的帧数，黄色条目表示部分呈现的帧数。
为什么要使用长动画帧 API：长任务 API 的缺点
LoAF API 建立在另一个著名且 AFB 目录 广泛使用的工具——Long Tasks API 之上。
多年来，Long Tasks API 一直是开发人员识别和诊断响应问题的方式。
它首次在 Chrome 58 中发布，允许您监控长任务（占用主线程 50 毫秒或更长时间），这些任务会阻止浏览器处理任何其他任务或用户交互，直到完成为止。
然而，事实证明 Long Tasks API 存在一些缺点：
- 长任务不包括浏览器更新您在屏幕上看到的内容（如动画或调整大小）的部分。该阶段包括requestAnimationFrame回调、调整大小观察器、滚动观察器等。因此，即使这些更新需要很长时间并使网站感觉迟缓，它们也不会被算作长任务。
- 某些操作（如 UI 事件（例如点击））应为任务，但并未指定或实现为使用长任务。
- 单个任务可能会同时执行多项任务，例如处理多个用户交互。这可能使得很难确定任务的具体部分，从而导致执行时间过长。
简而言之：
- 使用 Long Tasks API，您获得的唯一信息是发生了一项长任务以及浏览器处理该任务需要多长时间。
- 事实证明，这不是测量主线程阻塞的最完整和最准确的方法。
- 因此，Chrome 提出了 Long Animation Frames API。
什么是长动画帧 API？
LoAF API 是一种更好地衡量和理解缓慢用户交互的建议方法。
工作原理如下：
LoAF 会查看主线程忙碌的时间。它会在主线程开始工作时开始计时，并在准备好显示某些内容或无事可做（空闲）时停止计时。
此时间段最多可涵盖两个任务，包括浏览器准备使用更新内容绘制屏幕之前的所有内容。这意味着它考虑到了以下所有步骤：
- 处理动画
- 调整元素大小
- 在屏幕上绘制像素
虽然 INP 是朝着更灵敏的网络迈出的一大步，但它只显示了效果，而没有显示缓慢的原因。而使用 LoAF，你可以找出浏览器拥塞的确切时间，还可以：
- 在不同阶段（渲染、布局和样式）花费了多少时间；
- 如果出现任何“布局混乱”，在此期间网站会多次低效地计算布局或样式，从而减慢速度；
- 缓慢的帧是否阻碍了真实用户的输入 – 换句话说，它是否导致网站对点击或输入没有响应；
- 有关在帧时间内处理的任何用户脚本的详细信息（例如回调、事件处理程序、承诺解析器）。
使用 LoAF API 和查看框架的优势
- 提供鸟瞰视图： LoAF API 可以更全面地了解您的网站在性能和响应性方面的情况。它捕获了导致长动画帧的更广泛的因素。这种全面的方法可以让您全面了解其网站的性能。
- 更好的归因： LoAF API 的一个关键优势是它能够为长帧提供详细的归因。这意味着您可以准确识别导致延迟的进程或元素。无论是特定脚本、动画还是复杂的 CSS 样式，该 API 都可以帮助您查明确切原因。
- 增强用户体验和满意度：开发人员可以利用 LoAF API 识别和处理长动画帧，从而显著增强用户体验。流畅的动画和响应式界面对于用户满意度至关重要。
- 降低跳出率：较长的动画帧可能会让用户感到沮丧，尤其是当它们导致动画卡顿或页面无响应时。LoAF API 通过识别和纠正这些问题来帮助减少用户的沮丧。性能良好且对用户输入做出快速响应的网站不太可能赶走访问者，从而降低跳出率并提高网站的整体效率。
我们相信，您一定迫不及待地想要测试这个新工具，因为它比 Long Tasks API 具有诸多优势。那么您该怎么做呢？
