Отзывчивость интерфейса

На кадр при 60 Гц — около 16 мс. Всё, что занимает главный поток дольше 50 мс, — долгая задача: интерфейс не реагирует на клики и ввод.

Что важно знать

• Дробить долгую работу и отдавать управление браузеру (await scheduler.yield() или setTimeout), тяжёлые вычисления — в Web Worker.
• Layout thrashing: чередование записи стилей и чтения размеров (offsetHeight) в цикле заставляет браузер пересчитывать раскладку каждый раз. Сначала все чтения, потом все записи.
• Анимировать transform и opacity, а не геометрию.
• Длинные списки — виртуализация.
• Обработчики частых событий — throttle, debounce, requestAnimationFrame.
• Утечки памяти: забытые подписки, таймеры, обработчики — снимок кучи в DevTools.
• Профилирование: вкладка Performance показывает, что именно занимает кадр.