Please enable JavaScript.
Coggle requires JavaScript to display documents.
Internet - Coggle Diagram
Internet
Этапы загрузки страницы
Браузер определяет, какой протокол использовать:
https:// — защищённое соединение (HTTP поверх TLS)
. http:// — незащищённое соединение.
DNS Lookup
Браузер проверяет локальный кэш DNS
chrome://net-internals/#dns (если вы уже посещали этот сайт).
Если адрес отсутствует в локальном кэше, запрос отправляется:
Сначала на DNS-сервер провайдера.
Затем (если не найден) на корневые DNS-серверы.
DNS-сервер возвращает соответствующий IP-адрес, например 93.184.216.34.
DNS (Domain Name System) — это система, которая преобразует доменные имена (например, example.com) в IP-адреса (например, 93.184.216.34). Компьютеры и устройства в сети используют IP-адреса для связи, а DNS облегчает взаимодействие для человека, позволяя использовать понятные доменные имена.
DNS выполняет роль "телефонной книги" интернета, связывая доменные имена с их IP-адресами.
TCP Handshake
TCP использует трёхэтапное рукопожатие:
Браузер отправляет SYN (Synchronize) запрос серверу, чтобы начать соединение.
Сервер отвечает SYN-ACK (Synchronize-Acknowledge).
Браузер отправляет ACK (Acknowledge) для подтверждения соединения.
Если используется https://, дополнительно выполняется TLS (Transport Layer Security) для установления защищённого соединения.
Браузер и сервер обмениваются ключами для шифрования данных.
Сервер отправляет сертификат безопасности (SSL/TLS сертификат), подтверждающий его подлинность.
Если сертификат подтверждён (например, через CA — Certification Authority), начинается шифрование данных.
HTTP Request
HTTP (HyperText Transfer Protocol) — это протокол передачи гипертекста, используемый для обмена данными между клиентом (обычно браузером) и сервером.
Клиент: Ваш браузер или приложение.
Сервер: Устройство, на котором хранится веб-страница или API.
HTTP — это протокол на основе запросов и ответов:
Клиент отправляет запрос (Request).
Сервер отвечает ответом (Response).
Статусность: HTTP — это протокол без сохранения состояния (stateless). Каждый запрос независим от других.
GET: Получение данных.
POST: Отправка данных.
PUT: Замена данных.
DELETE: Удаление данных.
И другие (HEAD, PATCH, OPTIONS).
Запросная строка (Request Line)
GET /path/to/resource HTTP/1.1
GET — метод запроса.
/path/to/resource — URL-адрес ресурса (путь к файлу или API).
HTTP/1.1 — версия HTTP.
const xhr = new XMLHttpRequest();
xhr.open('GET', '
https://jsonplaceholder.typicode.com/posts/1
', true);
fetch('
https://jsonplaceholder.typicode.com/posts/1
')
fetch('
https://example.com
', { headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer token123' } });
fetch('
https://jsonplaceholder.typicode.com/posts
', { method: 'POST', // Указываем метод POST headers: { 'Content-Type': 'application/json' // Указываем, что данные в формате JSON }, body: JSON.stringify({ // Преобразуем объект JavaScript в JSON title: 'foo', body: 'bar', userId: 1 }) }) .then(response => response.json()) .then(data => console.log('Ответ сервера:', data)) .catch(error => console.error('Ошибка:', error));
Заголовки (Headers) - дополнительные данные
Тип клиента (браузера).
Поддерживаемые форматы данных.
Информация для аутентификации.
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9 Accept-Language: en-US,en;q=0.5
Connection: keep-alive
Тело запроса (Body)
HTML-страница или JSON-данные
Коды состояния HTTP (HTTP Status Codes):
2xx (Успех): 200 OK, 201 Created.
3xx (Перенаправление): 301 Moved Permanently, 302 Found.
4xx (Ошибка клиента): 404 Not Found, 400 Bad Request.
5xx (Ошибка сервера): 500 Internal Server Error, 503 Service Unavailable.
Работа поверх TCP/IP: HTTP использует протокол TCP/IP для передачи данных.
HTTP Response
Сервер отправляет HTTP-заголовки:
Статус-код (например, 200 OK).
Тип содержимого (Content-Type: text/html).
Инструкции по кэшированию и другие метаданные.
В теле ответа (body) передаётся содержимое страницы (например, HTML).
Congestion Control / TCP Slow Start
TCP Slow Start — это механизм, используемый TCP для предотвращения перегрузки сети.
Как работает:
Сначала сервер отправляет данные небольшими порциями.
Если потери пакетов не обнаружены, объём передаваемых данных постепенно увеличивается.
При обнаружении перегрузки скорость передачи снижается.
Rendering Critical Path
Parsing HTML
Браузер начинает разбирать полученный HTML-код построчно.
Создаётся DOM
https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work/dom.gif
Preload Scanner
Пока DOM создаётся, браузер сканирует HTML на наличие внешних ресурсов (<script>, <link>, <img>) и начинает их предварительную загрузку.
CSSOM Tree
Браузер парсит CSS и создаёт CSSOM (CSS Object Model), представляющую стили элементов.
CSSOM Tree:
h1
color: red
font-size: 20px
JavaScript Compilation and Execution
JavaScript-файлы отправляются в JavaScript Engine (например, V8), где:
Они компилируются в машинный код (JIT-компиляция).
Выполняются, включая изменения DOM и CSSOM.
Building the Accessibility Tree
На основе DOM и CSSOM браузер создаёт дерево доступности (Accessibility Tree), которое помогает устройствам чтения экрана взаимодействовать с контентом.
Render Tree
DOM и CSSOM объединяются, чтобы создать Render Tree, который описывает визуальное представление страницы.
Layout
Браузер вычисляет размеры и позиции всех элементов на странице.
Paint
На этом этапе элементы отрисовываются пиксель за пикселем на экране.
Compositing
Отдельные слои (например, задний фон, текст, изображения) объединяются в единое изображение для отображения.
Time to Interactive (TTI)
TTI — момент, когда страница полностью загружена и готова к взаимодействию.
Browser components
User Interface
Это графический интерфейс браузера, с которым взаимодействует пользователь.
Rendering Engine
Blink (Chrome, Edge, Opera). WebKit (Safari). Gecko (Firefox).
Рендеринг-движок отвечает за отображение содержимого веб-страниц (HTML, CSS, SVG и других элементов)
Networking Component
HTTP/HTTPS, DNS, TCP/IP, QUIC
Сетевой компонент отвечает за загрузку ресурсов с сервера через HTTP/HTTPS, включая HTML, CSS, JavaScript, изображения, видео и другие файлы
JavaScript Engine
V8 (Chrome, Edge, Opera). SpiderMonkey (Firefox). JavaScriptCore (Safari).
JavaScript Engine — это компонент браузера, отвечающий за выполнение JavaScript-кода.Преобразование JavaScript-кода в байт-код или машинный код.
Движок читает и анализирует код.
Компилирует его в байт-код или машинный код.
Выполняет код и возвращает результат.
Storage
Компонент браузера, отвечающий за локальное хранение данных.
Cookies: Небольшие данные, используемые для сессий и аутентификации.
LocalStorage: Хранение данных в формате ключ-значение, доступных между сессиями.
SessionStorage: То же, что LocalStorage, но данные доступны только в рамках одной вкладки.
IndexedDB: База данных для хранения больших объёмов данных.
Cache Storage: Кэширование ресурсов для прогрессивных веб-приложений (PWA).
Security Components
Защита от XSS (межсайтовых скриптовых атак).
Проверка SSL/TLS-сертификатов для HTTPS-соединений.
Обеспечение изолированного выполнения (sandboxing) кода.
Контроль политики CORS для защиты данных.
UI Backend
Этот компонент отвечает за рендеринг стандартных элементов интерфейса (кнопок, выпадающих списков и т.д.).