next.js - afterInteractive 和 lazyOnload 策略有什么区别？

Question

在新next/script组件我们有以下策略:

afterInteractive (default): For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.

lazyOnload: For scripts that can wait to load during idle time, such as chat support and social media widgets

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

Answer 1

网站通常需要第三方来提供分析、广告、客户支持小部件和同意管理等功能。然而，这些脚本往往会严重影响加载性能，并且会拖累用户体验。开发人员常常难以决定将它们放置在应用程序中的哪个位置以实现最佳加载。

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

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

afterInteractive(默认):用于在页面交互后可以获取和执行的脚本，例如标签管理器和分析。这些脚本在客户端注入(inject)，并在水合后运行。这个时间基本上是浏览器已经下载了网站的必要文件，所以它可以加载网站并进行交互。

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