Почему не работает defer?

Question

[Extramezz]

На странице подключается async.js:

<script type="text/javascript" src="async.js" async></script>

Содержимое async.js:

var script = document.createElement("script");

script.src = "defer.js";
script.defer = true;
script.type = "text/javascript";

document.head.appendChild(script);

Но defer.js выполняется не после загрузки страницы, а так, будто бы имеет атрибут async, за место defer. (Если открыть отладчик, то там DOM-узел будет без async, а именно с defer).

Почему?

Answer 1

[Алексей Уколов]

Для продвинутого читателя, который знает, что теги <script> можно добавлять на страницу в любой момент при помощи самого javascript, заметим, что скрипты, добавленные таким образом, ведут себя так же, как async. То есть, выполняются как только загрузятся, без сохранения относительного порядка.

Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполнятся строго один за другим, то используется свойство script.async = false.

https://learn.javascript.ru/external-script#асинхр...

Comments

[Extramezz]

Проверил в Firefox - скрипт все равно загружается как async

[Алексей Уколов]

Давайте разберёмся с задачей и вашим пониманием работы async и defer. Создайте демо на jsfiddle с описанием ожидаемого поведения и чем оно отличается от реального.

[Extramezz]

Алексей Уколов: демо создать будет проблематично...

Я вам так объясню: мне нужно, чтобы скрипт с .defer = true; выполнялся после загрузки страницы, а загружался, как это положено для defer, асинхронно (https://webref.ru/html/script/defer)

[Extramezz]

Алексей Уколов:
>вашим пониманием работы async и defer.

async загружает скрипт, не останавливая парсинг страницы, и выполняет его сразу, как он скачается
defer загружает скрипт, не останавливая парсинг страницы, но откладывает его выполнение до момента полной загрузки html (перед onDOMContentLoaded).

[Алексей Уколов]

Судя по описанию, которое я привёл в ответе, добиться такого поведения для генерируемых скриптов невозможно. Единственное, что можно сделать - это сохранить порядок загрузки, если он важен.
Чтобы отложить выполнение скрипта, похоже, нужно загружать его по событию DOMContentLoaded. Это не идеально с точки зрения скорости инициализации страницы, зато можно гарантировать, что скрипт не повлияет на скорость загрузки страницы.