Ну, чтож.. я не то чтобы прям хорошо в этом разбираюсь и браузеры постоянно работают над оптимизацией загрузки ресурсов и отрисовки, но, в целом, примерно так:
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)
На деле всё сильно сложнее, браузер как-то там ещё бьёт на токены, но я так глубоко не знаю
