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

Question

[Дима Гашко]

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

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

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

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

PS Просто все подключат в конце body, и постепенно начинаю сомневаться в своих рассуждениях

Answer 1

[Vlad Feninets]

подключают в основном в конце body, потому что важно сохранить последовательность загрузки и выполнения скриптов, например jquery, а потом какой-нибудь common.js, который юзает jquery.
+ в таком случае загрузка скриптов начнется уже в самом конце, когда пропарсился html.
Т.е. допустим у вас в head есть скрипт, который весит ~10мб, но он defer и не критикал (тобишь его можно потом догрузить лениво), в таком случае он начнет сразу грузится, а парсинг хтмл продолжится дальше, далее у вас в хтмл встречаются другие картинки, медиа-файлы и т.д. - но если у вас слабое соединение, то весь канал будет съедаться этим скриптом.

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

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

Comments

[Дима Гашко]

Не совсем понял о чем на картинке)

async - загружает скрипты асинхронно с построением DOM. При этом выполняются они сразу после своей загрузки и не важно когда это будет и не важно на последовательность их подключения.

defer - загружает скрипты асинхронно с посроением DOM, но выполнятся они только после готовности DOM и в той последовательности в которой были подключены.

Таким образом при подключении с defer
"важно сохранить последовательность загрузки и выполнения скриптов, например jquery, а потом какой-нибудь common.js, который юзает jquery."
вполне спокойно себя чувствует)

[Vlad Feninets]

Дима Гашко: собственно картинка о том, что вы написали выше :)

"важно сохранить последовательность загрузки и выполнения скриптов, например jquery, а потом какой-нибудь common.js, который юзает jquery."
это я описал для скриптов без defer и async.

В общем, резюмируя, если вы юзаете defer - волноваться, в какое место его подключать незачем, кроме юзкейса, который я привел (большой размер js-файла).

[Gran Torino]

Есть канал с пропускной способностью 1мб сек и веб страница 3мб (1.5 мб html и 1.5 мб js) . При твоём подходе html отрисуется через 3 сек. При подключении в конце body через 1.5. Вот и вся математика.

[Дима Гашко]

Gran Torino: почему? За 3 - это скорее без defer
Если в конце подключать - body - на 1.5, затем js за 1.5 (всего 3.0)
Если с defer в начале - body, где-то за 1.5-1.8, js где-то так же (вместе 1.6-2.5)

[Gran Torino]

Дима Гашко: ну 1.5 мб html сперва идет потом 1.5 мб js код. Через сколько html покажется, если это последовательно идет, и через сколько покажется html, если и то и то грузится параллельно занимая канал? Откуда цыфры 1.8, 1.6-2.5 вообще не понятно...