javascript - 动态注入(inject) javascript 文件 - 为什么大多数示例附加到头部？

Question

在我遇到的使用 javascript 动态注入(inject)脚本的几乎每个示例中，它都以:

document.getElementsByTagName("head")[0].appendChild(theNewScriptTag)

甚至yepnope.js在页面中的第一个脚本之前附加新脚本，例如:

var firstScript = doc.getElementsByTagName( "script" )[ 0 ];
firstScript.parentNode.insertBefore( theNewScriptTag, firstScript );

我的问题是:为什么不直接将它附加到文档正文中呢？

document.body.appendChild(theNewScriptTag);

在我看来，涉及 getElementsByTagName 的 DOM 遍历——甚至整个“insertAfter = parent.insertBefore”技巧——都是在浪费资源。

将脚本动态添加到最底部是否有损害？

Answer 1

说真的，为什么我搜索的时候没有出现这个？ document.head, document.body to attach scripts

完美解释的评论链接:The ridiculous case of adding a script element .

基本上，您有多种选择:

• 勾到头

  document.getElementsByTagName('head')[0].appendChild(js)
  

  1. Pro - 大多数页面都有标题
  2. Con - 如果不是，并不总是自动生成；遍历

• 卡在身上

  document.body.appendChild(js);
  

  1. Pro - 最短，无遍历
  2. Con - 如果不是从 body 的直接子级执行，IE7 中会出现“操作中止”错误

• Hook 到 documentElement

  var html = document.documentElement;
  html.insertBefore(js, html.firstChild);
  

  1. Pro - 始终存在，最小遍历
  2. 反对 - or does it? (如果第一个 child 是评论则失败)

• Hook 第一个脚本

  var first = document.getElementsByTagName('script')[0];
  first.parentNode.insertBefore(js, first);
  

  1. Pro - 很可能总是从脚本调用动态负载
  2. Con - 如果之前的脚本不存在，将会失败；遍历

因此，结论是——您可以采用任何方式，但您必须考虑到您的观众。如果您可以控制加载程序的执行位置，则可以使用 document.body。如果您的加载程序是其他人使用的库的一部分，您将必须根据您使用的方法给出具体说明，并为滥用您的规范的人做好准备。