Как обработва браузърът уеб страницата?

Процесът на обработка на уеб страница от браузъра може да бъде разделен на няколко етапа:

1. Заявка и получаване на ресурс:

   • Потребителят въвежда URL в адресната лента или кликва върху връзка.
   • Браузърът изпраща HTTP заявка към сървъра.
   • Сървърът обработва заявката и изпраща отговор, съдържащ обикновено HTML документ.

2. Синтактичен анализ (Parsing):

   • Браузърът получава HTML документа като байтове.
   • Тези байтове се декодират според посочената кодировка в символи.
   • HTML парсерът анализира документа по символи и създава дърво DOM (Document Object Model). DOM представя логическата структура на документа.
   • При откриване на тагове <link> (за CSS) или <script> (за JavaScript), браузърът започва да изтегля тези ресурси паралелно с анализа на HTML.

3. Изграждане на CSSOM:

   • CSS парсерът анализира CSS правилата от <style> таговете, <link> таговете и inline стиловете.
   • Въз основа на тези правила се изгражда дървото CSSOM (CSS Object Model), което съдържа всички стилове за всеки елемент на страницата.

4. Изграждане на дървото за рендериране (Render Tree):

   • Render Tree комбинира DOM и CSSOM. То съдържа само елементите, които ще бъдат показани на страницата, и съответните им стилове.
   • Елементите, за които е зададено CSS правилото display: none;, не се включват в Render Tree.

5. Разпределение (Layout / Reflow):

   • Браузърът изчислява точните геометрични размери и позицията на всеки елемент на страницата въз основа на Render Tree. Този процес се нарича Layout или Reflow.
   • Layout се извършва при първото изграждане на Render Tree, както и при промяна на размерите на прозореца, добавяне/премахване на елементи или промяна на стиловете им.

6. Рисуване (Painting / Repaint):

   • Браузърът рисува всеки елемент на екрана, използвайки информацията от Render Tree и резултатите от стъпката Layout.
   • Рисуването може да се случи и при промяна на видимите свойства на елемента, като цвят, фон, прозрачност, без промяна на геометрията му (това се нарича Repaint).

7. Композиция:

   • Рисуваните елементи могат да бъдат обединени на различни слоеве за оптимизация на рендерирането и анимациите.
   • Тези слоеве след това се обединяват за показване на крайната страница на екрана.

8. Изпълнение на скриптове:

   • Когато HTML парсерът достигне до таг <script>, анализът на HTML се спира (по подразбиране), и браузърът изтегля, анализира и изпълнява JavaScript кода.
   • JavaScript може да променя DOM и CSSOM, което може да предизвика повторни стъпки Layout и Painting.
   • Атрибутите async и defer за таг <script> влияят на реда и времето за изпълнение на скриптовете, позволявайки продължаване на анализа на HTML.

Ето приблизителна визуализация на потока:

HTTP заявка
↓
HTML байтове
↓
HTML парсер
→ CSS парсер (паралелно)
    ↓           ↓
    DOM дърво  CSSOM дърво
          ↓
     Render дърво
          ↓
        Layout
          ↓
       Рисуване
          ↓
     Композиция
          ↓
   Екран

Изпълнението на JavaScript може да се прекъсне на различни етапи, предизвиквайки повторни стъпки:

HTML парсер + `<script>` таг
↓
Пауза на HTML анализа
↓
Изтегляне на скрипта
↓
Анализ на скрипта
↓
Изпълнение на скрипта
↓
(Възможно модифициране на DOM/CSSOM → Предизвикване на Layout/Рисуване)
↓
Продължаване на HTML анализа

Разбирането на този процес е важно за оптимизация на производителността на уеб страниците.