При необходимости загрузки скрипта нужно ли его помещать в самый верх

Question

При необходимости загрузки скрипта нужно ли его помещать в самый верх

Тип вопроса: HTML Вероятность: 10% Категория: Frontend Разработчик

Ответ

Размещение скрипта вверху (<head>) может блокировать парсинг и отрисовку страницы, так как браузер приостанавливает обработку HTML до загрузки и выполнения скрипта.

Лучшие практики:

Для критически важных скриптов (например, аналитика) используйте async или defer:

<script src="analytics.js" async></script>

Основные скрипты лучше размещать перед закрывающим </body>:

<script src="main.js"></script>
</body>

Если скрипт должен работать с DOM, но не критичен для первоначальной отрисовки, используйте defer:

<script src="app.js" defer></script>

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

Ответ 18+ 🔞

О, смотри-ка, какие тут умные советы по скриптам нарисовались. Ну, блядь, сейчас разберемся, как не накосячить, чтобы сайт не встал колом, пока твой JS там ебётся с загрузкой.

Так, слушай сюда, главное правило, которое даже мой кот, сука, должен знать: если ты воткнёшь свой здоровенный скрипт прямо в <head>, браузер, этот дохуя умный, на нём остановится как вкопанный. Он будет ждать, пока скрипт загрузится и выполнится, и только потом продолжит рисовать страницу. Пользователь будет пялиться в белый экран и думать: «Ну и пиздец, опять сдохло». А это, на минуточку, доверия ебать ноль.

Что же делать, спросишь ты? А вот что, хитрая жопа:

async — для «похуй, когда, но быстро». Берёшь скрипт, который живёт сам по себе (типа счётчиков аналитики, которые всем насрать, когда именно запустятся), и пишешь:
```
<script src="analytics.js" async></script>
```
Браузер его качает параллельно, не блокируя всю движуху, и как только загрузил — тут же выполняет. Порядок, блядь, не гарантирован. Кто первый встал — того и тапки.
Классика жанра — в самый низ. Основные твои скрипты, от которых всё пляшет, просто засунь перед закрывающим </body>. Тогда вся страница уже отрендерится, пользователь доволен, а твой код спокойно пристроится в конце.
```
<script src="main.js"></script>
</body>
```
defer — для умных и терпеливых. Если скрипту нужен DOM (все эти твои document.querySelector), но он не должен тормозить показ страницы, вот тебе волшебное слово:
```
<script src="app.js" defer></script>
```
Его можно даже в <head> положить! Он начнёт качаться тихонько, параллельно, а выполнится только когда весь HTML будет готов. И, что важно, в том порядке, в котором они в коде идут. Красота, ёпта!

А теперь, внимание, исключение, чтобы ты не обосрался с важными вещами: если у тебя есть какой-нибудь полифилл для древних IE, который должен отработать до всего остального, его, блядь, можно и в <head> без async/defer. Потому что иначе в старье всё разъедется нахуй ещё до старта.

Вот и вся наука. Не усложняй, расставляй скрипты с умом, и будет тебе счастье, а не белый экран смерти.