Что происходит в браузере, после того, как мы ввели адрес в адресную строку

Екатерина Танькова, разработчик интерфейсов

Почему это важно?

Мне задали этот вопрос на 5 из 20 собеседований

Какие бывают протоколы

IP — Internet Protocol

TCP/IP — Transmission Control Protocol/Internet Protocol

UDP — User Datagram Protocol

FTP — File Transfer Protocol

DNS - Domain Name System

HTTP — HyperText Transfer Protocol

NTP — Network Time Protocol

SSH — Secure SHell

Браузер поддерживат протоколы:

http и https - протоколы клиент-серверного взаимодействия

file - с помощью этого протокола можно открыть файл с локального комп

ftp - протокол передачи файлов по сети

По умолчанию браузер использует https

HTTP + TLS = HTTPS

TLS (Transport Layer Security)

TLS — криптографический протокол. Это значит, что он позволяет шифровать данные, в нашем случае те, что передаются между браузером и сервером. Расшифровать эти данные могут только сервер и браузер, для всех остальных это будет набор нечитаемых символов.

Процесс получения IP адреса называется DNS lookup

Сокет — это комбинация IP адреса и номера порта

TCP

TCP — это набор правил, который описывает способы соединения между устройствами, форматы отправки запросов, действия в случае потери данных и так далее.

TCP/IP Открытие сокета

Из url протокол TCP берет данные об используемом порте (80 порт для HTTP, 443 для HTTPS) и осуществляет вызов функции socket системной библиотеки для подключения к серверу.

Трехстороннее рукопожатие

HTTP Request

REST

GET

DELETE

POST

PUT

HTTP Response

Коды ответа HTTP

Информационные 100 - 199 ☝️

Успешные 200 - 299 👍

Перенаправления 300 - 399 👉

Клиентские ошибки 400 - 499 👎

Серверные ошибки 500 - 599 🤷‍♀️

DOM (Document Object Model)

— абстрактное представление HTML-документа, с помощью которого браузер может получать доступ к его элементам, изменять его структуру и оформление.

Парсинг HTML

Синтаксический анализ

- это преобразование документа в пригодную для чтения структура

Синтаксический анализ

состоит из двух этапов:

- лексического анализа (токенизации)

- построения DOM дерева

Токенизация

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

Построение DOM дерева

Токены собираются в узлы (nodes). Эти узлы и сохраняются в DOM со всеми взаимными связями.

Пример построения DOM

document

loading — документ только начал формироваться

interactive — браузер полностью загрузил HTML, было построено DOM-дерево (событие DOMContentLoaded)

complete — браузер загрузил HTML и внешние ресурсы (событие load)

Внешние ресурсы

Мы можем управлять порядком загрузки скриптов

defer

- не блокировать парсинг и отрисовку страницы
- выполнить, когда документ обработан, но перед событием DOMContentLoaded

async

- не блокировать парсинг и отрисовку страницы
- не ждать готовности документа

Парсинг js

Parsing CSS

Результат парсинга CSS-кода — CSSOM

CSSOM

Каждый CSS-файл разбирается в объект StyleSheet, каждый из таких объектов содержит правила CSS с селекторами и объектами в соответствии с грамматикой CSS.

Специфичность CSS

Вес селекторов

!important
style=""
#id
.class, [attribute],
				:pseudoclass
tag, ::pseudoelement

Специфичность CSS

Система расчёта

Дерево рендеринга

Cопоставление узлов из DOM и узлов CSSOM

Этап компоновки (layout)

Вычисление точного положения узлов в области просмотра устройства — внутри окна браузера — и их размер.

Этап раскрашивания (paint)

Данный этап также называют растеризацией, когда браузер преобразует каждое поле, вычисленное на этапе компоновки, в фактические пиксели на экране.

Композитинг

Композитинг – техника разделения частей страницы на слои, раскрашивания их по отдельности и компоновки в виде страницы в отдельном потоке – композ-потоке.