Question

HTML文件中这两个JavaScript实现之间有什么区别？

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

Google Analytics以编程方式执行此操作：

  (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 
'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
    })();

浏览器加载/呈现HTML页面的方式是否有任何差异，或者是否存在与缓存此类JS脚本的连接存在一些差异？

Answer 1

您的第一个脚本标记强制浏览器同步拉入该文件;换句话说，浏览器将停止所有其他活动以下载，解析和执行脚本，然后再继续呈现页面。

在第二种情况下（你的谷歌的东西），动态创建一个脚本元素，并异步加载文件。

第一个标签是blocking，第二个标签不是。

有关async的更多信息：

https://developer.mozilla.org/en-US/docs/HTML/Element/Script

更多关于“阻止”脚本的影响：

http://developer.yahoo.com/performance/rules.html

摘要：如果脚本被阻止，请将脚本放在页面底部。

Answer 2

一般情况下，没有。

在这种特定情况下：Google正在使用不同的主机名来提供SSL版本。

如果您为HTTP和HTTPS版本使用相同的主机名，则可以使用：

<script src="//example.com/ga.js" async></script>

......为了同样的效果。

请注意添加了async属性，该属性位于Google版本（2）中，但不是您的（1）。

HTML中两种JS实现的区别

2 个答案: