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

摘要:如果脚本阻塞,则将脚本放在页面底部.