Производительность браузера
Critical Rendering Path, reflow и repaint, requestAnimationFrame, requestIdleCallback, Performance API
Производительность браузера
Производительность браузера — это понимание того, как браузер рендерит страницы и как JavaScript код влияет на отзывчивость интерфейса.
Что вы узнаете
- Critical Rendering Path — как браузер строит страницу
- Что вызывает reflow и repaint, как их минимизировать
- requestAnimationFrame для анимаций, requestIdleCallback для фоновых задач
- Performance API для измерения производительности кода
60 кадров в секунду (60 fps) — стандарт для плавных интерфейсов. Это означает, что каждый кадр должен обрабатываться за 16.6 мс. JavaScript, reflow и repaint делят это время.
Подглавы
- Critical Rendering Path — HTML/CSS парсинг, CSSOM, Layout, Paint
- Repaint и Reflow — что вызывает, batching, layout thrashing
- rAF и rIC — requestAnimationFrame, requestIdleCallback
- Профилирование — Performance API, marks, Long Tasks