document.createElement（'script'）vs< script src =""> [英] document.createElement('script') vs <script src="">

问题描述

为什么像Google和Facebook这样的服务使用 document.createElement（'script'）而不是< script>

Google Analytics代码片段：

 < ; 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.jstype =text / javascript>< / script> 
  

以及Facebook的按钮：

<$ p $ （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> 
  

我知道这里有一些安全的玩法，但除此之外，我不明白为什么我们不应该't使用HTML5的吗？

解决方案

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

---

< script src = ...> 标记阻止浏览器显示页面的其余部分，直到脚本加载并执行。这可以确保脚本以正确的顺序执行，并且该脚本中的任何 document.write（）都按预期工作。然而，这为用户创造了一种滞后的浏览体验。

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

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

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

async 属性是在HTML5中引入的，而 推迟 属性作为旧版IE的后备。 本文档描述async和defer属性如何工作。
$ b 或者，可以使用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标记。

Why is it that services like Google and Facebook use document.createElement('script') instead of just <script>?

The Google Analytics snippet:

<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>

could be written as just:

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

and Facebook's like button:

<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>

could be simplified as just:

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

I know there's some playing safe in them, but other than that I don't see why we shouldn't use the HTML5 ones?

解决方案

The <script src=...> blocks the browser while document.createElement('script') loads the JavaScript asynchronously; this is the primary reason.

---

The <script src=...> tag blocks browser from displaying rest of the page until the script is loaded and executed. This ensures that scripts are executed in correct order and any document.write() in that script work as expected. However this creates a laggy browsing experience for the user.

When the script is loaded asynchronously, the browser can download the script without blocking the page display. This improves the browsing experience dramatically.

To load the scripts asynchronously one can use HTML markup:

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

The async attribute was introduced in HTML5 while the defer attribute can be added as a fallback for older versions of IE. This document describes how async and defer attribute work.

Alternately, one can use JavaScript to build a script tag:

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

JavaScript generated script tags work in most browsers even if they do not understand the async attribute or .async = true property.

---

About schemeless URIs (//example.com/script.js): schemeless URIs seem to work almost everywhere (see this question).

About the Google Analytics example: both old and new code use JavaScript to detect the protocol then load http://www. or https://ssl. which is not possible via HTML markup.

这篇关于document.createElement（'script'）vs&lt; script src =&quot;&quot;&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！