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

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

在第二种情况(您的谷歌内容)中，动态创建脚本元素并异步加载文件。

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

有关异步的更多信息:

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

有关“阻止”脚本影响的更多信息:

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

摘要:如果脚本阻塞，请将其放在页面底部。