Question

第一种方式：

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

第二种方式：

var js = document.createElement("script");
js.type = "text/javascript";
js.src = "jquery.js";
js.async = false;//THIS ATTRIBUTE

var h = document.getElementsByTagName("head")[0];
h.parentNode.appendChild(js);

问题：上述两种方式有什么区别。 Google Page Speed Insight 工具不会将First Way作为Render blocking issue投诉。

仅供参考：我们必须加载jQuery文件而不加async，因为GTM依赖于它。

Answer 1

关于如何加载脚本，WHAT-WG HTML spec进入非常详细。

根本区别 - 尽量不要笑 - 是一部分是HTML的一部分而另一部分是由JavaScript代码生成的。

使用HTML中的script标记：

浏览器可以与DOM构建器并行发现并开始下载（但不执行）脚本，直到DOM构建器到达令牌流中的那个点
该脚本也可以使用document.write而不会删除文档
在实际执行脚本之前，不会暂停主要的JavaScript UI线程

使用script添加带有JavaScript代码的async = false元素：

浏览器无法预先下载
在不删除文档的情况下，脚本无法使用document.write
主JavaScript JavaScript线程被阻止等待下载，而不仅仅是在脚本执行时

虽然没有<script src="..."></script>或async属性的defer（例如阻止脚本标记）阻止了网页加载，但影响可能不那么严重。

那就是说，如果PageSpeed没有抱怨head中的阻止脚本标记，我会非常非常。如果没有非常有充分理由做其他事情，阻止script代码应该在body的末尾，就在结束</body>代码之前。

从评论中看来，您似乎在使用Google脚本，而且您已经说过他们想要script中的head代码。它们可能意味着您使用defer（以保持脚本之间的顺序）：

<script src="jquery.js" defer></script>
<script src="gtm.js" defer></script>

...在head中。 defer表示脚本不支持DOM（它们并行下载但在DOM解析完成之前不运行），但执行执行按顺序。

Answer 2

对于第一种方法：有几种方法可以执行外部脚本。

如果存在异步：脚本与异步执行页面的其余部分（脚本将在页面执行时执行继续解析）
如果不存在异步并且存在延迟：执行脚本当页面完成解析时
如果不存在异步或延迟：提取脚本并且在浏览器继续解析页面之前立即执行

第二种方法

async：false =代码已暂停。（等待此完成的其他代码。）
async：true =代码继续。（什么都没有暂停。其他代码不是等待。）

通过async = false加载javascript文件和没有async属性的脚本标记之间的区别

2 个答案: