Надо ли дожидаться загрузки документа, если скрипт подключается перед закрывающим тегом body?

Question

[eugene159]

В уроках я часто видел, что JS пишут внутри этой функции (если есть JQuery):
$(document).ready(function() {...});

Или этой (если нет JQuery):

document.addEventListener('DOMContentLoaded', function() {...});

Я попробовал поместить свой код снаружи этих функций. И он работает.
Файл с кодом подключается перед закрывающем тегом body. У него нет async, defer и пр. атрибутов.

Если все работает, то зачем мне помещать код в эти функции? Можете привести пару примеров, в которых код не будет работать, если я не буду помещать его в эти функции?

Comments

[Froggyweb]

нет. К этому моменту DOM будет построен. не эксперт.

Answer 1

[キム ファイブプラス]

https://qna.habr.com/q/440609

Answer 2

[alexalexes]

Попробуй вычитать геометрию img или его контейнеров до загрузки изображений.

Comments

[eugene159]

Я в вопросе спрашиваю про событие ready, а не load.
Для картинок нужно load. Это другое.

Answer 3

[ThunderCat]

Если все работает, то зачем мне помещать код в эти функции? Можете привести пару примеров, в которых код не будет работать, если я не буду помещать его в эти функции?

Не факт что на низкой скорости загрузки весь хтмл прогрузится к моменту загрузки скрипта и все элементы будут доступны. Кроме того - для улучшения загрузки скрипты стараются подгружать в самом низу дом дерева, то есть перед закрывающим боди тегом. Это ускоряет загрузку контента, не тратя времени на прогрузку скриптов.

Comments

[eugene159]

Не факт что на низкой скорости загрузки весь хтмл прогрузится к моменту загрузки скрипта.

Так ведь вроде бы в html документе все загружается последовательно. И если script стоит в конце закрывающего тега body, то пока html не загрузится, script загружаться не будет.
Если, конечно, у script нет async или defer. Но в вопросе я написал, что их нет.

Вы про загрузку картинок? Я про событие ready, а не load.

[ThunderCat]

Так ведь вроде бы в html документе все загружается последовательно.

емнип скрипты как и картинки грузятся в отдельном потоке. По этому команда на загрузку поступает последовательно, а загрузка идет параллельно.

Answer 4

[Дмитрий Тычинин]

Упрощенно, DOM-дерево строится следущим образом:
HTML-документ просматривается от начала до конца, попутно на основе тегов строя DOM-дерево. Как только будет найден тег <script></script>, просмотр приостановится до завершения этого скрипта. Вы спрашиваете, что плохого может случится, если этот тег находится перед </body>. Тут можно рассмотреть ситуацию чуть сложнее: что, если у нас есть два тега со скриптами? И что, если тот скрипт, что расположен ниже, достраивает DOM-дерево, а первый должен обратиться к новым элементам? Тогда и пригождается DOMContentLoaded. Если обернуть в

document.addEventListener('DOMContentLoaded', ...);

логику первого скрипта, он дождется, пока второй скрипт закончит работу, после чего запустится сам. Та же ситуация, когда вторым скриптом идет подключаемая библиотека. Если первый скрипт использует ее, сценарий завершится ошибкой.
Ну а если мы говорим про страницу с одним скриптом - разницы нет. Но кто гарантирует, что вы позже не подключите библиотеку или не решите добавить еще один скрипт? Лучше продумывать такие тонкости заранее, чтобы часами не искать ошибку.