Аналізуючи та створюючи екран, який бачить користувач
Все починається, коли користувач відкриває веб-сторінку, і тим самим робить перший запит. З цього моменту браузер надсилає HTTP запит на сервер для отримання HTML бажаної сторінки через метод GET.
Зображення 1: користувач робить запит до сторінки.
Сервер повертає цей HTML, і на його основі браузер починає аналізувати вміст, процес, відомий як parsing, та створювати дерево DOM (Document Object Model), що відображає структуру документа.
Зображення 2: Дерево DOM. Джерело: https://medium.com/allbarbos/dom-b9c308d398b0.
Під час parsing браузер ідентифікує та запитує додаткові ресурси, як-от CSS стилі, JavaScript, зображення… і кожен з цих ресурсів може вимагати нових HTTP запитів.
Для прикладу давайте розглянемо parsing сторінки з блогу на Medium. На Зображенні 3 ми бачимо перший запит документа HTML @amanda.aa, показаний в Network, а на Зображенні 4 – додатковий запит для завантаження зображення профілю користувача.
Зображення 3: запит документа.
Зображення 4: додатковий запит для зображення.
Також запитаний CSS аналізується для створення дерева стилів, яке називається CSSOM (CSS Object Model) і містить правила стилів, що застосовуються до елементів дерева DOM.
Комбінація двох дерев формує третє дерево рендерингу, яке відображає елементи, що мають бути показані, і те, як вони будуть стилізовані. На основі цього браузер може обчислити позицію та розмір кожного елемента дерева в процесі, відомому як layout або reflow. Після обчислень браузер малює пікселі на екрані, заповнюючи його зображеннями, текстами, відео… кольорами!
Зображення 5: Комбінація дерев DOM і CSSOM у дереві рендерингу. Джерело: https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=pt-br.
Всі ці етапи виконуються швидко та паралельно, безпосередньо впливаючи на продуктивність сторінки та досвід користувача.
У підсумку, ми можемо побачити на Зображенні 6 діаграму, що пояснює, як відбувається процес побудови екрана.
Зображення 6: діаграма резюме процесу рендерингу веб-сторінок браузерами.
Якщо хочете глибше вивчити тему, читайте також:
- Будова, макет і малювання дерева рендерингу;
- Що повинен знати кожен розробник фронтенду про рендеринг веб-сторінок;
- Мінімізація reflow браузера.
Кінець!
Перекладено з: Como os navegadores renderizam páginas web?