document.createElement('script') vs <script src=&

document.createElement('script') vs <script src="">

本文关键字：script lt src vs document createElement      更新时间：2023-09-26

为什么像谷歌和Facebook这样的服务使用document.createElement('script')而不仅仅是<script>？

谷歌分析片段：

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

可以写成：

<script src="//www.google-analytics.com/ga.js" type="text/javascript"></script>

和Facebook的"喜欢"按钮：

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

可以简化为：

<script src="//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxx"></script>

我知道它们有一些安全的东西，但除此之外，我不明白为什么我们不应该使用 HTML5 的？

<script src=...>阻止浏览器，而document.createElement('script')异步加载JavaScript;这是主要原因。

<script src=...>标记阻止浏览器显示页面的其余部分，直到加载和执行脚本。这可确保脚本以正确的顺序执行，并且该脚本中的任何document.write()都按预期工作。但是，这会给用户带来滞后的浏览体验。

异步加载脚本时，浏览器可以下载脚本而不会阻塞页面显示。这极大地改善了浏览体验。

要异步加载脚本，可以使用 HTML 标记：

<script src="..." async defer></script>

async属性是在HTML5中引入的，而defer属性可以作为旧版本的IE的后备添加。本文档介绍异步和延迟属性的工作原理。

或者，可以使用JavaScript来构建脚本标签：

var s = document.createElement('script');
s.src = "...";
document.getElementsByTagName("head")[0].appendChild(s);

JavaScript 生成的脚本标记在大多数浏览器中都可以使用，即使它们不理解 async 属性或 .async = true 属性。

关于无方案 URI（//example.com/script.js）：无方案 URI 似乎几乎在任何地方都可以工作（请参阅此问题）。

关于Google Analytics示例：新旧代码都使用JavaScript来检测协议，然后加载http://www.或https://ssl.，这不可能通过HTML标记实现。

除了Salman A关于延迟加载的优秀观点之外，当静态解决方案不起作用时，还会使用这种技术。

  • 我已经看到它在缓存是一个问题时使用（一个基于时间的唯一哈希被添加到 URL）
  • 在上面显示的谷歌链接的情况下，SSL可以动态打开。
  • 在 facebook 代码中，它会检查脚本是否已经存在（这可以避免同一脚本加载两次的错误）。

也可能有其他原因。 所有这些都与需要动态解决方案有关。

是的，可以用脚本标签编写，但您引用的示例是网站为用户提供一些代码块的示例，他们需要在他们的网站
中复制粘贴所以注射更好，因为这样网站就像谷歌和脸书

1.as 您可以在Googles示例中看到它已动态检测http或https

2.通过这种方式，网站可以检查是否存在相同的脚本，然后选择不再下载它，就像在Facebook示例中

所做的那样3. 更好地控制注射的内容。由于正在注入的脚本可以动态更改，而无需用户更改正在注入的脚本的URL，这是必要的，因为许多浏览器只是将脚本保存在缓存

中4.通过这种方式，这些网站可以保持代码的排序，不易受到用户干扰

相关文章：