提升网页性能的秘密武器：Google 工程师揭秘“空闲执行，紧急优先”策略

几周前，我决定审视一下我网站的一些性能指标。我的重点是检查网站在最新的性能指标——首次输入延迟（FID）中的表现。我的网站只是一个博客（并且没有运行很多 JavaScript），所以我本来预期会得到相当不错的结果。毕竟，用户通常不会对低于 100 毫秒的输入延迟感到困扰……

结果令我大跌眼镜。我的网站的 FID 竟然高达 200 毫秒以上！这表明我的网站在响应用户输入方面存在严重问题。我开始调查潜在的原因，并很快发现罪魁祸首是我的 JavaScript 代码。

在我的网站中，我使用了几个第三方 JavaScript 库来添加额外的功能，例如社交媒体小部件和分析跟踪。然而，这些库经常在空闲时间运行，即使没有用户交互的情况下也是如此。这会导致页面加载缓慢，并增加输入延迟。

为了解决这个问题，我偶然发现了 Google 工程师最近提出的一个新策略：空闲执行，紧急优先 。这个策略的目标是在空闲时间执行非关键任务，而在用户与页面交互时优先处理关键任务。

我将此策略应用到我的网站，结果令人惊讶。我的 FID 立即下降到 100 毫秒以下，这意味着我的网站现在对用户输入的响应速度明显更快。

空闲执行，紧急优先策略的工作原理

空闲执行，紧急优先策略基于这样一个观察：现代 Web 应用程序通常会在空闲时间执行大量非关键任务。这些任务包括加载图像、运行分析脚本以及更新社交媒体小部件。虽然这些任务很重要，但它们通常不会立即影响用户体验。

这个策略建议将这些非关键任务推迟到空闲时间执行。当浏览器处于空闲状态（例如，当用户没有与页面交互时）时，它将执行这些任务。这释放了宝贵的资源，用于在用户与页面交互时处理关键任务。

如何将空闲执行，紧急优先策略应用到您的网站

将空闲执行，紧急优先策略应用到您的网站的过程相对简单。您可以使用以下工具和技术：

• 浏览器 API： 现代浏览器提供了几种 API，允许您控制 JavaScript 任务的优先级。例如，您可以使用 requestIdleCallback() API 在空闲时间安排任务。
• 第三方库： 还有几个第三方库可以帮助您实现空闲执行。一个流行的库是 idle-js。
• 手动代码重构： 如果您对 JavaScript 有信心，您还可以手动重构您的代码以遵循空闲执行模式。

结论

空闲执行，紧急优先策略是一个强大的技术，可以显着提升网页性能。通过将非关键任务推迟到空闲时间执行，您可以释放宝贵的资源，用于在用户与页面交互时处理关键任务。这可以显着降低输入延迟，并改善整体用户体验。

如果您正在寻找一种方法来提升您网站的性能，我强烈建议您尝试空闲执行，紧急优先策略。它是一个简单而有效的技术，可以对您的用户产生重大影响。