When is the external script imported by the loadasync function executed?
// 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: A specific manual introduces a function that loads external scripts asynchronously. But I have no idea when the import script is being executed. As soon as his script is loaded, does it end? Or, after the load event occurs on the window?
Given the purpose of the function or the reason for introducing it, the answer is probably not the first time, and the following test case demonstrates:
<!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>
Content in external.js file:
alert("external script executed, dead loop");
while(true);
The "h1" element is usually rendered without a deadloop blocking caused by an external script. This means that the imported external script is executed later and not immediately after the script is loaded, which ends. But when exactly?
source to share
I believe it still gets executed right after loading, the h1 render is because the file js
still takes a while to load, while others might finish rendering, I change your codes to do some tests:
html part:
<!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>
part of external.js:
alert("external script executed, dead loop");
var ele = document.getElementById("test");
alert(ele.innerText);
In my browser, the sequence of warnings is external script executed, dead loop
=> See the page
=> window loaded
. So when you execute your script, it adds a tag script
to the head and starts loading it, while other parts of the page keep rendering.
However, when you add something to download, it window.onload
will wait for the download script
.
And we can observe from the sequence of warnings that the scripts are executed immediately after loading.
source to share