Два разных способа размещения script внизу - каковы различия?

Каковы различия между двумя решениями ниже? В частности, есть ли веская причина отдать предпочтение 2 над 1. (Примечание: пожалуйста, предположите, что имя загружаемого скрипта известно. Вопрос только в том, есть ли смысл в создании минимального скрипта для загрузки скрипта в заданном ситуация)

1 - Сценарий внизу

<html>
<body>
...
...
<script src='myScript.js'></script>
</body>
</html>

2 - скрипт внизу загружает внешний скрипт

<html>
<body>
...
...
<script>
    // minimal script to load another script
    var script = document.createElement('script');
    script.src = 'myScript.js'
    document.body.appendChild(script);
</script>
</body>
</html>

Ответ 1

1. Script внизу

Когда вы используете "синхронный" тег Script, он будет блокировать браузер от рендеринга страницы до тех пор, пока не будет загружен и не запущен Script. Этот метод имеет следующие эффекты:

Независимо от того, где вы помещаете тег Script, браузер не может запустить DOMContentLoaded, пока Script загружается и выполняется.
Размещение такого тега Script внизу только гарантирует, что браузеры отобрали все содержимое перед тем, как заблокировать его с помощью script.

2. Script внизу нагрузки внешние script

Когда вы вводите тег Script с помощью JavaScript, он создаст "асинхронный" тег Script, который не блокирует браузер. Этот метод имеет следующие эффекты:

Независимо от того, где вы помещаете код JavaScript, который генерирует тег Script, браузер выполняет его, как только он доступен, без блокировки страницы. DOMContentLoaded срабатывает, когда это необходимо; независимо от того, загрузил/выполнил Script.

Второй подход имеет следующие преимущества:

Script, который вводит тег Script, может быть размещен в любом месте, включая заголовок документа.
Script не будет блокировать рендеринг.
Событие DOMContentLoaded не ждет script.

Второй подход имеет следующие недостатки:

Вы не можете использовать document.write в таких скриптах. Если вы это сделаете, такие заявления могут очистить документ.
Асинхронное выполнение не означает, что браузер завершил разбор страницы. Сохраните Script, как только это будет доступно.
Порядок выполнения не гарантируется. Пример. Если вы загружаете "library.js" и "use-library.js" с помощью тегов Script, для "use-library.js" можно загружать и выполнять до "library.js".

Сказав все это, существует еще один способ загрузки скриптов с тремя вариантами:

<script src="myScript.js" async></script>
<script src="myScript.js" defer></script>
<script src="myScript.js" async defer></script>

Что касается работы Стива Соудерса: он предложил 6 методов для загрузки сценариев без блокировки. Атрибуты async и defer, представленные в HTML5, охватывают методы Script DOM Element и Script Defer, а их поддержка в браузере более чем достаточно для вас беспокоиться о других методах.

Ответ 2

Одна важная особенность второго заключается в том, что он позволяет браузеру сразу же разобрать страницу, не дожидаясь загрузки script. Это потому, что первый пример позволяет script использовать document.write для изменения состояния синтаксического анализа вокруг тега <script>, а второй - нет.

Теперь мы знаем, что это в нижней части страницы, так что нет никакого важного контента, оставшегося для синтаксического анализа, но это все еще важная разница. Это не до тех пор, пока не будет проведен синтаксический разбор, чтобы браузер запускал популярное событие DOMContentLoaded. В методе 1 событие срабатывает после загрузки и выполнения script. В методе 2 событие срабатывает до начала загрузки script.

Вот несколько примеров. В этих демонстрациях прослушиватель DOMContentLoaded меняет цвет фона на желтый. Мы пытаемся загрузить script, который занимает 3 секунды для загрузки.

(edit: Возможно, jsfiddle не был лучшим местом для размещения этих демонстраций. Он не показывает результат до загрузки медленной загрузки script. Обязательно нажмите "Запустить снова" после загрузки, чтобы узнать, что произойдет.)

Выберите подход, который наилучшим образом подходит для вашего приложения. Если вы знаете, что вам нужен script для запуска до DOMContentLoaded, перейдите к методу 1. В противном случае метод 2 в большинстве случаев довольно хорош.

Ответ 3

Эти два способа инициализации script в основном одинаковы, хотя нет смысла использовать второй способ, если вы можете напрямую вставить результат. Однако вы можете обернуть второй пример в методе $(document).ready(), например, что приведет к некоторому ленивому эффекту загрузки. Это в основном означает, что страница загрузится первой, и после завершения загрузки страницы она загрузит script. Или, конечно, вы можете создать метод, который инициализирует определенный script таким образом. Это полезно, если у вас большой script, который используется только в некоторых ситуациях. Это предотвратит его загрузку, если это вам не понадобится, что уменьшит общее время загрузки.

Ответ 4

Это не прямой ответ на ваш вопрос, но хорошо знать независимо.

Второй подход иногда используется в качестве резервной копии библиотеки.
Например, вы загружаете jQuery из CDN Google. Но, если это произойдет, по какой-либо причине, загрузите jQuery из собственной локальной копии.

Здесь, как рекомендует популярный Boilerplate HTML5:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>

Ответ 5

Первый метод означает, что тэг script жестко закодирован. Второй метод динамически добавляет тег script в нижней части страницы с использованием JavaScript. Преимущество второго метода заключается в том, что при необходимости можно добавить дополнительную логику для изменения тега script. Возможно, вам захочется загрузить другой файл script на основе культуры, браузера или другого фактора, который вы можете определить в JavaScript. Второй метод также приводит к загрузке файла JavaScript без блокировки загрузки остальной части веб-страницы. В методе 1 страница перестанет загружаться, когда она попадет в тег script, загрузит файл JavaScript, а затем закончит загрузку остальной части страницы. Поскольку этот тег находится внизу вашей страницы, это не делает слишком большой разницы.

Если вы создаете приложение для Windows Store с помощью JavaScript, рекомендуется использовать первый метод, так как это приложение позволит байт-коду кэшировать файл JavaScript, который ускорит его загрузку.