…довгий, тернистий та заплутаний. Сьогодні хочу оглянути те, як бравзер перетворює текст в html-файлі на зображення у вікні перегляду. Але заглиблюватись не буду, бо навіть у форматі півторагодинної лекції мені не вдавалось охопити усю глибину.
Починається усе з того, що ще під час завантаження файлу бравзер уже на льоту намагається зібрати DOM. Для цього йому достатньо знайти в текстовому потоці токен: відкриваючий чи закриваючий тег, текстову послідовність чи коментар. Щойно токен знайдено, він відразу передається до tree builder, що створює DOM-вузол в DOM-дереві. І ось такою чехардою, крок за кроком, бравзер створює те саме DOM-дерево: токен-вузол-токен-вузол….
Це може відбуватися плавно й безперервно, а може перериватися, якщо бравзер натикається на вставлений або підключений скрипт. В такому випадку парсинг та побудова DOM відкладаються до кращих часів (хоча зараз для оптимізації парсинг може продовжуватися на тлі, але результат викидається на смітник в разі чого), бо бравзер очікує, що скрипт може змінити структуру документа.
Якщо ж бравзер знаходить стилі, то парсинг не припиняється, але може заблокувати безпосередній рендер, себто відмальовку. Чому — трошки далі. Усі стилі також паралельно собі парсяться і з них складається окреме дерево — CSSOM.
І от коли бравзер має на руках
Тому будь-яка зміна в DOM чи CSS призводять до перерахунку цього render-tree. Майте на увазі.
Наступний крок, після того, як весь дендропарк зібрано докупи — розрахунок layout, або ж блочного макету. На цьому етапі бравзер, беручи за основу render-tree, розраховує, як саме розташовані блоки відносно один одного. Саме на цьому етапі враховуються розміри елементів, відступи, бордери та інші "фізичні" метрики.
Зазвичай бравзер намагається завершити це в один прохід, користуючись "потоковою моделллю", вважаючи, що елементи "плинуть" зліва направо та зверху вниз. Однак, якщо ви використали таблички або CSS-grid, бравзеру доведеться цей процес повторити далеко не один раз.
Після того, як він нарешті обробиться усі ваші хитромудрі лейаути, і блочний макет буде збудовано, бравзер нарешті зможе зайнятися антистрес-розмальовками, тобто збирати все докупи в одне зображення на етапі paint. Тут він буде вже застосовувати і шрифти, і кольори, і картинки ваші, і склеювати усі шари, які ви постворювали своїми position: absolute чи трансформами.
І аж по тому, як він все "запече" в одне зображення, бравзер виведе його у вʼюпорт, тобто у область відображення.
Якщо допис був корисним — можна подякувати донатом на збір на РЕБ для 109 ОГШБ 10 ОГШБр "Едельвейс"
Усього 50 грн — але це реальна користь для фронту.
Звичайно ж, я надзвичайно спростив усе, і не розповів про ту неймовірну купу оптимізацій, до яких вдаються сучасні бравзери. Але для загального розуміння нам вистачить, я сподіваюсь.
А як хочете глибшого огляду — дайте знати в коментарях. Ну і вогників насипте вже, вам не складно, мені приємно.
@babichdev