javascript - 动态注入 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. Pro - 最短，无需遍历
  2. Con - 如果不从直接子级执行 IE7 中的“操作中止”错误body

• 钩到documentElement

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

  1. Pro - 永远存在，最少的遍历
  2. 骗局——或者是吗？（如果第一个孩子是评论则失败）

• 挂钩到第一个脚本

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

  1. Pro - 很可能总是从脚本调用您的动态负载
  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 及以下）一起使用，将其附加到头部是异步加载它的唯一方法

更多关于它