23

我不经常看到有关 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 之类的错误（它没有在其他脚本之前加载），但是通常这些错误不会发生。我不明白为什么。

4

3 回答 3

16

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

于 2010-03-06T10:55:28.003 回答
3

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

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

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

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

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

希望这对您有所帮助。

于 2010-03-06T11:01:06.570 回答
3

在@Andy's Answer 上加几分。

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

深入浅出：

HTML5 具有标签的defer和async属性。<script>

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

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

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

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

于 2019-03-26T15:56:53.840 回答