Каково влияние универсального селектора на производительность?

Я пытаюсь найти некоторые простые улучшения производительности на стороне клиента на странице, которая получает миллионы ежемесячных просмотров страниц. Одна из проблем, которые возникают у меня, - использование универсального селектора CSS (*).

В качестве примера рассмотрим очень простой HTML-документ, например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Example</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

Универсальный селектор будет применять указанное выше объявление к элементам body, h1 и p, поскольку они являются единственными в документе.

В целом, я видел бы лучшую производительность от правила, например:

body, h1, p {
  margin: 0;
  padding: 0;
}

Или это будет иметь точно такой же чистый эффект?

Выполняет ли универсальный селектор больше работы, о которой я могу не знать?

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

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

В конечном счете, я надеюсь определить, есть ли что-то по своей сути медленное относительно универсального селектора, или если у него просто плохой рэп из-за необузданного злоупотребления. Если * { margin: 0; } буквально эквивалентно body, h1, p { margin: 0; }, то это ответит на мой вопрос, и я буду знать, что я иду с первым, поскольку он более кратким. Если нет, я хочу понять, почему универсальный селектор работает медленнее.

Ответ 1

В современных браузерах влияние производительности незначительно, если вы не применяете медленные эффекты к каждому элементу (например, box-shadow, вращение по оси z). Миф о том, что универсальный селектор медленный, - похмелье от десяти лет назад, когда оно было медленным.

Ссылка: http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx

Ответ 2

Я понимаю, что подстановочные знаки имеют влияние на производительность, но на небольших сайтах влияние незначительно. Подстановочные знаки - очень полезные инструменты для создания сайта на основе прогрессивного улучшения. Очевидно, что использование чего-то вроде HTML * действительно влияет на производительность на больших сайтах, но делает его более конкретным, например #element_id *, помогает быстро сделать универсальные изменения дочерних элементов.

Подстановочный знак существует по какой-то причине. Вы просто должны понимать, что использование его будет более выгодным, чем его использование. Это зависит от контекста.

При создании шаблонов CSS я использую подстановочные знаки и общие селектора. Это также отличный способ быстро настроить ряд элементов внутри незнакомой темы WordPress, используя пользовательские стили.

Даже Bootstrap, популярный и оптимизированный, использует подстановочные знаки при правильных обстоятельствах.

Ссылки:

http://getbootstrap.com/css/
Gustafson, A. 2015. Адаптивный веб-дизайн: создание богатого опыта с прогрессивным улучшением. Беркли, (Калифорния): Новые всадники.

Ответ 3

Избегание универсальных селекторов всегда ускоряет рендеринг страниц. Подстановочный знак * медленный, особенно когда ваши страницы становятся сложными гнездами, а ваш элемент подсчитывает стремительный рост.

Вы всегда должны указывать идентификатор до самого низкого уровня, который вы возможно можете (я понимаю, что это становится почти невозможным, особенно при работе с такими вещами, как результаты базы данных). Но когда вы используете селектора типа

.mysuperclass ul li p a

У вас есть класс, за которым следуют четыре общих селектора - это означает, что для каждого элемента .mysuperclass движок рендеринга должен проходить через каждый элемент этого родителя, ищущий эти правила.

Короче говоря, мой ответ должен быть как можно более конкретным с вашим CSS, и разверните, насколько это возможно, в DOM с помощью ваших селекторов. Избегайте подстановочных знаков и дженериков.