Перейти к основному содержимому

Загрузка Веб-страницы

Сетевой запрос​

  1. DNS lookup:
    -> браузер/устройство (если ранее уже были запросы к этому адресу)
    -> роутер
    -> сервер провайдера
    -> корневой сервер
    -> сервер зоны 1-го уровня (com, ru ...)
    -> гугловский Name Server
  2. TCP Handshake (Тройное рукопожатие, http - 80 порт, https - 443 порт):
    -> предзапрос на установление соединения
    -> ответ сервера
    -> если все ок, то открытие сокета
  3. Если протокол HTTPs, то запрашиваем у сервера TLS/SSL сертификат, если все ок, то происходит обмен ключами
  4. Запрос данных
  5. Получили html страницу

Рендер страницы | CRP | Render Loop​

  1. Построение DOM
  2. Построение CSSOM
  3. Render Tree, применение стилей
    Render tree дублирует структуру DOM, но сюда не попадают невидимые элементы
    (например — <head>, или элементы со стилем display:none;).
    Также, каждая строка текста представлена в дереве рендеринга как отдельный renderer.
    Каждый объект рендеринга содержит соответствующий ему объект DOM (или блок текста), и рассчитанный для этого объекта стиль.
    Проще говоря, render tree описывает визуальное представление DOM.
  4. Layout (расстановка элементов согласно размерам и позиции)
  5. Paint (отрисовка пикселей)
  6. Composing (расположение слоев согласно их z-index и т.п.) и непостредственный показ юзеру
к сведению

Если есть изменения, которые нужно отрендерить, то сделано это будет после опустошения очереди микрозадач

Repaint
В случае изменения стилей элемента, не влияющих на его размеры и положение на странице (например, background-color, border-color, visibility), браузер просто отрисовывает его заново, с учётом нового стиля — происходит repaint (или restyle).

Reflow
Если же изменения затрагивают содержимое, структуру документа, положение элементов — происходит reflow (или relayout). Причинами таких изменений обычно являются:

  • Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов);
  • Изменение содержимого, в т.ч. текста в полях форм;
  • Расчёт или изменение CSS-свойств;
  • Добавление, удаление таблиц стилей;
  • Манипуляции с атрибутом «class»;
  • Манипуляции с окном браузера — изменения размеров, прокрутка;
  • Активация псевдо-классов (например, :hover).
примечание

Forced Reflow вызывается тогда, когда мы обращаемся к свойству элемента после его изменения:
Если мы просто изменили, то reflow произойдет при следующей смене кадра.

к сведению

Хорошая новость, касательно HTML, заключается в том, что он может быть исполнен по частям. Документ не должен быть загружен полностью для того, чтобы контент начал появляться на странице. Однако, другие ресурсы, такие как CSS и JavaScript, могут блокировать отрисовку страницы.

При отрисовке HTML, как только браузер встречает <script> или <link>, он останавливается и ждёт, пока JS или CSS-файл загрузится, и только после этого идет дальше.

CSS также может являться «блокирующим скрипты», потому что JavaScript-файлы должны дождаться построения CSSOM, прежде чем начать исполняться.

Вышеизложенное влияет на такую метрику как FCP (First Contentful Paint) - измеряющую время, затраченное с момента навигации на страницу до отрисовки первого DOM элемента.

подсказка

Нужно стараться переносить анимация на сторону css, так она будет исполняется в отдельном composition потоке и не прервется, когда наш основной поток стопнется.

Ресурсы​

Ресурсы