afterInteractive和lazyOnload策略有什么区别？

Question

在新next/script组件中，我们有以下策略：

afterInteractive（默认）：用于在页面交互后可以获取并执行的脚本，例如标签管理器和分析。这些脚本被注入到客户端并在水合后运行。

lazyOnload：对于可以在空闲时间等待加载的脚本，例如聊天支持和社交媒体小部件

这两个定义看起来很相似，它们有何不同？

Answer 1

网站通常需要第三方来进行分析、广告、客户支持小部件和同意管理等工作。然而，这些脚本往往会严重影响加载性能，并会降低用户体验。开发人员经常难以决定将它们放置在应用程序中的何处以获得最佳加载。

使用 next/script，您可以定义策略属性，Next.js 将优化脚本的加载：

beforeInteractive：用于在页面交互之前需要获取和执行的关键脚本，例如机器人检测和同意管理。这些脚本从服务器注入到初始 HTML 中，并在执行自捆绑的 JavaScript 之前运行。

afterInteractive（默认）：用于在页面交互后可以获取并执行的脚本，例如标签管理器和分析。这些脚本被注入到客户端并在水合后运行。这一次基本上是浏览器下载了网站所需的文件，以便它可以加载网站并进行交互的时间。

lazyOnload 用于可以在空闲时间等待加载的脚本，例如聊天支持和社交媒体小部件。空闲时间是指页面未在浏览器上完全加载，因此当用户打开网站时，它将下载 js 和 css 文件以及所有其他必要的文件，然后加载脚本。