Что такое прогрессивный рендеринг?

Прогрессивный рендеринг — это методика оптимизации скорости загрузки и отображения веб-страницы, при которой содержимое загружается и отображается поэтапно, а не полностью сразу.

Его основные преимущества:

• Более быстрая отрисовка первого значимого контента (First Meaningful Paint).
• Улучшенное восприятие скорости загрузки пользователем.
• Снижение времени до интерактивности (Time to Interactive).

Основные техники прогрессивного рендеринга включают:

1. Ленивая загрузка (Lazy Loading): Откладывание загрузки несущественных ресурсов (например, изображений или видео) до тех пор, пока они не понадобятся пользователю (пока он не пролистает страницу до них).

   html

2. Рендеринг на стороне сервера (Server-Side Rendering - SSR): Формирование HTML-страницы на сервере и отправка уже отрисованного контента браузеру.

   javascript

3. Рендеринг на стороне клиента (Client-Side Rendering - CSR) с гидратацией: Браузер получает минимальный HTML и JavaScript. JavaScript затем загружает данные и полностью рендерит страницу в браузере. Гидратация — это процесс аттачинга обработчиков событий к уже отрисованному SSR-контенту на клиенте.
4. Потоковая передача HTML (Streaming HTML): Отправка HTML частями по мере его генерации на сервере, что позволяет браузеру начать парсинг и рендеринг еще до полной загрузки всего документа.

   html