长任务是指在较长时间内独占主线程的 JavaScript 代码，导致界面“冻结”。
在网页加载期间，长任务可能会占用主线程，使网页对用户输入无响应，即使看起来已准备就绪也是如此。点击和点按操作通常不起作用，因为事件监听器和点击处理脚本等互动功能尚未附加到界面元素。因此，耗时较长的任务可能会大幅增加可交互时间。
Chrome 开发者工具现在可以直观呈现长任务，让您更轻松地查看需要优化的任务。
什么会被计为长任务？
耗用大量 CPU 的长任务是由耗时超过 50 毫秒的复杂工作导致的。RAIL 模型建议您在 50 毫秒内处理用户输入事件，以确保在 100 毫秒内显示可见响应，并保持操作与响应之间的关联。
要点：虽然 RAIL 模型建议在 100 毫秒内对用户输入做出可视响应，但 Interaction to Next Paint (INP) 指标的阈值允许最多 200 毫秒，以便设置更切实可行的预期值，尤其是对于速度较慢的设备。
我的网页中是否存在可能会延迟可交互时间的长任务？
在此之前，您需要在 Chrome 开发者工具中手动查找超过 50 毫秒的脚本“长黄色块”，或者使用 Long Tasks API 来确定哪些任务延迟了互动性。
为了简化性能审核工作流程，DevTools 现在可直观呈现长任务。如果任务（显示为灰色）是长任务，则会带有红色标记。
如需使用新的可视化工具，请执行以下操作：
- 在加载网页的“性能”面板中记录轨迹。
- 在主线程视图中查找红色标记。您应该会看到任务现在标记为灰色，并带有任务标签。
- 将指针悬停在灰色条上。您会看到一个对话框，其中显示了任务时长以及该任务是否被视为长任务。
导致长任务的原因是什么？
如需了解任务运行时间过长的原因，请选择灰色的任务栏。在下拉菜单中，依次选择自下而上和按活动分组。这样，您就可以了解哪些活动对任务耗时过长贡献最大（总计）。在以下示例中，延迟的原因似乎是一组耗时的 DOM 查询。
优化长任务的常见方法有哪些？
大脚本通常是导致长任务的主要原因。不妨考虑将其拆分。此外，请密切关注第三方脚本，因为它们也可能包含会延迟主要内容变为交互状态的长任务。
将所有工作拆分为运行时间小于 50 毫秒的多个分块，并在正确的位置和时间运行这些分块。某些任务的正确位置可能不在主线程，而是在服务工件中。如需有关拆分长任务的指导，请参阅优化长任务和 Phil Walton 的 Idle Until Urgent。
确保网页快速响应。尽量减少长任务是确保用户在访问您的网站时获得愉快体验的绝佳方式。如需详细了解长任务，请参阅以用户为中心的性能指标。