Сайт работает как сложная экосистема из 50+ технологий, где миллисекундные процессы создают иллюзию мгновенности — от DNS-запроса до рендеринга React-компонентов на экране. В 2026 году 5G сократил сетевую задержку до 10мс, но 68% пользователей уходят при LCP>2.5с по данным Google Core Web Vitals 2025.
Яндекс.Маркет обрабатывает 200M запросов ежедневно, Сбер обеспечивает 99.99% uptime для 100M клиентов — понимание принципов работы сайта критично для бизнеса, где каждая секунда влияет на конверсию и доход.
DNS-разрешение и поиск сервера
Работа сайта начинается с DNS-разрешения, когда браузер переводит человекочитаемый адрес yandex.ru в IP-адрес сервера 77.88.55.240 через 10–15 авторитетных DNS-серверов по всему миру. Этот процесс занимает 20–50мс и задействует кэш браузера, ОС и провайдера, минимизируя повторные запросы. Простыми словами, DNS работает как телефонная книга интернета, где доменное имя сопоставляется с числовым адресом компьютера. В России Яндекс.DNS обеспечивает разрешение для 60M пользователей с защитой от фишинга.
TCP-handshake устанавливает соединение в 3 этапа: SYN → SYN-ACK → ACK, подтверждая готовность сторон к обмену данными. Для HTTPS добавляется TLS 1.3 handshake с обменом сертификатами, шифрующими трафик за 1RTT (round-trip time). Современные браузеры используют HTTP/3 QUIC, объединяющий TCP+TLS в один протокол с 0-RTT восстановлением соединения после потери пакета.
Завершив сетевой уровень, браузер формирует GET-запрос с заголовками User-Agent, Accept-Language и Cookie, отправляя его на порт 443 (HTTPS) или 80 (HTTP). Именно этот запрос запускает серверную логику обработки.
HTTP/HTTPS протокол: язык общения браузера и сервера
HTTP/2 ввел multiplexing — одновременную передачу 100+ ресурсов (CSS, JS, изображения) по одному TCP-соединению без head-of-line blocking. Сервер сжимает ответы Gzip/Brotli, устанавливает кэш-директивы Cache-Control: max-age=31536000 для статических файлов и ETag для условных запросов. Простыми словами, это как официант, принимающий сразу 10 заказов вместо последовательной очереди.
HTTPS обеспечивает end-to-end шифрование через TLS 1.3 с Perfect Forward Secrecy — компрометация одного сеанса не раскрывает прошлые сессии. Сертификаты Let’s Encrypt бесплатно подтверждают владение доменом через ACME-протокол, автоматически обновляясь каждые 90 дней. В 2026 году Chrome помечает HTTP-сайты как «небезопасные» для всех страниц.
Status-коды 200 OK, 301 Moved Permanently, 404 Not Found направляют логику обработки ошибок. Переходя к серверу, именно HTTP-запрос запускает backend-логику и генерацию HTML.
Серверная обработка: от PHP/Python к готовому HTML
Веб-сервер Nginx/Apache принимает запрос на порт 80/443 и маршрутизирует его к backend через fastcgi_pass или uvicorn для Python FastAPI. PHP-FPM обрабатывает index.php за 10–50мс, извлекая данные из MySQL/PostgreSQL через подготовленные запросы против SQL-инъекций. Сбер использует gRPC между микросервисами для межсервисного общения с latency <5мс.
Backend генерирует HTML на лету, внедряя персонализированный контент из Redis-сессий и ML-рекомендаций. Laravel Blade или Django templates компилируются в PHP/Python-код, минимизируя строк разметки. Для статических сайтов Next.js ISR генерирует HTML по расписанию, кэшируя 90% страниц.
Готовый HTML + JSON API ответ сжимается Brotli и передается клиенту с заголовками Content-Security-Policy против XSS. На этом этапе серверная работа завершена — начинается магия браузера.
Браузерный рендеринг: Critical Rendering Path
Браузер Blink (Chrome/Edge) парсит HTML байт-за-байтом, строя DOM-дерево за 50–200мс на 50KB странице. CSS парсится параллельно, формируя CSSOM с specificity расчетом для каждого элемента. Critical Rendering Path определяет первую отрисовку: CSS загружается с приоритетом High, блокируя render до применения стилей.
Render Tree объединяет DOM и CSSOM, layout-движок вычисляет координаты элементов (reflow), paint-движок рисует пиксели (repaint). Long tasks >50мс вызывают jank — подвисания интерфейса, отслеживаемые Chrome DevTools Performance. Функция requestIdleCallback выполняет некритические задачи в свободное время браузера.
JavaScript парсится после HTML, блокируя DOM-парсинг до defer/async. Современный preload/scanner предугадывает ресурсы, запуская спекулятивный парсинг. Переходя к интерактивности, именно JS превращает статические страницы в приложения.
JavaScript и Virtual DOM: интерактивность сайта
V8 JavaScript engine компилирует ES2025 код в машинный с оптимизацией dead code elimination. React Fiber разбивает обновления UI на 16мс куски, используя time slicing против main thread blocking. Virtual DOM diffing минимизирует реальные DOM-операции — из 1000 изменений батчится 50 commit’ов.
React Query/Fetch управляет состоянием сервера, кэшируя API-ответы с invalidation по времени или событиям. WebSocket обеспечивает real-time обновления чатов VK с latency <100мс через абстракцию Socket.IO. Service Workers перехватывают fetch-запросы для офлайн-режима PWA.
Intersection Observer API отслеживает видимость элементов для lazy loading изображений, экономя 70% трафика мобильных пользователей. На этом уровне сайт становится полноценным приложением.
Современные оптимизации: CDN, Service Workers, SSR
CDN CloudFlare/Yandex Edge кэширует 95% статических ресурсов на 300+ дата-центрах, снижая TTFB до 50мс для российских пользователей. HTTP/3 с QUIC восстанавливает соединения без TCP-handshake после 4G-потерь. Image Optimization via WebP/AVIF сжимает изображения на 50% без потери качества Retina-экранов.
Server-Side Rendering (Next.js) генерирует HTML на сервере для SEO и First Contentful Paint <1с. Hydration превращает статический HTML в интерактивный React за 100–300мс. Российские маркетплейсы мигрируют на SSR для индексации JavaScript-контента Яндексом.
Core Web Vitals (LCP, FID, CLS) влияют на SERP позиции Google. Lighthouse PageSpeed 100 баллов достигается Core Web Vitals Budget API и PerformanceObserver. В 2026 году 82% топ-сайтов соответствуют метрикам.
