Получить профессию в Skypro
Скрипты в HTML: в head или body для лучшей функциональности
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Если у вас есть скрипты, которые не нуждаются в немедленном доступе к DOM, используйте <script defer> внутри тега <head>. Они будут загружаться асинхронно во время просмотра страницы и запускаться после её разбора, что не замедлит скорость её работы.
А вот если ваши скрипты взаимодействуют с DOM, поместите <script> непосредственно перед закрывающим тегом </body>. Это обеспечит их подключение после полной загрузки HTML и гарантирует корректность работы с DOM.
Пример:
<head>
<!-- Подходяще для скриптов, не требующих взаимодействия с DOM -->
<script src="non-dom-script.js" defer></script>
</head>
<body>
<!-- Ваш контент -->
<!-- Для скриптов, взаимодействующих с DOM -->
<script src="dom-script.js"></script>
</body>
Где и когда размещать скрипты?
Выбирая место для скрипта, нужно оценить его требования, производительность страницы и взаимодействие пользователя. Неблокирующие скрипты со свойствами async или defer предпочтительнее вставить в <head>.
Скрипты и их загрузка: ищем баланс
Задача стоит в том, чтобы обеспечить скоростную загрузку страницы, не ущемляя при этом функциональности скриптов. Скрипты, размещённые в нижней части <body>, ускоряют отображение HTML, но основные, от которых зависит работа страницы, следует разместить в <head> со свойством defer.
Организация кода: распределение скриптов
Держите код в порядке: группируйте скрипты внутри <head> или разделяйте их на разные файлы. Это упрощает их поддержку и предотвращает хаотичное внедрение в HTML.
Скрипты и DOM: вовремя выполнения
Применяйте функцию document.ready() из jQuery или событие DOMContentLoaded для того, чтобы гарантировать правильное взаимодействие скриптов с DOM после полного его разбора.
Визуализация
Представление скриптов в <head> и <body> можно аналогично сравнить с подготовкой автомобиля к поездке:
🚚🔧 Скрипт в `<head>`: Это подобие подготовки инструментов перед отъездом.
* Инструменты запакованы, а отъезд временно откладывается.
🚚💨 Скрипт в конце `<body>`: Это подразумевает, что багаж упаковывается заранее, а инструменты наоборот — в последний момент.
* Багаж отправляется вперёд, а инструменты берутся только когда они нужны.Подробнее о размещении: стратегии и инструменты
Сохранение макета: стратегия с помощью скрытого div
Используйте скрытый div, чтобы предотвратить сдвиги макета при загрузке скриптов, скрывая их до момента их активного использования.
Внешние скрипты: регулирование кэширования
Внешние скрипты дадут вам возможность оптимизировать кэширование, что увеличит скорость загрузки страницы при её повторном посещении.
Общий подход: функциональность против производительности
Необходимо найти золотую середину между функциональностью и производительностью. Встроенные скрипты увеличивают скорость, но могут замедлить общую загрузку страницы.
Defer и Async: динамичное сочетание
Атрибут Async позволяет запустить скрипты сразу после их загрузки, а defer ожидает окончания разбора HTML, оптимизируя при этом общую загрузку страницы.
Совет для энтузиастов jQuery: небольшой совет
Подключайте jQuery в <head>, чтобы в полной мере использовать все её функции в последующих скриптах.
Полезные материалы
- Тег script HTML — подробная информация о применении тега
<script>. - bitsofcode — статья о месте наиболее предпочтительном для помещения JavaScript.
- Основные веб-показатели Google — как скрипты влияют на ключевые показатели сайта.
- Оптимизация доставки CSS — методы, помогающие оптимизировать подключение CSS и скриптов.
<script>: Элемент Script— полное руководство по элементу<script>.- Эффективная загрузка JavaScript с помощью defer и async — особенности использования атрибутов async и defer.
- javascript – Где должны располагаться теги
<script>? — дискуссия о лучших практиках расположения тегов<script>.