Question

// 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：明确指南引入了一种异步加载外部脚本的功能。但我不知道导入的脚本何时执行。一旦加载它的脚本完成运行？或者，窗口上的加载事件发生后？
考虑到函数的目的或其引入的原因，答案可能不是第一种情况，并且以下测试用例证明：

<!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”元素通常呈现而不会被外部脚本导致的死循环阻塞。这意味着导入的外部脚本稍后执行，而不是在加载它的脚本完成运行后立即执行。但到底是什么时候？

Answer 1

我相信它在加载后仍然执行，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 part：

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

在我的broswer中，警报的序列是external script executed, dead loop =＆gt; See the page =＆gt; window loaded。因此，当您执行脚本时，它会将script标记添加到head并开始加载它，而页面的其他部分将继续呈现。

但是，当您添加需要加载的内容时，window.onload会等到加载script。

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

loadasync函数导入的外部脚本何时执行？

1 个答案: