了解如何诊断成本高昂的工作阻止用户互动。
长时间运行的任务可能会使主线程保持忙碌状态，从而延迟用户互动。现在，Chrome 开发者工具可以直观呈现长时间运行的任务，让您可以更轻松地查看需要优化的任务。
如果您使用 Lighthouse 审核您的网页，则可能会熟悉可交互时间指标，该指标表示用户何时可与您的网页互动并收到响应。但您知道吗？长 (JavaScript) 任务可能会导致 TTI 不佳。
什么是长时间运行的任务？
长任务是指长时间独占主线程，导致界面“冻结”的 JavaScript 代码。
在网页加载时，长时间运行的任务可能会占用主线程，并使页面无法响应用户输入，即使页面看起来已就绪。点击和点按通常不起作用，因为事件监听器、点击处理程序等尚未附加。
由于耗时超过 50 毫秒的复杂工作，会出现占用大量 CPU 的长时间任务。为什么是 50 毫秒？RAIL 模型建议您在 50 毫秒内处理用户输入事件，以确保在 100 毫秒内获得可见响应。否则，操作与反应之间的连接将会中断。
我的页面中是否存在可能会延迟互动的长时间运行的任务？
到目前为止，您需要在 Chrome 开发者工具中手动查找长度超过 50 毫秒的脚本“长黄色块”，或使用 Long Tasks API 找出哪些任务导致互动延迟。这可能有点麻烦。
为帮助简化性能审核工作流，DevTools 现在直观呈现长时间运行的任务。如果任务（显示为灰色）属于长时间运行的任务，则会显示红色标记。
- 在加载网页的“性能”面板中记录轨迹。
- 请在主线程视图中寻找一个红旗。您应该会看到任务现在显示为灰色（“任务”）。
- 将鼠标悬停在某个条形上，即可了解任务的时长，以及该任务是否被视为“耗时”。
是什么原因导致了长时间任务？
要了解导致任务过长的原因，请选择灰色的任务栏。在下面的抽屉式导航栏中，选择 Bottom-Up 和 Group by Activity。这样，您就可以了解哪些活动对花费这么长时间才能完成的任务做出了最大贡献。如下所示，这似乎是一组成本高昂的 DOM 查询。
优化长时间运行的任务的常见方法有哪些？
大型脚本通常是导致长时间运行的任务的主要原因，因此请考虑拆分脚本。此外，也请留意第三方脚本；它们的耗时较长任务可能会导致主要内容无法互动。
将所有工作拆分成小块（在 50 毫秒内运行），并在正确的位置和时间运行这些块；正确的位置甚至可能不在主线程中，在 worker 中。Phil Walton 的 Idle Until Urgent 著，是关于这个主题的好书。另请参阅优化长任务一文，了解管理和拆分长任务的一般策略。
确保网页能迅速响应。尽量减少长时间运行的任务可以很好地确保用户在访问您的网站时获得愉悦的体验。如需详细了解长时间运行的任务，请参阅以用户为中心的性能指标。