IE9 注入脚本标签的执行顺序是否有已知的解决方法？答案

【问题标题】：Is there a known workaround for IE9's execution order of injected script tags?IE9 注入脚本标签的执行顺序是否有已知的解决方法？
【发布时间】：2011-10-30 20:59:45
【问题描述】：

我确定我没有完全理解这个问题，但似乎我们在我的项目中看到了 IE9 上的奇怪行为，这在某种程度上与 JavaScript 的无序执行有关通过调用document.write 注入，例如：

document.write('<scr'+'ipt type="text/javascript" src="'+file1+'"></src'+'ipt>');
document.write('<scr'+'ipt type="text/javascript" src="'+file2+'"></src'+'ipt>');
document.write('<scr'+'ipt type="text/javascript" src="'+file3+'"></src'+'ipt>');

我有限的 Google 研究表明，IE9 将以不同于其他浏览器（特别是 Firefox 和 Chrome）的顺序执行以这种方式注入的脚本。有没有更好的方法来实现我们在这里的目标，这将确保所有浏览器的执行顺序相同？

我收回这一点：我们并不真正关心所有浏览器，只关心 Chrome 和 IE9。

【问题讨论】：

（大声思考）：不知道在IE9中用document.write()将脚本插入DOM是非阻塞操作吗？
（也大声思考）：是否可以为每个注入的标签添加defer 属性？我不知道它会产生什么影响（如果有的话），但是如果脚本当前正在按照它们完成下载的顺序（即最小/最快的主机首先）而不是它们被声明的顺序进行评估，添加@987654325 @ 可能会迫使他们堆叠。也许吧。
我敢肯定。它是一种被广泛接受的非阻塞 JavaScript 调用解决方案。
@Flambino：我对defer 属性了解不多，但实际上我确实尝试过，但似乎并没有解决问题。

标签： javascript internet-explorer google-chrome labjs javascript-injection

【解决方案1】：

所以这样写脚本标签的好处是他们are loaded asynchronously。我不知道浏览器的细微差别究竟是如何完成的，但我原以为它们会在下载时执行，没有特定的顺序。类似于HTML5 async attribute的行为。

还有另一个HTML5 attribute defer，它使脚本按顺序执行，但以非阻塞方式。您可以尝试将其添加到生成的 <script> 标签中。 IE9partially honours it.

【讨论】：

关于async和defer的更好资源：w3.org/TR/html5/scripting-1.html
document.write 是同步的，而不是异步的。
document.write 是同步的。写入文档的<script> 标记（使用document.write 或其他方法）将导致源JavaScript 文件被异步加载。 friendlybit.com/js/lazy-loading-asyncronous-javascript
不，使用document.write 编写的脚本仍然是同步的。为什么函数的执行方式会有所不同，因为指定了脚本而不是明文？此外，在那篇文章中甚至没有提到document.write（除了在 cmets 中微弱的提及）。考虑这个演示：jsbin.com/opetat/edit#source

【解决方案2】：

我想你可以链接一个的 onload 事件来启动另一个的加载：

var newJS= document.createElement('script');
newJS.onload=function() {alert("done")} //or call next load function
newJS.src="..."
document.body.appendChild(newJS)

【讨论】：

那将是“javascript方式”:)

【解决方案3】：

使用脚本加载器（就像我写的那样：LABjs），它将规范化跨各种浏览器加载的所有不同怪癖。还有好处：它不使用那个可怕的 document.write()。 LABjs 将允许您异步（并行）加载所有脚本，但要确保它们以正确的顺序执行。听起来基本上正是您想要的。

【讨论】：

【解决方案4】：

我做了一个小脚本，就是为了这个目的：

https://github.com/mudroljub/js-async-loader

简而言之，它会异步加载所有脚本，然后执行它们。它看起来像这样：

for (var lib in libs) {
    loadAsync(lib);
}

你不需要document.write();

【讨论】：