SEOFAQ Telegram, маркетинг и SEO Канал SEOFAQT в мессенджере Telegram

Все чаты​Производительность CSS селекторов Это то, о чем большинство...

 26  


​Производительность CSS селекторов

Это то, о чем большинство людей говорят вам не беспокоиться. Но "плохие" селекторы при достаточно большом DOM могут оказать реальное влияние на пользовательский опыт.

Страница со скриншота имеет 5 000 нод DOM, но событие Recalc Style относится только к 1 984 из них. Когда пользователь открывает гамбургер меню, класс добавляется в BODY. Это вызывает отмену стиля, и весь CSS применяется заново к странице (в нашем случае к 1 984 узлам DOM).

Это приводит к полусекундному Recalc Style! Примерно половина Recalc Style тратится на подбор селекторов, поэтому около 250 мс тратится только на работу с селекторами. Мы потратили почти 1.4 мсек только на выполнение ::before!

Если посмотреть на типы селекторов, с которыми мы имеем дело, то все они довольно мерзкие: невероятно широкие ключевые селекторы (например, * или :not([hidden])); подстрочные селекторы (например, [class*="icss-"]); счетчики (например, div:nth-child(3)); сложные комбинаторы (например, ~); и потомки.

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

Для тех, кто говорит, что производительность селекторов не важна, вот пример того, как они добавляют примерно 0.25 сек задержки при вводе данных пользователем. Это плохо.

@MikeBlazerX

Ссылки из поста:
https://twitter.com/csswizardry/status/16169063778...
https://t.me/MikeBlazerX

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