Когда выполняется внешний скрипт, импортированный функцией 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: Определенное руководство представляет такую функцию, которая асинхронно загружает внешние скрипты. Но я не знаю, когда скрипт импортируется. Как только скрипт, который загружает его, заканчивается? Или, после того, как произойдет событие загрузки на окне?
Учитывая назначение функции или причины, почему она вводится, то ответ скорее всего, не первый случай, и следующий тест демонстрирует:Когда выполняется внешний скрипт, импортированный функцией loadasync?

<!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», как правило, не блокируется мертвой петлей, вызванной внешним скриптом. Это означает, что импортированный внешний скрипт выполняется в более позднее время, а не сразу после запуска скрипта, который загружает его. Но когда именно?

источник

2015-07-03 Zhengquan Bai

Думаю, вы можете найти свой ответ здесь: https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/. Также я считаю, что это зависит от того, как ваш браузер решает его обработать. – Jerska

Внешний скрипт запускается, как только он загружается. Он не ждет 'window.onload' или любого другого события. –

Но загрузка этого скрипта может произойти после 'window.onload', у вас нет гарантии на этот. – Jerska

Я считаю, что по-прежнему выполняет сразу после нагрузок, 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);

В моей Broswer, последовательность настороже является external script executed, dead loop =>See the page =>window loaded. Итак, когда вы выполняете скрипт, он добавляет тег script в начало и начинает его загружать, а другие части страницы сохраняют рендеринг.

Однако, поскольку вы добавляете что-то, что необходимо загрузить, window.onload будет ждать, пока загрузится script.

И мы можем наблюдать из последовательности предупреждений, что скрипты выполняются непосредственно после его загрузки.

источник

2015-07-03 09:53:55 fuyushimoya

Да, я пробовал ваш код, и он предупреждает о такой же последовательности. Более того, я нахожу, что введенный скрипт начинает выполняться только после того, как все скрипты в теге

Когда выполняется внешний скрипт, импортированный функцией loadasync?

ответ

Смежные вопросы