Спецификации говорят, что они будут загружены по порядку, но загруженный означает, что загрузка не выполнена, поэтому, если файл завершает загрузку раньше, чем другой, он будет запущен первым, поэтому я бы не рекомендовал вам зависеть от порядка выполнения с использованием атрибутов defer или async.

я следую рекомендации Google PageSpeed, чтобы отложить более сложные сценарии. Допустим, это код в моем<head>:

<script src="/js/jquery.js"></script>
<script src="/js/functions.js"></script>

functions.js Сценарий зависит от JQuery, поэтому важно, чтобыjquery.js загружается и выполняется доfunctions.js.

Что я пробовал:

откладывать

<script src="/js/jquery.js" defer></script>
<script src="/js/functions.js" defer></script>

Пока это работает иfunctions.js выполняется правильно, когда я загружаю страницу, я вижу ее мерцание, как будто CSS еще не загружен. Обратите внимание, что приведенный выше код находится в<head>, Если я удалюdefer атрибут изjquery.jsМерцание исчезает. Это приводит меня к моему вопросу:

смешанный

<script src="/js/jquery.js" async></script>
<script src="/js/functions.js" defer></script>

Использует лиasync на сценарии зависимости иdefer на зависимом скрипте убедиться, что они всегда будут выполняться в таком порядке? Кажется, это работает в моих тестах, но я не знаю достаточно о том, как работает парсер, чтобы быть уверенным.

Ответы на вопрос(3)

как современные браузеры реализуют стандарт, существуют минимальные гарантии порядка выполнения скриптов (классические элементы скрипта без type = "module") и модулей (скриптовые элементы с type = module).

1) Классические сценарии, в которых не указана отсрочка или асинхронность, выполняются в порядке их появления в HTML-документе (при разборе документа). Они выполняются перед классическими скриптами с задержкой и модулями, которые не являются асинхронными.

2) классические сценарии, которые являются отложенными, и модули, которые не являются асинхронными, выполняются в том порядке, в котором они появляются в html-документе (после анализа документа).

Смотрите пункт 20 на модели обработки здесь:https://www.w3.org/TR/html5/semantics-scripting.html#script-processing-model

Решение Вопроса

что вы теряете гарантии на выполнение скриптов заказа, если вы используетеasync или жеdefer.

async Сценарии выполняются асинхронно, нет никаких гарантий относительно того, в каком порядке.defer Сценарии выполняются после анализа документа, но нет никаких гарантий относительно того, будут ли они выполняться по порядку. (Посмотри наэтот вопрос оdefer скрипты в частности.)

К сожалению, в вашем случае вы должны запуститьjquery.js синхронно, удаливdefer а такжеasync атрибутов.

Заглядывая вперед, по мере того, как мы переходим к модулям, гораздо проще будет указать зависимости и загрузить их вовремя (и только один раз).

 Johny P.13 нояб. 2018 г., 16:29
Я еще не изучал модули. Возможно, в моем следующем проекте я проверю, что говорит стандарт ECMAScript.
 CertainPerformance28 февр. 2019 г., 03:28
Там нет необходимостиблок с синхронным скриптом, если не хотите - загружайте скрипт сasync или жеdeferпослушайload событие, и как только это срабатывает, создайте другое<script> это зависит от предыдущего и так далее.

Спецификации говорят, что они будут загружены по порядку, но загруженный означает, что загрузка не выполнена, поэтому, если файл завершает загрузку раньше, чем другой, он будет запущен первым, поэтому я бы не рекомендовал вам зависеть от порядка выполнения с использованием атрибутов defer или async.

Ваш ответ на вопрос