Я смущен тем, какой JavaScript должен быть включен где?
Например:
Где включить библиотеки jQuery? В <head> или перед закрывающим элементом </body>?
Если JavaScript определен в нижней части <body>, может ли он использоваться inline в теле?
Если он блокирует параллельные загрузки, то почему он никогда не говорил о том, чтобы включить ваш CSS внизу?
Элементы script блокируют загрузку прогрессивной страницы.
Браузеры загружают несколько компонентов одновременно, но когда они сталкиваются с внешним script, они останавливают дальнейшие загрузки до тех пор, пока файл script не будет загружен, проанализирован и не будет выполнен.
Это повредит общее время страницы, особенно если это происходит несколько раз во время загрузки страницы.
Чтобы свести к минимуму эффект блокировки, вы можете поместить элемент script в конец
страницы, перед закрывающим тегом.
Таким образом, для script не будет никаких других ресурсов для блокировки.
Остальные компоненты страницы будут загружены и уже будут взаимодействовать с пользователем.
Хуже всего антипаттерн - использовать отдельные файлы в начале документа:
<!doctype html>
<html>
<head>
<title>My App</title>
<!-- ANTIPATTERN -->
<script src="jquery.js"></script>
<script src="jquery.quickselect.js"></script>
<script src="jquery.lightbox.js"></script>
<script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>
Лучше всего объединить все файлы:
<!doctype html>
<html>
<head>
<title>My App</title>
<script src="all_20100426.js"></script>
</head>
<body>
...
</body>
</html>
И лучший вариант - поместить объединенный script в самый конец страницы:
<!doctype html>
<html>
<head>
<title>My App</title>
</head>
<body>
...
<script src="all_20100426.js"></script>
</body>
"Шаблоны JavaScript, Стоян Стефанов (OReilly). Copyright 2010 Yahoo!, Inc., 9780596806750. "
CSS загружается в <head>, чтобы предотвратить Flash of Unstyled Content (FOUC), ситуация, когда ваша страница отображается без стилей в течение секунды. Загрузка их в <head> является незначительной жертвой, чтобы ваша страница выглядела безупречно, когда содержимое отображается.
JS загружается внизу для нескольких (но не ограничиваясь этим) причин:
Так что он не блокирует загрузку других ресурсов и рендеринг страницы.
Традиционное использование JS для повышения, например, проверка на стороне клиента и незначительные специальные эффекты. Они обычно являются необязательными и не влияют на общую цель страницы. Поэтому они загружаются последними.
Добавление скриптов после содержимого гарантирует, что элементы, на которые ссылаются ваши сценарии, безопасно доступны, потому что они уже находятся в DOM.
Но есть некоторые исключения из правила вроде:
"Предполетные библиотеки", такие как Modernizr
Modernizr применяет классы в теге <html> для обозначения доступности функций, которые могут использоваться для целей JS и CSS. Отсрочка этого может привести к внезапному смещению стиля из-за добавления класса, а также к поврежденному JS, потому что проверка не была выполнена ранее.
Анализаторы CSS, такие как LESS/SASS и скрипты, влияющие на стили
Удаленные стили LESS/SASS загружаются через AJAX, поэтому страница отображает независимо от того, готовы ли стили или нет. Загрузка их в голову заставит их загружать стили как можно раньше, чтобы избежать FOUC.
"Библиотеки загрузчика", такие как RequireJS, должны быть загружены как можно раньше, чтобы параллельно загрузить другие скрипты.
Веб-приложениям нужна JS как платформа. Лучше всего вы загружаете эти библиотеки на ранней стадии. Кроме того, в веб-приложении минимальное содержимое страницы до запуска приложения.
Здесь также упоминаются два атрибута script, и они defer и async.
В принципе, идея состоит в том, что тег script с defer запускается только после разбора DOM, а теги script с async загружают сценарии асинхронно, не блокируя другие операции. Было бы подразумеваться, что вы можете использовать скрипты в голове, применять async для их параллельной загрузки и defer, чтобы гарантировать, что DOM готов к выполнению, но у каждого есть свои проблемы.
Здесь документация MDN, объясняющая больше о том, что они есть, и ответ что в значительной степени говорит об их истории, поддержке и текущем статусе.