javascript之loadasync 函数导入的外部脚本什么时候执行_编程设计

// Asynchronously load and execute a script from a specified URL 
function loadasync(url) { 
var head = document.getElementsByTagName("head")[0]; // Find document <head> 
var s = document.createElement("script"); // Create a <script> element 
s.src = url; // Set its src attribute 
head.appendChild(s); // Insert the <script> into head 
}

JavaScript:The Definite Guide 介绍了这样一个异步加载外部脚本的功能。但是我不知道导入的脚本何时执行。一旦加载它的脚本完成运行？或者，在 window 上的加载事件发生之后？
考虑到函数的用途或引入的原因，答案很可能不是第一种情况，以下测试用例演示:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <script type="text/javascript"> 
        (function loadasync(url) { 
            var head = document.getElementsByTagName("head")[0]; 
            var s = document.createElement("script"); 
            s.src = url; 
            head.appendChild(s); 
        }("external.js")); 
    </script> 
</head> 
<body> 
    <h1>This is a test page.</h1> 
</body> 
</html>

external.js中的内容:

alert("external script executed, dead loop"); 
while(true);

“h1”元素正常渲染，没有被外部脚本造成的死循环阻塞。这意味着导入的外部脚本会在稍后执行，而不是在加载它的脚本完成运行后立即执行。但具体是什么时候？

请您参考如下方法:

我相信它仍然在加载后立即执行，h1 是渲染是因为 js 文件仍然需要时间加载，而其他人可以完成渲染，我更改您的代码进行一些测试:

html部分:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8'> 
    <script type="text/javascript"> 
        (function loadasync(url) { 
            var head = document.getElementsByTagName("head")[0]; 
            var s = document.createElement("script"); 
            s.src = url; 
            head.appendChild(s); 
        }("./js/external.js")); 
        window.onload = function() { 
            alert("window loaded"); 
        }; 
    </script> 
</head> 
<body> 
    <h1>This is a test page.</h1> 
    <div id="test">See the page</div> 
</body> 
</html>

external.js 部分:

alert("external script executed, dead loop"); 
var ele = document.getElementById("test"); 
alert(ele.innerText);

在我的浏览器中，警报的顺序是外部脚本执行，死循环 => 查看页面 => 窗口加载。因此，当您执行脚本时，它会将 script 标记添加到头部并开始加载它，而页面的其他部分则继续渲染。

但是，当您添加需要加载的内容时，window.onload 将等待该脚本 加载完毕。

我们可以从警报序列中观察到脚本在加载后立即执行。