Производительность

Раздел посвящён тому, как измерять, анализировать и ускорять фронтенд: от метрик и методов рендеринга до виртуализации, Web Workers и браузерной архитектуры.

8 статей 51 вопросов

Начни с базы

Метрики производительности: Core Web Vitals

TTFB, FCP, LCP, INP, CLS — метрики, которые измеряют каждый этап загрузки страницы. Разбираем нормальные значения, причины деградации и способы улучшения.

5 вопросов

Методы рендеринга: CSR, SSR, SSG, ISR, SWR и Streaming

Метод рендеринга определяет, где и когда создаётся HTML: в браузере, на сервере при каждом запросе или при сборке. Разбираем CSR, SSR, SSG, ISR, SWR и Streaming, их баланс между SEO, скоростью, актуальностью данных и нагрузкой на сервер, а также роль CDN и HTTP-кэширования.

12 вопросов

Браузерная архитектура: процессы, потоки, сеть

Современный браузер — это многопроцессная система с изолированными renderer-процессами, GPU-ускорением и строгой моделью безопасности. Разбираем процессы, потоки, Site Isolation и сетевой путь от ввода URL до первого байта ответа.

6 вопросов

Углубись в детали

Гидратация: SSR, mismatch и Streaming в React

Гидратация — процесс подключения React к серверному HTML, делающий страницу интерактивной. Разбираем hydration mismatch, Streaming SSR и Selective Hydration в React 18.

5 вопросов

Анализ и оптимизация JavaScript-бандла

Как находить узкие места в бандле, применять tree shaking и code splitting, бороться с дубликатами и настраивать автоматический контроль размера.

8 вопросов

Виртуализация списков: принципы и библиотеки

Виртуализация — техника рендеринга только видимых элементов списка, снижающая нагрузку на DOM до ~50 узлов при тысячах записей. Разбираем react-window, react-virtuoso и Vue-решения.

5 вопросов

Тестирование производительности

Как автоматизировать проверки скорости фронтенда и API: Lighthouse CI, Web Vitals, размер бандла, нагрузочные тесты, профилирование и мониторинг пользователей.

5 вопросов

Не будет лишним

Web Workers: фоновые вычисления без блокировки UI

Web Workers выносят тяжёлые вычисления из основного потока в фоновый, сохраняя отзывчивость UI. Разбираем базовый синтаксис, паттерны с React, Shared Workers, Service Workers и comlink.

5 вопросов