JavaScript 脚本加载和执行顺序如何因内联、外部、异步、延迟和动态添加的脚本而变化？

了解 JavaScript 脚本的加载和执行顺序

由于包含外部脚本和动态脚本添加的方式多种多样，网页中的 JavaScript 执行顺序可能会很复杂。为了弄清楚其中的复杂性，让我们根据不同的场景深入研究 JavaScript 脚本的加载和执行顺序：

内联脚本与外部脚本

无论是内联代码还是从外部加载的脚本一个 URI，脚本在解析期间按照它们在页面中出现的顺序执行。因此，外部脚本之后的内联脚本会等待这些外部脚本加载并运行。

异步脚本

标有 async 属性的异步脚本以不可预测的顺序执行。浏览器并行加载它们并运行它们，而不考虑顺序。

延迟脚本

具有 defer 属性的延迟脚本将被加载但保留到解析完成为止。然后，它们按照遇到的顺序执行，保留延迟脚本之间的依赖关系。

动态添加的脚本

动态脚本插入行为因浏览器而异。例如，除非另有说明，否则 Firefox 默认动态添加异步脚本标签。异步脚本可以立即执行，也可以在解析后执行。

执行顺序

考虑到上述情况，原始问题中描述的场景的执行顺序如下：

• 中的初始化和脚本加载脚本（按顺序加载并执行）
• 中的第一个内联脚本动态加载脚本（出现在 中的外部脚本之后）
• 中的第二个内联脚本依赖于动态加载的脚本
• 动态加载的外部脚本并行加载并执行（不可预测的顺序）
• 第二个内联脚本只有在动态加载的脚本执行成功后才会执行。这是因为浏览器通常会按照脚本遇到的顺序优先执行脚本。

以上是JavaScript 脚本加载和执行顺序如何因内联、外部、异步、延迟和动态添加的脚本而变化？的详细内容。更多信息请关注PHP中文网其他相关文章！