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

Question

在几乎所有我通过javascript动态注入脚本的例子中,它以:

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

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

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

我的问题是:为什么不将它附加到文件正文？

document.body.appendChild(theNewScriptTag);

在我看来,DOM遍历涉及getElementsByTagName- 甚至整个"insertAfter = parent.insertBefore"技巧 - 浪费资源.

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

Answer 1

说真的,为什么我搜索时没出现？ document.head,document.body附加脚本

评论链接到一个完美的解释:添加脚本元素的荒谬案例.

基本上,您有几种选择:

• 钩到头

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

  1. 亲 - 大多数页面都有头脑
  2. Con - 如果没有,则不会自动生成; 遍历

• 钩到身体

  document.body.appendChild(js);
  

  1. 亲 - 最短,没有遍历
  2. Con - 如果没有从直接子节点执行,IE7中的"操作中止"错误body

• 挂钩 documentElement

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

  1. 专业 - 始终存在,最小的遍历
  2. 康 - 或者是吗？(如果第一个孩子是评论,则失败)

• 钩到第一个脚本

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

  1. Pro - 很可能总是从脚本调用动态加载
  2. 如果不存在先前的脚本,则Con将失败; 遍历

所以,结论是 - 你可以做任何事情,但你必须考虑你的观众.如果您可以控制加载程序的执行位置,则可以使用document.body.如果您的加载程序是其他人使用的库的一部分,则必须根据您使用的方法提供具体说明,并为滥用您的规范的人做好准备.