JavaScript во внешнем файле выполняется до события onload тега script

Question

JavaScript во внешнем файле выполняется до события onload тега script

1

Я читал, что defer не обязательно задержать загрузку внешнего сценария, но он будет отложить выполнение сценария до после того, как HTML был проанализирован.

В качестве эксперимента я добавляю строку в конец файла, содержащего jQuery, который испускает событие, когда выполнение доходит до конца JavaScript:

window.dispatchEvent(new Event('jQuery-executed'));

Я включаю файл jQuery на моей тестовой странице с атрибутом defer:

<script src="jquery-3.2.1.js" defer onload="console.log('jQuery loaded', Date.now());"></script>
<script>
    window.addEventListener('DOMContentLoaded', function(){
        console.log('DOMREADY', Date.now());
    });

    window.addEventListener('jQuery-executed', function(){
        console.log('jQuery executed', Date.now());
    });
</script>

У меня есть обработчик onload в теге скрипта, чтобы сообщить мне, когда файл был загружен, а другие функции выводят консольные журналы в DOMContentLoaded и когда выполняется jQuery.

Почему, когда я просматриваю эту страницу, я получаю это?

Неужели все должно происходить в другом порядке? Не следует ли jQuery выполнять только после того, как загруженный файл загружен? И почему это выполняется перед DOMContentLoaded?

And Finally 27 июль 2017, в 15:16

Источник

1

Проверьте спецификацию W3C HTML5. Событие load запускается после запуска содержимого скрипта, а не до.
Pointy 27 июль 2017, в 13:22
0

Также имеет смысл для DOMContentLoaded ждать загрузки сценариев, поскольку код в обработчике должен должным образом ожидать присутствия всех сценариев.
Pointy 27 июль 2017, в 13:24
0

defer "... выполняется после анализа документа, но до запуска DOMContentLoaded."
E. Sundin 27 июль 2017, в 13:25
0

Ааа, спасибо, ребята, это все проясняет. Вы хотите опубликовать ответ @Pointy? В случае, если у кого-то еще возникнут проблемы с византийским языком спецификации W3C, похоже, что часть, о которой говорит Pointy, это html.spec.whatwg.org/multipage/scripting.html#script , где « запускает событие с именем load в скрипте Элемент "идет после" Запустить классический сценарий, заданный сценарием сценария. "
And Finally 27 июль 2017, в 13:38
0

Интересно, что когда я использую async вместо defer, я получаю журналы в порядке DOMREADY, jQuery выполняется, jQuery загружается. Таким образом, async, кажется, удаляет скрипт из последовательности DOMContentLoaded.
And Finally 27 июль 2017, в 13:46

Показать ещё 3 комментария

Теги:

javascript

javascript-events

event-handling

events

loading

1 ответ

Ещё вопросы

Проверьте спецификацию W3C HTML5. Событие load запускается после запуска содержимого скрипта, а не до.
Также имеет смысл для DOMContentLoaded ждать загрузки сценариев, поскольку код в обработчике должен должным образом ожидать присутствия всех сценариев.
defer "... выполняется после анализа документа, но до запуска DOMContentLoaded."
Ааа, спасибо, ребята, это все проясняет. Вы хотите опубликовать ответ @Pointy? В случае, если у кого-то еще возникнут проблемы с византийским языком спецификации W3C, похоже, что часть, о которой говорит Pointy, это html.spec.whatwg.org/multipage/scripting.html#script , где « запускает событие с именем load в скрипте Элемент "идет после" Запустить классический сценарий, заданный сценарием сценария. "
Интересно, что когда я использую async вместо defer, я получаю журналы в порядке DOMREADY, jQuery выполняется, jQuery загружается. Таким образом, async, кажется, удаляет скрипт из последовательности DOMContentLoaded.

Pointy · Accepted Answer · 2017-07-27T10-44-00.000Z

Спецификация HTML5 является странной и трудно читаемой, но она говорит, что отложенный контент сценария должен быть оценен до того, как будет запущено событие "load". Если вы думаете об этом, это действительно хорошо: если у вас есть код, ожидающий загрузки скрипта, возможно, потому, что вы хотите использовать какой-то код, предоставленный сценарием. Если событие "load" было запущено до запуска скрипта, было бы бесполезно иметь обработчик "load".

То же самое касается "DOMContentReady": код, ожидающий, что это событие будет правильно срабатывать, ожидает, что все содержимое скрипта, импортированное этой страницей, будет доступно для использования.

Хорошее объяснение, спасибо Пойнти. Этот порядок событий действительно очень полезен для меня: он дает мне уверенность, что JS в файле доступен.