Question

我知道JS是单线程并同步执行的。因此，当我向浏览器头标记添加文件时，文件会在遇到时立即执行。然后它转到下一个脚本标签＆amp;执行该文件。我的问题是当我动态地将js文件添加到HTML头标记时。浏览器如何执行该文件？就像在当前执行的任何地方加载文件一样执行文件。或者我们可以控制该文件的执行方式吗？

Answer 1

加载脚本后，将尽快执行。也就是说，如果正在执行某些其他javascript函数，比如clickhandler或其他任何东西，它将被允许首先完成 - 但这是给定的，因为正如您所说，在浏览器中JavaScript通常在单个线程中执行。

您无法控制脚本加载的那一部分，但您可以使用此模式 - 受JSONP的启发：

插入脚本：

(function () {
    var module = {
        init: function () {
            /* ... */
        }
    }

    ready(module);  // hook into "parent script"
}());

主页上的

脚本：

function ready(o) {
    // call init in loaded whenever you are ready for it...
    setTimeout(function () { o.init(); }, 1000);
}

这里的关键是在页面上定义的ready函数，并从您以动态方式插入的脚本调用。脚本只会告诉父页面它已被加载，而不是立即开始行动，然后父页面可以在想要执行开始时回调到插入的脚本init函数。

Answer 2

动态加载JavaScript文件时会发生什么（非常简化，没有检查）：

文件已加载;
如果有功能调用，例如doSomething()或(function(){...})()，代码已执行（当然您必须具有定义）;
如果只有函数定义，则在函数调用之前不会发生任何事情。

见example：加载3个文件，2个立即执行，1个等待超时。

编辑：

脚本标记可以放在页面的任何位置。实际上，如果不使用onload事件（^{yahoo speed tips}），最好放在页面的末尾。

使用HTML5 JavaScript有网络工作者^MDN ^MSDN ^wikipedia。

Answer 3

考虑一种方法是

var js=document.createElement('script')
js.setAttribute("type","text/javascript")
js.setAttribute("src", filename)
document.getElementsByTagName("head")[0].appendChild(js); 
// ^ However this technique has been pointed to be not so trusworthy (Read the link in the comment by Pomeh)

但回答你的问题

浏览器如何执行该文件？

将脚本添加到DOM

是否只要在当前执行的地方加载文件就会执行文件？

是

或者我们可以控制该文件的执行方式吗？

如果你附加一个onload事件处理程序，而不是一个讨厌的技巧，它会更好。

Answer 4

以下是一些可以尝试回答问题的代码。

<script>
var s = document.createElement('script'), f = 1;
s.src="http://code.jquery.com/jquery-1.7.2.js";
document.head.appendChild(s)
s.onload = function(){
  console.log(2);
  f = 0    
}
while(f){
    console.log(1);
}
</script>

此代码理想情况下应在脚本加载时打印2，但如果您注意到，则永远不会发生

注意：这会杀死你的浏览器！

执行动态加载的JS文件

4 个答案: