JavaScript 文件是如何加载和执行的？

Question

我不经常看到有关 JavaScript 文件加载/执行顺序的讨论或研究。我对解释如何处理 JavaScript 的网站感兴趣。特别是，如果我有

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

我假设首先下载 a.js，然后是 b.js，最后是 c.js，还是同时下载它们？执行呢？标题中的脚本优先于正文中的脚本吗？

我对这个话题如此感兴趣的主要原因是因为我正在编写一个使用动态加载这些脚本的 JavaScript 软件，有时我会收到 x is undefined 之类的错误（它在其他脚本之前没有加载)，但通常不会发生这些错误。我不明白为什么。

Answer 1

在@Andy 的回答上加几分。

在您的情况下，脚本文件是并行下载的，并按照您对齐的顺序进行解析。这是浏览器的默认行为，因为您没有明确添加以下任何脚本属性。

深入浅出：

HTML5 为<script> 标签提供了defer 和async 属性。

• 无属性 - 您的脚本加载将阻止 DOM 渲染，直到它 被下载并解析。

• defer - 允许脚本文件下载并完成 DOM 并行渲染。下载完成后，按顺序解析脚本 安排好了。

• async - 允许脚本文件下载并完成 DOM 并行渲染。下载完成后，解析脚本 立即无需等待其他脚本。

即使<img> load 也会阻塞 DOM 渲染，但没有延迟/异步。这里lazyload 概念出现了。

Answer 2

脚本是并行下载的，但会按照它们在 HTML 中出现的顺序进行解析和执行，从而阻止页面上的其他操作（包括渲染），直到它们执行完毕。如果脚本是由 JavaScript 代码通过 DOM 添加的，或者 async attribute 存在于最新版本的 Firefox 中，则脚本可能是非阻塞的。

Answer 3

控制 JavaScript 下载的主要是您的浏览器。如果您从同一个域中加载它们，就像您在上面所做的那样，它们将一个接一个地加载，因此按照您指定的顺序加载。

作为一个简单的测试，您可以简单地尝试在每个文件上指定函数并尝试从列表中的下一个文件调用它们，这样您就可以看到它们的加载顺序。

关于加载的优先级，大多数网站优化书籍都会告诉你在最底部加载你的js文件，因为这会使你的页面加载更快，并且js文件将作为最后一个必要的资源加载。这需要小心，如果您的页面在加载时直接依赖 JavaScript，您可能会遇到无穷无尽的 js 错误。

jquery 之类的库将对此有很大帮助，因为一旦 DOM 可用，它们只会让 js 动作发生，因此在 HTML 底部加载 js 时不会出现 js 错误。

另一件有趣的事情是，确保你的 js 文件被适当地缩小，并坚持 q 最少的文件，因为这样做，你只做几个服务器请求，我会很容易地得到你的 JavaScript在更短的时间内可用。

希望对你有所帮助。