动态注入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);

在我看来，涉及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. 专业 - 大多数网页都有头
  2. Con - 如果没有，则不会自动生成;遍历

• 挂钩身体

  document.body.appendChild(js);
  

  1. 专业 - 最短，无遍历
  2. Con - 如果未从body
  的直接子项执行，则IE7中的“操作已中止”错误

• 挂钩documentElement

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

  1. Pro - 始终存在，最小遍历
  2. Con - or does it?（如果第一个孩子是评论，则会失败）

• 挂钩到第一个脚本

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

  1. 专家 - 很可能始终从脚本调用动态加载
  2. Con - 如果之前没有脚本，则会失败;遍历

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

Answer 2

我相信你总是可以使用document.write(...)这对任何元素都没有依赖性，或者被其他脚本操纵过。

类似的东西：

document.write(unescape("%3Cscript src='my_file.js' type='text/javascript'%3E%3C/script%3E'")); 

Answer 3

您可以在页面底部添加脚本。

使用insertBefore将它添加到头部的优点是使其异步加载。是的新浏览器现在支持async属性，但是与旧版浏览器（IE8及以下版本）一起使用，将其附加到头部是唯一的异步加载方式

More on it