JavaScript async & defer: асинхронный запуск сценария
Насколько мне известно, в элементе script атрибут async позволяет скрипту загружать асинхронно (аналогично изображениям), в то время как defer заставляет скрипт ждать до конца перед выполнением.
Предположим, у меня есть два сценария, которые нужно включить:
<script src = "library.js"></script>
<script src = "process.js"></script>
Я бы хотел, чтобы они оба работали асинхронно, и я бы хотел, чтобы process.js дождался конца, чтобы начать обработку.
Есть ли способ получить сценарий library.js для запустить асинхронно?
Примечание
Я вижу, что существует некоторое несоответствие между различными онлайн-ресурсами относительно фактической роли атрибута async.
MDN и WhatWG предполагают, что это означает, что сценарий должен выполнять асинхронно. Другие онлайн-ресурсы предлагают асинхронно нагрузка, но по-прежнему блокирует рендеринг при его выполнении.
@CertainPerformance Хороший момент. Да, я ожидал, что process.js будет иметь доступ к библиотеке.
@Phil Я просмотрел эту ссылку и обычно считаю MDN авторитетным. Однако другие сайты, на которые я смотрел, определенно предполагают, что async относится к сценарию загрузка.
Согласен, поэтому и удалил комментарий :)
@Фил. Жалость. Я вижу, что стандарт whatwg.org также относится к сценарию выполнение… это немного сбивает с толку.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
И defer, и async влияют на выполнение сценария, а не на загрузку сценария. Я думаю, что путаница возникает из-за того, что некоторая документация немного неаккуратна с терминами, а термин загружен неясен относительно того, относится ли он к выборке ресурса или его выполнению.
Чтобы заставить library.js работать асинхронно, не дожидаясь загрузки документа, используйте атрибут async, а чтобы process.js ждал, пока документ не будет проанализирован, используйте defer:
<script src = "library.js" async></script>
<script src = "process.js" defer></script>
Обратите внимание, что library.js не гарантированно запускается до process.js, хотя, вероятно, будет.
Я ознакомился со спецификациями WhatWG и поднял вопрос о двусмысленности. Похоже, что asyncгрузы скрипт асинхронно, но по-прежнему выполняет синхронно.
Я нашел Последовательная загрузка скрипта в JavaScript, который может вам помочь:
(function(){
//three JS files that need to be loaded one after the other
var libs = [
'https://code.jquery.com/jquery-3.1.1.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/underscore.string/3.3.4/underscore.string.js'
];
var injectLibFromStack = function(){
if (libs.length > 0){
//grab the next item on the stack
var nextLib = libs.shift();
var headTag = document.getElementsByTagName('head')[0];
//create a script tag with this library
var scriptTag = document.createElement('script');
scriptTag.src = nextLib;
//when successful, inject the next script
scriptTag.onload = function(e){
console.info("---> loaded: " + e.target.src);
injectLibFromStack();
};
//append the script tag to the <head></head>
headTag.appendChild(scriptTag);
console.info("injecting: " + nextLib);
}
else return;
}
//start script injection
injectLibFromStack();
})();Итак, ключ в том, что событие load запускается элементом <script>, когда все синхронные действия сценария завершены, круто
Не совсем. Вопрос был по атрибутам async и defer. MDN утверждает, что скрипты, вставленные с использованием document.createElement, как в примере выше, по умолчанию выполняются асинхронно.
Итак, вы хотите, чтобы
library.jsзавершил работу до запускаprocess.js?