javascript - HTML中两种JS实现的区别

Question

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

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

2. 正如 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

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

在第二种情况下（您的谷歌资料），脚本元素是动态创建的，并且文件是异步加载的。

第一个标签是阻塞的，第二个不是。

更多关于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) 中没有。