HTML中两种JS实现之间的差异

Differences between two kinds of JS implementation in HTML

本文关键字：之间 实现 两种 JS HTML      更新时间：2023-09-26

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

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

  2. 正如谷歌分析程序所做的那样：

      (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脚本的连接是否存在一些差异？

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

在第二种情况下（您的谷歌内容），将动态创建一个脚本元素，并异步加载该文件。

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

关于async:的更多信息

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

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

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

摘要：如果脚本被阻塞，就把它们放在页面的底部。

一般来说，没有。

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

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

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

…同样的效果。

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

相关文章：