Где лучше всего подключать js?

В каком месте и каким способом эффективнее всего подключать скрипты к странице?

Раньше подключали в head$.ready либо DOMContentLoaded). Теперь все указывает его в конце body. Разумеется, что второй вариант куда эффективнее. При таком подключении ситуация следующая: сначала загружается страница, затем скрипты.

Как по мне самый эффективный вариант - это подключать скрипты в head, но с defer (который загружает скрипты асинхронно, скрипты выполняются после построения DOM, в строгой последовательности (в отличии от async), и при этом defer поддерживается везде):
<script defer src="js/main.js"></script>

При этом скрипты начинают загружаться в head, страница продолжает грузится и в итоге скрипты загрузятся на столько миллисекунд быстрее, за сколько браузер построит страницу (от 100 миллисекунд до нескольких секунд).

PS Просто все подключат в конце body, и постепенно начинаю сомневаться в своих рассуждениях
  • Вопрос задан
  • 8657 просмотров
Пригласить эксперта
Ответы на вопрос 1
fnnzzz
@fnnzzz
front-end dev
подключают в основном в конце body, потому что важно сохранить последовательность загрузки и выполнения скриптов, например jquery, а потом какой-нибудь common.js, который юзает jquery.
+ в таком случае загрузка скриптов начнется уже в самом конце, когда пропарсился html.
Т.е. допустим у вас в head есть скрипт, который весит ~10мб, но он defer и не критикал (тобишь его можно потом догрузить лениво), в таком случае он начнет сразу грузится, а парсинг хтмл продолжится дальше, далее у вас в хтмл встречаются другие картинки, медиа-файлы и т.д. - но если у вас слабое соединение, то весь канал будет съедаться этим скриптом.

но в целом, если у вас стоит аттрибут - defer или async, то в принципе не важно куда вы подключите ваш script.

вот схемка разных вариантов подключения скрипта:
https://hospodarets.com/img/blog/14828583238612140...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы