Канал SEOFAQT в мессенджере Telegram

Всё ещё встречаю этот паттерн на крупнейших сайтах в сети...

Mike Blazer

282

Всё ещё встречаю этот паттерн на крупнейших сайтах в сети, отмечает Арьен Карел.

Кликаешь на фильтр.

Открывается модальное окно.

В <html> добавляется вспомогательный класс для блокировки скролла.

Поверх страницы наслаивается полупрозрачный слой с размытием.

Трейс ниже 👇

Проблема: тяжелый пересчёт стилей (Style Recalculation) попадает внутрь обработчика клика.

INP измеряет время от клика до следующей отрисовки, поэтому этот пересчёт плюсуется к метрике.

А размытие добавляет проход фильтра по всему вьюпорту сверху.

На этой странице это десятки миллисекунд работы основного потока (main thread).

При каждом открытии и закрытии.

Более быстрый путь — использовать нативный <dialog>.

▪️ dialog.showModal() поднимает элемент на самый верхний слой (top layer)

▪️

Рендеринг ограничивается только самим диалогом

▪️ ::backdrop обрабатывает оверлей, вместе с backdrop-filter, если нужно размытие

Никаких классов на <html>.

Никакой инвалидации поддерева HTML.

Никаких фильтров на весь вьюпорт.

Чисто и быстро.

@MikeBlazerX

⚠️ Закрытый канал: @MikeBlazerPRO

Ссылки из поста:
– https://www.linkedin.com/posts/arjenkarel_inp-core...
– https://t.me/MikeBlazerX
– https://t.me/tribute/app?startapp=sE4X

Источник новости https://t.me/mikeblazerx/6429...

<< Вернуться на канал

02.06.2026 06:15