Правда про продуктивність селектора CSS

Боже, залиш це Патрік Броссет розповість про продуктивність CSS у найбільш доступний і практичний спосіб. Не те, що CSS є завжди що прискорюється, або навіть найнижчий плід, коли йдеться про покращення продуктивності.

але if Ви шукаєте переваги на стороні CSS, Патрік має гарний спосіб винюхати ваші найдорожчі селектори за допомогою Edge DevTools:

• Зламати DevTools.
• Перейдіть на вкладку «Продуктивність».
• Переконайтеся, що ви ввімкнули опцію «Увімкнути розширені інструменти візуалізації». Це збентежило мене в процесі.
• Запис завантаження сторінки.
• Відкрийте у звіті вкладку «Знизу вгору».
• Перевірте свій розмір перерахованих стилів.

Звідси клацніть одну з подій перерахованого стилю в головному перегляді водоспаду, і ви отримаєте нову вкладку «Статистика вибору». Подивіться на всю цю клейку доброту!

Тепер ви бачите всі селектори, які були оброблені, і їх можна відсортувати за тим, скільки часу їм знадобилося, скільки разів вони збігалися, кількістю спроб зіставлення та щось під назвою «підрахунок швидких відхилень», який я вивчив це кількість елементів, які можна було легко та швидко виключити зі збігу.

Тут багато ідей, якщо CSS справді є вузьким місцем, яке потребує дослідження. Але прочитайте повну публікацію Патріка в блозі Microsoft Edge, оскільки він набагато глибше розбирається в питаннях «чому» і «як», а також розглядає ціле прикладне дослідження.

Пряме посилання →

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
• джерело: https://css-tricks.com/the-truth-about-css-selector-performance/