Знаете ли вы как браузер обрабатывает index.html (расскажите про Critical Rendering Path)?angular-3

Общий процесс загрузки и рендеринга

Когда браузер получает index.html, он проходит через несколько ключевых этапов для отображения страницы. Этот процесс называется Critical Rendering Path (CRP) — критический путь рендеринга.

1. Парсинг HTML и построение DOM

  • Браузер читает HTML-документ построчно и создает DOM (Document Object Model) — дерево объектов.
  • Пример: 
    <!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div>Hello World</div>
    <script src="app.js"></script>
  </body>
</html>
  • При встрече тегов <script> или <link> парсинг может блокироваться (если нет атрибутов async/defer для JS или preload для CSS).

2. Загрузка CSS и построение CSSOM

  • CSS-файлы парсятся в CSSOM (CSS Object Model). Браузер ждет полной загрузки CSS, чтобы избежать "мелькания стилей" (FOUC).
  • Важно: CSS является рендер-блокирующим ресурсом.

3. Выполнение JavaScript

  • JS по умолчанию блокирует парсинг HTML (если нет async/defer).
  • Браузер приостанавливает построение DOM/CSSOM до выполнения скрипта: 
    // app.js
document.querySelector('div').style.color = 'red'; // Требует готового DOM

4. Создание Render Tree

  • Браузер комбинирует DOM и CSSOM в Render Tree (только видимые элементы, например, display: none исключаются).

5. Layout

  • Вычисление позиций и размеров элементов (пиксельные значения). Например: 
    div { width: 50%; margin: 10px; } // Браузер пересчитывает % в пиксели

6. Paint

  • Непосредственное отображение пикселей на экране. Сложные анимации используют will-change или transform для оптимизации.

Оптимизации CRP в Angular

  1. Стратегии загрузки JS:

    • async/defer в <script>: 
      <script src="vendor.js" defer></script> // Выполняется после DOMContentLoaded

  2. Предзагрузка ресурсов:

    <link rel="preload" href="critical.css" as="style">

  3. Ленивая загрузка модулей:

    // Angular
const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin.module') }
];

  4. Server-Side Rendering (SSR):

    • Angular Universal рендерит HTML на сервере, ускоряя First Contentful Paint.

Резюмируем

  1. Браузер строит DOM → CSSOM → Render Tree → Layout → Paint.
  2. CSS и JS блокируют рендеринг без оптимизаций.
  3. В Angular критически важно:
    • Разделять код (ленивая загрузка).
    • Использовать defer/async для скриптов.
    • Уменьшать размер CSS (например, через PurgeCSS).

P.S. Для проверки CRP используйте Lighthouse или WebPageTest. Оптимальный CRP — это когда First Meaningful Paint происходит за <2 секунды.

Вопросы

Собеседования