fix: update CRP

docs/browser/04-critical-render-path.md

@@ -7,32 +7,49 @@ sidebar_position: 4
 Критический путь рендеринга (Critical Rendering Path, CRP) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация критического пути рендеринга важна для ускорения загрузки и отображения веб-страниц, что напрямую влияет на пользовательский опыт.
 
 ## Основные этапы критического пути рендеринга:
-1. **Загрузка HTML:**
+1. **Загрузка и парсинг HTML:**
    - Браузер загружает HTML-документ и начинает его парсить.
    - Во время парсинга браузер встречает ссылки на внешние ресурсы (CSS, JavaScript, изображения) и начинает их загружать.
-2. **Построение DOM (Document Object Model):**
+     При встрече с тегом \<link\> (CSS) или \<script\> (JS) — загрузка может приостанавливаться:
+     - CSS — блокирует рендеринг (нельзя построить layout без стилей).
+     - JS — может блокировать парсинг HTML, если не имеет async или defer. 
    - Браузер преобразует HTML в дерево DOM.
    - Каждый HTML-элемент становится узлом в DOM.
-3. **Загрузка CSS:**
+2. **Загрузка и парсинг CSS:**
-   - Браузер загружает CSS-файлы и встроенные стили (`<style>`).
+   - Когда браузер встречает CSS-файлы, он их загружает и строит CSSOM (CSS Object Model)..
-   - CSS парсится и преобразуется в CSSOM (CSS Object Model).
-4. **Построение CSSOM (CSS Object Model):**
    - CSSOM представляет собой дерево стилей, где каждый узел соответствует CSS-правилу.
    - CSSOM используется для определения стилей элементов.
-5. **Создание дерева рендеринга (Render Tree):**
+3. **Создание дерева рендеринга (Render Tree):**
    - Браузер объединяет DOM и CSSOM в дерево рендеринга.
    - Дерево рендеринга содержит только видимые элементы (например, элементы с `display: none` не включаются).
-6. **Компоновка (Layout):**
+   - Каждому видимому узлу назначаются стили (цвет, размер, шрифт и т.д.).
+4. **Компоновка (Layout):**
    - Браузер рассчитывает положение и размеры каждого элемента на странице.
    - Этот процесс также называется **рефлоу (reflow)**.
-7. **Отрисовка (Painting):**
+   - Результат — `layout tree` с точными координатами.
+5. **Отрисовка (Paint):**
    - Браузер отрисовывает пиксели на экране на основе данных из дерева рендеринга.
    - Этот процесс включает в себя растеризацию (rasterization) и отрисовку слоев.
-8. **Композиция (Composition):**
+6. **Композиция (Composite):**
    - Браузер объединяет слои (например, элементы с `position: fixed` или анимации) для финального отображения.
 
 ![Critical render path](images/04-crp-1.png)
 
+### 🧠 Визуальное резюме
+```text
+HTML → DOM
+CSS → CSSOM
+DOM + CSSOM → Render Tree
+Render Tree → Layout
+Layout → Paint → Composite → Screen
+```
+
+### ⚡ Что замедляет CRP
+- **Большие или блокирующие CSS/JS** → откладывают построение render tree.
+- **Много вложенных или тяжёлых стилей** → усложняют layout и paint.
+- **Синхронные JS-скрипты** без async/defer.
+- **Шрифты с блокирующей загрузкой** (@font-face без font-display).
+
 ## Как оптимизировать критический путь рендеринга?
 Оптимизация CRP направлена на ускорение загрузки и отображения контента, особенно "выше сгиба" (above the fold). Основные подходы:
 
@@ -67,10 +84,30 @@ sidebar_position: 4
 3. **Предзагрузка шрифтов:**
    - Загружайте шрифты заранее, чтобы избежать задержек
 
-## Почему это важно?
-- **Ускорение загрузки:** Оптимизация CRP уменьшает время до первого отображения контента (First Contentful Paint, FCP).
-- **Улучшение пользовательского опыта:** Быстрая загрузка страницы повышает удовлетворенность пользователей.
-- **SEO:** Скорость загрузки страницы влияет на ранжирование в поисковых системах.
 
-🚀 **_Источник: DeepSeek_** \
+## 🧩 Где выполняется JavaScript
+
+JavaScript **выполняется во время построения DOM**, то есть ещё **до этапа Render Tree**, если скрипт найден в HTML.
+Это происходит **до Layout и Paint**, потому что браузер должен знать, как изменится структура страницы, прежде чем её рисовать.
+
+### 🕹️ Подробно по этапам:
+1. **HTML → DOM**
+- Когда парсер HTML встречает \<script\>:
+  - Без `async` и `defer` — парсинг **останавливается**. Браузер загружает и выполняет JS, потом продолжает строить DOM.
+  - С `defer` — выполнение откладывается до **после построения DOM** (но до `DOMContentLoaded`).
+  - С `async` — выполняется **сразу после загрузки**, независимо от DOM.
+
+    ⚠️ Поэтому синхронный JS может **блокировать CRP**, т.к. пока он выполняется — DOM и CSSOM не достраиваются, а рендер не продолжается.
+
+2. **После построения Render Tree**
+- Когда JS выполняется в **runtime** (например, после загрузки страницы), он может:
+  - Изменять DOM (через `document.createElement`, `innerHTML`, и т.д.)
+  - Изменять стили (через `element.style` или изменение классов)
+
+Эти изменения вызывают **reflow (layout)** и/или **repaint**, что частично повторяет CRP:
+```text
+DOM update → Render Tree update → Layout → Paint → Composite
+```
+
+🚀 **_Источник: DeepSeek, ChatGPT_** \
 🚀 **Источник: [https://www.youtube.com/watch?v=Ff_IZrs4GcY](https://www.youtube.com/watch?v=Ff_IZrs4GcY)**