Самую короткую формулировку видел в Гугле, но, думаю, она не всех устроит:
The browser parses the html (DOM) and gets the external resources in an array or stack-like structure. After the html is loaded, the browser starts to load the external resources in the structure in parallel and execute, until all resources are loaded. (Google)
- Браузер определяет, введённая строка - это URL или поисковый запрос. Если это URL, то делает разбор адреса:
http: // domain.ru / index.html ? param1=1
[protocol] [host] [resource] [params]
- Резолв доменного имени в IP (для попадания данных в сетевой уровень передачи данных)
- Из локального кэша
- Из
/etc/hosts - Из кэша ОС
- Из обращения к DNS
Handshake: Установка TCP соединения. // See also: Уровни сетевых протоколов
Handshake: Проверка подлинности SSL сертификата. // See also: Как работает SSL/TLS-рукопожатие
Формирование HTTP заголовков
Отправка HTTP запроса
Получение документа в виде HTML строки
Парсинг HTML строки по алгоритмам из спецификации (операция в несколько потоков)
Формирование DOM (что нужно отрисовать)
Формирование CSSOM (как нужно отрисовать) // See also: Блокировка рендеринга CSS - Как это исправить?
Формирование Render Tree (на основе DOM & CSSOM) - Набор объектов рендеринга (Webkit использует термин «renderer», или «render object», а Gecko — «frame»)
Layout - Для каждого элемента render tree рассчитывается положение на странице. Браузеры используют поточный метод (flow), при котором в большинстве случаев достаточно одного прохода для размещения всех элементов.
Paint - происходит отрисовка всего этого в браузере
Repaint (перекрашивание без изменения формы) - В процессе взаимодействия пользователя со страницей, а также выполнения скриптов, она меняется, что требует повторного выполнения некоторых из вышеперечисленных операций
Reflow (более затратный процесс, который включается при изменении размеров, положения элементов или при добавлении/удалении элементов) - Если же изменения затрагивают содержимое, структуру документа, положение элементов — происходит reflow (или relayout). Причинами таких изменений обычно являются:
- Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов);
- Изменение содержимого, в т.ч. текста в полях форм;
- Расчёт или изменение CSS-свойств;
- Добавление, удаление таблиц стилей;
- Манипуляции с атрибутом «class»;
- Манипуляции с окном браузера — изменения размеров, прокрутка;
- Активация псевдо-классов (например, :hover).