Комментарии 4
Интересная статья
Автор, скажите: за счёт чего современные браузеры при первой загрузке страницы позволяют отрисовать хотя бы часть страницы?
Я замечал, что для отрисовки контента браузерам вовсе не обязательно дожидаться скачивания всех ресурсов и построения Render Tree
Это особенно заметно в SPA-приложениях: когда браузер успевает отобразить HTML ДО того, как в <div id="root"></div> подгрузится бандл
Не уверен, что понял вопрос правильно. Но JS-скрипт действительно может быть загружен после всех остальных элементов. Это не фича современных браузеров, так было всегда.
Если коротко, <script> тэг, по умолчанию грузится в синхронном режиме и блокирует построение Render Tree, пока не будет полностью загружен. Чтобы разблокировать рендеринг, раньше была практика размещать скрипты в конце body, после всех остальных элементов. Это позволяло браузеру загрузить весь статический контент до начала обработки JS.
Сейчас необходимости в этом нет. Спецификация режим загрузки скриптов можно контролировать самостоятельно, указав атрибуты async или defer (они взаимоисключающие и не могут использоваться вместе).
Режим async говорит браузеру, что скрипт должен грузиться асинхронно, т.е. он не будет блокировать основной поток и будет поставлен на исполнение по факту своей загрузки. По умолчанию, скрипты имеют значение async=false. Для включания асинхронного режима нужно указать атрибут <script src="..." async> (src у такого скрипта обязателен, если src не указан, async не будет иметь эффекта). Если скрипт был добавлен в DOM динамически, например, создан через document.createElement, он, по умолчанию будет иметь async=true, но его можно переопределить вручную (script.setAttribute("async", false)).
Атрибут defer оставляет загрузку скрипт в синхронном режиме, но ставит его в конец очереди, после всех остальных элементов. Если на странице есть несколько defered скриптов, они будут поставлены в очередь в том порядке, в котором были встречены парсером.
Мне кажется что тут скорее не в браузере дело, а в самих сайтах и фреймворках: можно сделать так чтобы вначале подгружался минимальный HTML и CSS, а в конце разметки вставить полные описания стилей и скрипты, которые весь интерфейс отрисуют. Веб-фреймворки тоже такое могут делать на полуавтомате - подгрузить первым делом скелет, а после асинхронно остальной фарш.
Познавательная статья)
Chromium. Отрисовка страницы с помощью Blink, CC и планировщика