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

Core Web Vitals, V8 internals, бенчмарки, оптимизация.

С чего начать

1. Производительность -- зачем оптимизировать
2. Core Web Vitals -- LCP, FID, CLS (LCP/FID/CLS/INP)
3. Бенчмарки JS -- как правильно
4. 10 мифов об оптимизации JS
5. Что убивает перформанс

Frontend

• Core Web Vitals -- LCP, FID, CLS (LCP, FID, CLS, INP)
• Web Vitals
• Метрики -- FCP, TTFB, TTI, TBT
• Lighthouse, Performance API
• Lazy loading, Code splitting
• Оптимизация изображений, AVIF и WebP -- новые форматы
• Image CDN -- Cloudinary, imgproxy
• Font Loading -- стратегии
• Критический CSS -- inline critical CSS
• Минификация CSS и JS
• Как браузер рендерит страницу, Browser rendering flow
• will-change -- подсказка браузеру
• contain -- CSS Containment
• content-visibility -- lazy rendering
• Виртуализация длинных списков
• SSR vs CSR -- производительность
• Islands Architecture

V8 internals

• См. подпапку V8-internals/ → _MOC V8 internals
• Ignition vs TurboFan, OSR -- On-Stack Replacement
• Inline Cache и hidden classes (Shapes)
• Monomorphic Polymorphic Megamorphic
• Байт-код V8, Lazy Compilation
• SMI -- Small Integer, Pointer Tagging и Oddball
• V8 объекты -- in-object и dictionary mode
• Деоптимизация в V8, V8 Native Syntax
• Hot функции и оптимизация
• Как компилирует V8, Сборка V8 локально

JS-уровень

• Switch vs IF в V8
• for vs forEach vs reduce
• Array SMI vs Double (Element Kinds)
• Сложность алгоритмов в JS
• Императивный код и процессор
• Math.trunc vs битовое OR
• JSON для холодного старта
• Async Function -- скрытая стоимость
• Производительность идентификаторов
• Не мешай интерпретатору

Memory

• Утечки памяти -- как найти и исправить
• Утечки памяти и GC в Node
• Garbage Collection в V8
• Garbage Collection

Сеть и кеш

• Кеширование -- Cache-Control
• Caching стратегии
• Сжатие -- gzip и brotli
• Service Workers
• Edge Computing

Бенчмарки

• Бенчмарки JS -- как правильно
• Бенчмарки -- архив цифр
• A-B тестирование производительности

Мониторинг

• Lighthouse, WebPageTest
• Real User Monitoring (RUM)
• Synthetic Monitoring
• Chrome User Experience Report (CrUX)
• Performance Budget
• Alerting -- когда бить тревогу
• Profiling Node -- инструменты

React

• React.memo и useMemo
• React -- виртуальный DOM и reconciliation
• React -- Suspense и lazy

Чеклисты

• Оптимизация фронта чеклист
• Что убивает перформанс
• 10 мифов об оптимизации JS
• Производительность -- зачем оптимизировать

Связанные

• _MOC JavaScript · _MOC Node.js · _MOC DevOps