Web Technologies

Question 1

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

Answer 1

Обобщенное название технологии, которая используется для ускорения отрисовки Веб-Страниц.

Question 2

Основные идея и задача прогрессивного рендеринга?

Answer 2

Основная идея - показать пользователю, как можно раньше визуальный контент.

Основная задача - уменьшение времени загрузки.

Question 3

Что можно отнести к технологиям прогрессивного рендеринга?

Answer 3

1. Ленивую загрузку изображений
2. Приоритезация видимого контента
3. Асинхронные объекты HTML

Question 4

Что такое ленивая загрузка изображений? С помощью чего реализуется?

Answer 4

Когда на отображаемой странице, при отрисовке загружаются не все изображения. А только те, которые находятся в видимой области экрана, обычно такой механизм реализуется с помощью JavaScript

Question 5

Что такое приоритезация видимого контента? С помощью чего реализуется?

Answer 5

При этом подходе минимизируют и инкапсулируют стили, разметку и скрипты для той части страницы, которую пользователь видит первой. Для реализации можно использовать события DOM Content Loaded и LOD, либо применять отложенные скрипты, чтобы дозагрузить остальные ресурсы.

Question 6

Что такое Асинхронные объекты HTML?

Answer 6

Идея немного похожая на Server Site Rendering - в браузер отправляются веб-страницы, созданные на бэкенде.

Question 7

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

Answer 7

Прогрессивный рендеринг на стороне сервера основан на концепции потоковой передачи HTML.

Он разбивает страницы на осмысленные, самостоятельные компоненты с помощью разделения кода. Эти части страницы управляются разными скриптами.

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

Question 8

Основные этапы прогрессивного рендеринга

Answer 8

1. Браузер запрашивает у сервера HTML код
2. Сервер делает API запросы и сначала рендерит критический контент, а затем отправляет его клиенту.
3. Браузер анализирует HTML и отображает его на экране.
4. Сервер рендерит не критический контент и передает его браузеру.
5. Браузер анализирует и отображает некритичный контент. Параллельно JS Bundle загружается и выполняются в фоновом режиме. А браузер передает интерактивность элементам DOM.