一个 长任务是指长时间占用主线程的 JavaScript 代码，导致 UI “冻结”。
当页面加载时，即使页面看起来已准备就绪，长任务也可能会占用主线程并使页面对用户输入无响应。点击和触摸操作通常不起作用，因为事件侦听器和点击处理程序等交互功能尚未附加到 UI 元素。因此，长任务会大大增加您的可交互时间。
Chrome DevTools 现在可以可视化长任务，从而更容易看到需要优化的任务。
哪些算作长任务？
占用大量 CPU 的长任务是由超过 50 毫秒的复杂工作引起的。RAIL 模型建议您在50 毫秒内处理用户输入事件，以确保在 100 毫秒内看到可见的响应，并保持操作和反应之间的联系。
重点：虽然 RAIL 模型建议在 100 毫秒内为用户输入提供可见的响应，但交互到下次绘制 (INP) 指标的阈值允许最多 200 毫秒，以设定更易于实现的目标，尤其是在较慢的设备上。
我的页面中是否有可能会延迟交互性的长任务？
到目前为止，您需要手动在 Chrome DevTools 中查找超过 50 毫秒的脚本“长黄色块”，或者使用 Long Tasks API 来找出哪些任务延迟了交互性。
为了帮助简化您的性能审核工作流程，DevTools 现在可以可视化长任务。任务（以灰色显示）如果是长任务，则带有红色标记。
要使用新的可视化工具
- 在加载网页的性能面板中记录跟踪。
- 在主线程视图中查找红色标记。您应该看到任务现在标记为灰色，并标记为任务。
- 将指针悬停在灰色条上。您将看到一个对话框，显示任务持续时间以及是否被视为长任务。
是什么导致了我的长任务？
要找出长任务的原因，请选择灰色的任务条。在下面的抽屉中，选择自下而上和按活动分组。这使您可以查看哪些活动对任务花费如此长时间完成的贡献最大（总计）。在以下示例中，延迟的原因看起来像是一组代价高昂的 DOM 查询。
优化长任务的常见方法有哪些？
大型脚本通常是长任务的主要原因。考虑拆分它们。还要注意第三方脚本，它们也可能包含延迟主要内容变为可交互状态的长任务。
将所有工作分解为在 < 50 毫秒内运行的块，并在正确的位置和时间运行这些块。其中一些块的正确位置可能是在主线程之外，在 service worker 中。有关分解长任务的指南，请参阅优化长任务和 Phil Walton 的Idle Until Urgent。
保持页面的响应速度。最大限度地减少长任务是确保用户在访问您的网站时获得愉悦体验的好方法。有关长任务的更多信息，请参阅以用户为中心的性能指标。