В каком порядке браузер загружает страницу в зависимости от размещения скрипта?

Question

[lil_web]

Есть три случая, как я подключаю файл со скриптами на страницу. Вопрос: правильно ли я понимаю порядок загрузки страницы браузером в этих случаях.

1. Скрипт в head перед стилями. HTML → DOM → скрипт → стиль.

2. Скрипт в head после стилей. HTML → DOM → стиль → скрипт.

3. Скрипт в любом месте body. HTML → DOM → стиль → скрипт.

Comments

[alex]

вы затрагиваете очень обширную тему по которой можно целую книжку написать. отвечая на ваш вопрос - нет, вы не правильно понимаете. + вы не указали тип подключения скриптов (async, defer, module или обычный). браузер парсит хтмл, параллельно строит dom. если встречает скрипт - выполняет его тут же на месте. если в скрипте идет обращеине к дом элементам, которые еще не распарсились, т.к. находятся ниже в документе, то вывалится ошибка. если встречает css грузит его и тут же строит cssom. процесс на самом деле сложен + нужно учитыват разную его реализацию в разных браузерах

[ettychel]

Вопрос, а в чем проблема? Что то не получается? Скрипт отрабатывает раньше/позже?

[lil_web]

ettychel, нет, хочу понять принцип.

[lil_web]

Alex, тип подключения скриптов — обычный. Получается, если я поставил скрипт перед закрывающимся body, то на момент его выполнения весь DOM будет построен?

[alex]

lil_web, да, все элементы дома будут доступны

[lil_web]

Alex, спасибо! То есть при таком расположении js-файла будет лишним вешать обработчик на событие DOMContentLoaded?

document.addEventListener("DOMContentLoaded", ready);

[alex]

lil_web, да.
можно вот это почитать.

и вот картинка еще

Answer 1

[Владислав Лысков]

сверху вниз

Comments

[lil_web]

То есть я правильно описал все три случая?

[Владислав Лысков]

lil_web, не правильно все 3 случая, у тебя хтмл не загрузиться полностью, пока не загрузиться подключаемый файл