问如何防止JavaScript HTML阻塞

EN

使用<script>元素的属性

async和defer脚本都可以立即下载，而不需要暂停解析器，并且都支持可选的onload处理程序，以满足执行初始化的共同需要，这取决于脚本。async和defer之间的区别集中在脚本执行时。每个async脚本在下载完成后和window的load事件之前立即执行。这意味着async脚本可能(也很可能)不会按照页面中的顺序执行。另一方面，defer脚本保证按页面中的顺序执行。在解析完全完成之后，但在document的DOMContentLoaded事件之前，执行就开始了。

• defer由IE4+、火狐3.5+、Chrome 2+和Safari 4+支持。
• 火狐3.6+、Chrome 7+和Safari 5+都支持async。(不支持 IE！)

defer是你最好的选择。脚本将并行下载并同步执行(按顺序)。它也比async更好的支持和更可预测。(另见defer。)

<script defer type="text/javascript" src="script.js"></script>

它很难看，但是您可以通过注入DOM元素获得并行下载的脚本..。使用javascript。

查看这篇博客文章以获得一个有用的示例。

这对于HTML中的内联脚本来说是正常的。可以使用以下代码动态添加脚本：

<script type="text/javascript">
    var head  = document.getElementsByTagName("head")[0]; 
    var sTag1 = document.createElement("script");
    var sTag2 = document.createElement("script");
    sTag1.type = sTag2.type = "text/javascript";
    sTag1.src = "http://example.com/ex.js";
    sTag2.src = "http://google.com/google-maps.js";
    head.appendChild(sTag1);
    head.appendChild(sTag2);
</script>

然而，这可能会导致意想不到的结果--它们可能不会按正确的顺序下载和解析，如果脚本2引用脚本1中的变量或函数，这一点很重要。

如果您只希望在脚本加载之前加载HTML，那么保持它们的顺序，并将它们放在HTML文件的底部中，而不是放在head标记中。这将在下载和解析脚本之前加载页面。见5.html。