我经常看不到关于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未定义的错误(它没有在其他脚本之前加载),但是通常这些错误不会发生。我不明白为什么。
脚本是并行下载的,但是按照它们在HTML中出现的顺序进行解析和执行,阻止页面上的其他操作(包括呈现),直到它们执行完毕。如果脚本通过DOM添加JavaScript代码,或者如果最新版本的Firefox中存在async attribute,则脚本可能是非阻塞的。
控制JavaScript下载的主要是您的浏览器。如果你从同一个域加载它们,就像你上面那样,它们将一个接一个地加载,因此加载到你指定的顺序。
作为一个简单的测试,您可以简单地尝试在每个文件上指定函数并尝试从列表中的下一个文件调用它们,这样您就可以看到它们加载的顺序。
关于加载的优先级,大多数网站优化书籍会告诉您在最底部加载js文件,因为这会使您的页面加载速度更快,并且js文件将作为最后一个必要资源加载。这需要小心,如果您的页面在加载时直接依赖JavaScript,您可能会遇到无穷无尽的js错误。
像jquery这样的库会对此有很大的帮助,因为一旦DOM可用,它们只会让js动作发生,因此当js加载到HTML的底部时没有js错误。
另一个有趣的事情是,确保你的js文件保持适当的缩小,并坚持q最小的文件,因为这样做,你只需要做一些服务器请求,我会让你的JavaScript现成的少时间。
希望这对你有所帮助。
在@Andy的答案中加点几点。
在您的情况下,脚本文件将并行下载并按您对齐的顺序进行解析。这是浏览器的默认行为,因为您尚未明确添加以下任何脚本属性。
几乎没有深入:
HTML5具有defer
标签的async
和<script>
属性。
defer
- 允许脚本文件并行下载并完成DOM渲染。在下载完成时,按顺序解析脚本。async
- 允许脚本文件并行下载并完成DOM渲染。在下载完成时,立即解析脚本而不等待其他脚本。即使<img>
加载也会阻止DOM渲染,但它没有延迟/异步。这里lazyload概念进入图片。