Асинхронная загрузка JS в голову

Question

Мне нужно асинхронно загрузить скрипт на страницу. Я использую метод createElement, чтобы динамически вставить тег сценария в голову. Сначала происходит загрузка исходного кода страницы. Когда это заканчивается, все элементы, включенные в головку, загружаются параллельно. Когда все это загружено, загружается скрипт, который я динамически добавляю.

Это логично, но я ищу способ ускорить загрузку моего динамического скрипта. Я все еще хочу, чтобы он был асинхронным (не хочу делать document.write), но все равно хотел бы, чтобы этот скрипт мог загружаться параллельно с другими скриптами элемента head. В любом случае, я могу заставить это работать

Спасибо

Answer 1

Поместите несколько строк javascript вверху, создав динамический тег сценария.

<script>
var script = document.createElement("script");
    script.src = "yourfile.js";
    script.async = true; //asynchronous
    document.getElementsByTagName("head")[0].appendChild(script);
</script>

Для других альтернатив проверьте эту ссылку: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

Answer 2

Вы можете добавить атрибут async к элементу script, если используете HTML5. Это самый простой способ, где бы вы ни загружали (но не самый совместимый). Просто для ясности, даже приведенный выше код будет работать, только если вы работаете с HTML5. Дело в том, что вам вообще не нужно проходить через все эти трудности при добавлении такого скрипта.

<script src="/path/to/your/js/here" async></script>

Также обратите внимание, что XHTML не позволяет минимизировать атрибуты, поэтому в XHTML вы должны использовать

<script src="/path/to/your/js/here" async="async"></script>

Кроме того, у вас есть атрибут defer, который откладывает синтаксический анализ javascript до загрузки документа, который также можно использовать как defer="defer", так же, как я показал пример включения сценария с использованием async. Теги async и defer могут использоваться в одном и том же элементе скрипта.

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

Надеюсь, это поможет! :)