JavaScript 如何处理网页中的脚本加载和执行顺序？

JavaScript 脚本在网页中的加载和执行顺序是怎样的？

JavaScript 脚本可以以多种方式包含在网页中方式，包括：

• 内联代码或从外部加载URL
• 包含在 中或标签
• 没有、延迟或异步属性（仅适用于外部脚本）
• 包含在静态源中或使用其他脚本动态添加

加载顺序

脚本按照在 HTML 代码中遇到的顺序加载，无论是否它们是内联的或外部的。然而，动态添加的脚本的加载顺序可能会受到浏览器行为的影响。

执行顺序

JavaScript 脚本的执行顺序取决于几个因素：

• 一般规则： 脚本按照在页面中遇到的顺序执行，除了标记为async.
• 异步脚本： 标记为异步的脚本以不可预测的顺序执行。它们可能会在加载后或解析器完成后立即运行。
• 动态添加的脚本：动态添加的脚本的行为取决于浏览器。
• defer Scripts： 标记有 defer 的脚本会等待解析器完成，然后按它们原来的顺序执行
• 模块脚本（type="module"）：模块脚本会自动赋予 defer 属性，并在解析完成后按顺序执行。他们还可以使用 async 属性立即运行内联模块脚本。

示例

在正文中包含内联脚本的给定示例中，加载顺序是：

1. 中的初始化脚本
2. 用于脚本加载的外部脚本
3. 内联脚本添加另一个外部脚本
4. 使用添加的外部脚本的内联脚本

执行顺序取决于动态添加的脚本是否标记为异步或not:

• 如果添加的脚本没有标记为异步，它将在添加它的内联脚本之后执行。
• 如果添加的脚本被标记为异步，它的执行顺序是不可预测的，可能发生在添加它的内联脚本之前或之后。

以上是JavaScript 如何处理网页中的脚本加载和执行顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！