HTML解析顺序/脚本执行顺序答案

【问题标题】：HTML parse order / script execution orderHTML解析顺序/脚本执行顺序
【发布时间】：2011-10-26 12:13:09
【问题描述】：

以下几行来自jQuery官方网站

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>

我不确定 HTML 解析顺序，或者我应该说脚本执行顺序。

问题是：第 2 行会等待第 1 行加载吗？我怀疑。

如果第 1 行仍在加载中（比如说它是 3000KB，并且需要很长时间），并且第 2 行已经执行。 window.jQuery 将始终为 false，因此始终包含第二个 js。如果这是真的，那么第 1 行是什么意思？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

脚本按照它们在文档中的顺序执行。浏览器会等待脚本加载完毕，然后再执行后面的脚本。

如果不是这种情况，您就不能让任何两个文件相互依赖。您必须将所有内容放在同一个文件中，否则脚本执行顺序实际上是随机的。

【讨论】：

【解决方案2】：

是的，它会等待解析任何 html，直到脚本被加载和解析。这就是为什么您应该在页面末尾加载外部脚本以便脚本不会阻塞 html 呈现的原因之一。

【讨论】：

好的，关于将脚本放在哪里，顶部或底部：
，解析器是否会等待脚本加载到解析div？ YSlow 建议将脚本放在底部，但我看到所有那些不遵循此规则的 BIG 网站。那么我应该什么时候或什么类型的脚本放在底部？
是的，首先将加载并执行脚本，然后解析 div。所有不需要正确显示你的边的脚本都应该在你的边的末尾加载。

【解决方案3】：

让我们谈谈不使用属性defer 或async 的更传统的处理方式

浏览器会：

下载scripts，阻止其他资源下载
解析脚本
执行脚本

参见第一章，从High Performance JavaScript加载和执行

这是另一个很好的参考 12.3。从JavaScript: The Definitive Guide, 4th Edition执行JavaScript程序

【讨论】：