В каком порядке будут отрисованы html-элементы на странице (всего 14 строк кода)?

Question

[teopraktik]

Здравствуйте. Умоляю, помогите разобраться с путем, который проходит браузер с момента получения браузером html-ответа от сервера до отрисовки html-элементов в пикселях на экране.
Допустим у нас есть вот такой html-документ (все не интересующее я удалил).

Мне нужно понять пошагово строчка за строчкой, что делает браузер. Всего 14 строк кода.
Я понимаю это так (текстовые узлы не рассматриваю, только html-элементы):
Строка 1 – чтение, формирование DOM-объекта html
Строка 2 – чтение, формирование DOM-объекта head
Строка 3 – чтение, формирование DOM-объекта link, блокирование дальнейшего чтения html, загрузка style.css, чтение всего файла css, формирование всего CSSOM-дерева
Строка 4 – чтение, формирование DOM-объекта script, блокирование дальнейшего чтения html, загрузка script1.js, чтение скрипта, выполнение скрипта
Строка 6 – чтение, формирование DOM-объекта body, формирование объекта body рендер-дерева, отрисовка на экране
Строка 7 – чтение, формирование DOM-объекта p, формирование объекта p рендер-дерева, отрисовка на экране
Строка 8 – чтение, формирование DOM-объекта img, формирование объекта img рендер-дерева, отрисовка пустой области объекта на экране (сама картинка же не загружается еще?)
Строка 9 – чтение, формирование DOM-объекта p, формирование объекта p рендер-дерева, отрисовка на экране
Строка 10 – чтение, формирование DOM-объекта script, загрузка script2.js в фоновом режиме, чтение скрипта в фоновом режиме
Строка 11 – чтение, формирование DOM-объекта p, формирование объекта p рендер-дерева, отрисовка на экране
Строка 12 – чтение, формирование DOM-объекта script, блокирование дальнейшего чтения html, загрузка script3.js, чтение скрипта, выполнение
Завершение построения DOM-дерева, вызывается событие DOMContentLoaded
Выполнение скрипта из строки 10.
Загружается картинга из строки 8
Вызывается событие load.

Но как будет правильно?

Answer 1

[Вадим]

Ну, чтож.. я не то чтобы прям хорошо в этом разбираюсь и браузеры постоянно работают над оптимизацией загрузки ресурсов и отрисовки, но, в целом, примерно так:
0) html стримится, поэтому всё идёт неким потоком, а не по блокам.
1) Браузер получил html, встретил в head ссылки на русурсы, пошёл их в параллель получать.
2) Так как в скриптах может уже выполняться какая-то синхронная работа, то браузер дождётся загрузки и выполнения script1.
3) Стили могут всё ещё грузиться, а могут и нет.
4) Начинает строиться DOM. Браузер увидит картинку и пойдёт её загружать в паралель. Так как атрибутов width и height не указано (и если в style.css тоже не указано) то место под картинку зарезервировано не будет.
5) Увидит script2, начнёт его загружать, пойдёт дальше строить DOM. (Скрипт выполнится как только загрузится и распарсится браузером. Так как стоит async - когда это произойдёт нам не известно. То есть может заблочить дальнейшее построение DOM, а может и нет. )
6) Увидит script3, так как он без атрибутов, то будет дожидаться загрузки и выполнения в синхронном режиме. Велика вероятность что выполнится раньше script2.
7) DOM готов, если CSS загрузился, то DOM и CSSOM мержатся в Render Tree -> происходит первичная отрисовка.
8) DOM Content load
9) Если под картинку всё же не было указано размера, и она ещё не загрузилась к этому моменту, то по факту её загрузки произойдёт перекомпановка и перерисовка, иначе только перерисовка. (всегда стоит стремиться сводить перекомпановки, известные так же как reflow, к минимуму и вызывать только перерисовки, известные как repaint)

На деле всё сильно сложнее, браузер как-то там ещё бьёт на токены, но я так глубоко не знаю