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

Question

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

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

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

在第二种情况下(你的 google 东西)，脚本元素是动态创建的，文件是异步加载的。

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

关于异步的更多信息:

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

更多关于“阻塞”脚本的影响:

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

总结:如果脚本阻塞，请将它们放在页面底部。