Неблокирующие скрипты Javascript, почему бы просто не поместить все скрипты перед тегом</body>?

Чтобы избежать javascript, чтобы блокировать показ веб-страницы, не можем ли мы просто поместить все наши файлы/код JS для загрузки/выполнения просто перед закрывающим тегом </body>?

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

document.getElementsByTagName("head")[0].appendChild(script);

чтобы отложить script laod, пока веб-страницу не будет отображаться, что приведет к быстрой скорости рендеринга веб-страницы.

Но без использования этого типа неблокирующей техники (или других аналогичных методов), не удалось бы нам добиться того же неблокирующего результата, просто разместив все наши JS файлы (чтобы быть загруженными/выполняется) перед закрывающим тегом </body>?

Я еще больше удивлен, потому что автор (в той же статье) предлагает поместить свой код перед закрывающим тегом </body> (см. раздел "Script размещение" статьи), поэтому он в основном загружает скрипты перед закрывающим тегом </body> в любом случае. Какая потребность в его коде?

Я смущен, любая помощь оценивается, спасибо!

ОБНОВЛЕНИЕ

FYI Google Analytics использует подобный неблокирующий метод для загрузки своего кода отслеживания:

<script type="text/javascript">
...
(function() 
{
   var ga = document.createElement('script');
   ga.type = 'text/javascript';
   ga.async = true;
   ga.src = 'your-script-name-here.js';
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(ga, s); //why do they insert it before the 1st script instead of appending to body/head could be the hint for another question.
})();
</script>
</head>

Ответ 1

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

Однако, если все, что вы хотите достичь, это скорость загрузки содержимого страницы, результат размещения тегов script непосредственно перед тегом </body> будет таким же, как при создании тегов script динамически. Самое существенное отличие заключается в том, что при загрузке сценариев общим статическим способом они выполняются один за другим, другими словами, параллельное выполнение файла script (в старых браузерах это же верно для загрузки script).

Ответ 2

Если вы хотите асинхронные скрипты. Используйте тег async (HTML5), если он доступен в браузере, в котором вы находитесь. Это то, что делает Google Analytics в коде, который вы опубликовали (в частности, строка ga.async = true MDN Link, прокрутите вниз для асинхронизации).

Однако это может привести к тому, что ваш script будет загружаться в произвольные моменты времени во время загрузки страницы, что может быть нежелательным. Перед выбором использования async стоит задать себе следующие вопросы.

Не нужно вводить пользовательские данные? Затем используйте атрибут async.

Нужно реагировать на кнопки или навигацию? Затем вам нужно поместить их вверху страницы (в голове) и не использовать тег async.

Асинхронные скрипты выполняются в любом порядке, поэтому, если ваш script зависит от (скажем) jQuery, а jQuery загружается в другой тег, ваш script может запускаться до того, как это делает jQuery script, что приводит к ошибкам.

Почему люди не помещают вещи в нижней части тега тела? Если script занимает достаточно времени, чтобы загрузить, что это замедляет/приостанавливает загрузку веб-сайта, это вполне возможно что script собирается приостановить/повесить веб-сайт после загрузки веб-сайта (ожидают различного поведения в разных браузерах) - сделать ваш сайт неприемлемым (нажмите кнопку, и ничего не произойдет). В большинстве случаев это не идеально, поэтому был изобретен асинхронный атрибут.

<ч/" > Альтернативно, если ваш script занимает много времени для загрузки - вы можете захотеть (после тестирования) минимизировать и конкатенировать свой script перед отправкой его на сервер.

Я рекомендую использовать require.js для минимизации и конкатенации, его легко запустить и использовать.

Minifying уменьшает объем данных, которые необходимо загрузить.

Конкатенация сокращает количество "круглых поездок" на сервер (для удаленного сервера с пингом 200 мс 5 запросов занимает 1 секунду).

Ответ 3

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

И insertBefore используется вместо append, потому что, если я правильно помню, была ошибка (я думаю, что в некоторых версиях IE см. также ссылку ниже, что-то в комментариях об этом).

Для меня эта ссылка: Async JS был самым полезным, который я нашел до сих пор. Тем более, что это также вызывает проблему, что даже при аналитическом коде googles событие onload все равно будет заблокировано (по крайней мере, в некоторых браузерах). Если вы хотите, чтобы этого не произошло, лучше присоедините функцию к событию onload.

Для размещения асинхронного фрагмента внизу, это действительно объясняется в указанной вами ссылке. Кажется, он просто делает это, чтобы убедиться, что DOM полностью загружен без использования события onload. Таким образом, это может зависеть от того, что вы делаете, если вы не манипулируете DOM, не должно быть причин добавлять его в нижней части тела. Кроме того, я лично предпочел бы добавлять его в onload-событие в любом случае.