
Критический путь отрисовки: что тормозит первый экран
Браузер не рисует страницу построчно сверху вниз. Между получением HTML и первым пикселем на экране лежит цепочка из пяти этапов, и любой из них может задержать отрисовку на сотни миллисекунд.

Браузер не рисует страницу построчно сверху вниз. Между получением HTML и первым пикселем на экране лежит цепочка из пяти этапов, и любой из них может задержать отрисовку на сотни миллисекунд.

Что искать в pull request с версткой: доступность, адаптив, семантика, специфичность CSS. Конкретные формулировки замечаний вместо «поправьте, тут некрасиво».

Кастомный дропдаун, модалка и таблица с сортировкой чаще всего проваливают доступность. Разбираем, какие замечания писать на ревью и как переписать компонент, чтобы он работал с клавиатуры и скринридером.

Комбобокс на 10 000 опций перестаёт объявляться скринридером, live-region спамит уведомлениями, фокус улетает в никуда. Разбираем, где доступность рвётся под нагрузкой данными и частыми обновлениями DOM.

Скринридер объявляет ваш кастомный dropdown как «группа, пусто» вместо списка опций. Разбираем, как браузер строит дерево доступности и почему div с onClick для него не существует.

Мемоизация в React не бесплатна: обёртки съедают память и время сравнения пропсов. Разбираем, когда useMemo, useCallback и memo реально ускоряют рендер, а когда только замедляют.

Список на 50 тысяч строк с виртуализацией дал фризы прокрутки по 300 мс на слабом ноутбуке. Разбираем, где именно теряется кадр: измерение высот, реюз DOM-узлов, реакция на быстрый скролл.

Список на 50 000 строк вешает вкладку: браузер держит в DOM 200 000 узлов. Виртуализация оставляет в дереве только видимое. Разбираем, что происходит на скролле, где текут баги и что мерить.

Список из 10 000 строк вешает вкладку на 1,5 секунды при монтировании и лагает при скролле. Разбираем, что именно тормозит, как виртуализация меняет цифры и где она ломается.

Разбор того, что заставляет браузер пересчитывать геометрию и перерисовывать страницу, как измерить лаги в DevTools и какие паттерны кода бьют по кадровой частоте.

Скролл дёргается, анимация проседает до 20 fps, а профайлер показывает жёлтые полосы в главном потоке. Разбираем путь кадра от JS до пикселей и точки, где он рвётся раньше всего.

Разбор пути от изменения DOM до пикселей на экране: почему layout блокирует всё, где рвётся плавность прокрутки и что именно мерить, когда страница тормозит.