Какой JavaScript должен быть включен в <head> и что включено в <body>?

Я смущен тем, какой JavaScript должен быть включен где?

Например:

  • Где включить библиотеки jQuery? В <head> или перед закрывающим элементом </body>?

  • Если JavaScript определен в нижней части <body>, может ли он использоваться inline в теле?

  • Если он блокирует параллельные загрузки, то почему он никогда не говорил о том, чтобы включить ваш CSS внизу?

Ответы

Ответ 1

Место <script> Элемент

Элементы 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. "   

Ответ 2

CSS

CSS загружается в <head>, чтобы предотвратить Flash of Unstyled Content (FOUC), ситуация, когда ваша страница отображается без стилей в течение секунды. Загрузка их в <head> является незначительной жертвой, чтобы ваша страница выглядела безупречно, когда содержимое отображается.

JS

Общий случай:

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, объясняющая больше о том, что они есть, и ответ что в значительной степени говорит об их истории, поддержке и текущем статусе.