Каждый раз, когда ты вводишь адрес сайта и нажимаешь Enter, происходит целая цепочка событий. За долю секунды твой браузер находит нужный сервер на другом конце планеты, устанавливает с ним соединение и получает страницу. Давай разберём этот процесс по шагам.
Представь, что ты заказываешь пиццу. Ты звонишь по номеру ресторана (это URL), диспетчер понимает твой адрес (это DNS), курьер едет к тебе по дорогам (это TCP/IP), и ты получаешь пиццу в коробке (это HTTP-ответ). Если курьер не нашёл адрес — ты получаешь ошибку 404.
Каждое устройство в интернете имеет IP-адрес — числовой адрес вроде 142.250.74.46. Но запоминать такие числа неудобно, поэтому придумали DNS (Domain Name System) — систему, которая переводит человекочитаемые имена вроде google.com в IP-адреса.
Когда ты вводишь github.com, браузер сначала проверяет свой кэш DNS, потом обращается к DNS-серверу провайдера, и тот возвращает IP-адрес. Этот процесс называется DNS-резолвингом.
TCP (Transmission Control Protocol) — протокол, который гарантирует доставку данных. Прежде чем отправить запрос, браузер и сервер делают «рукопожатие» (handshake) — обмениваются тремя пакетами: SYN → SYN-ACK → ACK. Только после этого начинается передача данных.
IP — это система адресации: каждый пакет данных содержит адрес отправителя и получателя, как конверт с письмом.
HTTP (HyperText Transfer Protocol) — это язык, на котором браузер общается с сервером. Запрос выглядит примерно так:
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0Сервер отвечает статусным кодом и телом ответа:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<html>...</html>HTTPS — это HTTP поверх TLS/SSL-шифрования. Данные шифруются с помощью пары ключей: публичного и приватного. Сервер отправляет публичный ключ в сертификате, браузер проверяет его подлинность через центр сертификации, и дальнейшая передача данных надёжно зашифрована. Именно поэтому вводить данные карты нужно только на сайтах с HTTPS.
Порт — это виртуальный «номер двери» на сервере. Стандартные порты: HTTP работает на порту 80, HTTPS — на 443. Когда ты видишь http://example.com, браузер неявно подключается к порту 80. Именно поэтому порт не нужно писать явно в обычных URL.
1. Браузер парсит URL: протокол, домен, путь
2. DNS-резолвинг: домен → IP-адрес
3. TCP-рукопожатие (3 пакета)
4. TLS-рукопожатие (для HTTPS)
5. HTTP-запрос уходит на сервер
6. Сервер обрабатывает запрос и отправляет ответ
7. Браузер получает HTML и начинает строить страницу
Весь этот процесс занимает обычно от 50 до 300 миллисекунд. API performance.timing позволяет измерить каждый из этих этапов прямо из JavaScript.
Отправка HTTP-запроса и чтение заголовков ответа
// fetch() — современный способ делать HTTP-запросы
// Каждый запрос проходит через все этапы: DNS → TCP → HTTP
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
// Статус ответа: 200 = OK, 404 = не найдено, 500 = ошибка сервера
console.log('Статус:', response.status) // 200
console.log('Статус текст:', response.statusText) // OK
// Заголовки ответа — мета-информация от сервера
console.log('Content-Type:', response.headers.get('content-type'))
// application/json; charset=utf-8
// Данные приходят в виде текста или JSON
const data = await response.json()
console.log('Данные:', data.title)
// Измеряем время DNS-резолвинга через Performance API
// (работает только в браузере, не в Node.js)
const [entry] = performance.getEntriesByName(
'https://jsonplaceholder.typicode.com/posts/1'
)
if (entry) {
const dnsTime = entry.domainLookupEnd - entry.domainLookupStart
const tcpTime = entry.connectEnd - entry.connectStart
const ttfb = entry.responseStart - entry.requestStart
console.log(`DNS резолвинг: ${dnsTime.toFixed(1)} мс`)
console.log(`TCP соединение: ${tcpTime.toFixed(1)} мс`)
console.log(`Time To First Byte: ${ttfb.toFixed(1)} мс`)
}Каждый раз, когда ты вводишь адрес сайта и нажимаешь Enter, происходит целая цепочка событий. За долю секунды твой браузер находит нужный сервер на другом конце планеты, устанавливает с ним соединение и получает страницу. Давай разберём этот процесс по шагам.
Представь, что ты заказываешь пиццу. Ты звонишь по номеру ресторана (это URL), диспетчер понимает твой адрес (это DNS), курьер едет к тебе по дорогам (это TCP/IP), и ты получаешь пиццу в коробке (это HTTP-ответ). Если курьер не нашёл адрес — ты получаешь ошибку 404.
Каждое устройство в интернете имеет IP-адрес — числовой адрес вроде 142.250.74.46. Но запоминать такие числа неудобно, поэтому придумали DNS (Domain Name System) — систему, которая переводит человекочитаемые имена вроде google.com в IP-адреса.
Когда ты вводишь github.com, браузер сначала проверяет свой кэш DNS, потом обращается к DNS-серверу провайдера, и тот возвращает IP-адрес. Этот процесс называется DNS-резолвингом.
TCP (Transmission Control Protocol) — протокол, который гарантирует доставку данных. Прежде чем отправить запрос, браузер и сервер делают «рукопожатие» (handshake) — обмениваются тремя пакетами: SYN → SYN-ACK → ACK. Только после этого начинается передача данных.
IP — это система адресации: каждый пакет данных содержит адрес отправителя и получателя, как конверт с письмом.
HTTP (HyperText Transfer Protocol) — это язык, на котором браузер общается с сервером. Запрос выглядит примерно так:
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0Сервер отвечает статусным кодом и телом ответа:
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<html>...</html>HTTPS — это HTTP поверх TLS/SSL-шифрования. Данные шифруются с помощью пары ключей: публичного и приватного. Сервер отправляет публичный ключ в сертификате, браузер проверяет его подлинность через центр сертификации, и дальнейшая передача данных надёжно зашифрована. Именно поэтому вводить данные карты нужно только на сайтах с HTTPS.
Порт — это виртуальный «номер двери» на сервере. Стандартные порты: HTTP работает на порту 80, HTTPS — на 443. Когда ты видишь http://example.com, браузер неявно подключается к порту 80. Именно поэтому порт не нужно писать явно в обычных URL.
1. Браузер парсит URL: протокол, домен, путь
2. DNS-резолвинг: домен → IP-адрес
3. TCP-рукопожатие (3 пакета)
4. TLS-рукопожатие (для HTTPS)
5. HTTP-запрос уходит на сервер
6. Сервер обрабатывает запрос и отправляет ответ
7. Браузер получает HTML и начинает строить страницу
Весь этот процесс занимает обычно от 50 до 300 миллисекунд. API performance.timing позволяет измерить каждый из этих этапов прямо из JavaScript.
Отправка HTTP-запроса и чтение заголовков ответа
// fetch() — современный способ делать HTTP-запросы
// Каждый запрос проходит через все этапы: DNS → TCP → HTTP
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
// Статус ответа: 200 = OK, 404 = не найдено, 500 = ошибка сервера
console.log('Статус:', response.status) // 200
console.log('Статус текст:', response.statusText) // OK
// Заголовки ответа — мета-информация от сервера
console.log('Content-Type:', response.headers.get('content-type'))
// application/json; charset=utf-8
// Данные приходят в виде текста или JSON
const data = await response.json()
console.log('Данные:', data.title)
// Измеряем время DNS-резолвинга через Performance API
// (работает только в браузере, не в Node.js)
const [entry] = performance.getEntriesByName(
'https://jsonplaceholder.typicode.com/posts/1'
)
if (entry) {
const dnsTime = entry.domainLookupEnd - entry.domainLookupStart
const tcpTime = entry.connectEnd - entry.connectStart
const ttfb = entry.responseStart - entry.requestStart
console.log(`DNS резолвинг: ${dnsTime.toFixed(1)} мс`)
console.log(`TCP соединение: ${tcpTime.toFixed(1)} мс`)
console.log(`Time To First Byte: ${ttfb.toFixed(1)} мс`)
}Сделай GET-запрос к API и выведи в консоль: статус ответа, значение заголовка Content-Type, и одно поле из полученных JSON-данных. Используй fetch() и await.
Используй response.status для статуса, response.headers.get("content-type") для заголовка, response.json() для преобразования тела ответа. Поле с именем называется name.