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

Я пытаюсь найти несколько простых настроек производительности на стороне клиента на странице, которая получает миллионы просмотров страниц в месяц. Меня беспокоит использование универсального селектора 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;
}

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

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

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

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

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


html css performance css-selectors
person Bungle    schedule 01.06.2010    source источник
comment
С точки зрения производительности, когда лучше когда-либо глобально отключить (или включить) характеристику для всего только для того, чтобы в конечном итоге снова установить ее? Изучение настроек браузера по умолчанию не займет у вас много времени - вы можете получить подсказки при сбросе файлов CSS, но я бы не стал так далеко использовать их. Браузеры с открытым исходным кодом имеют значения по умолчанию CSS с открытым исходным кодом, на которые вы можете посмотреть.   -  person reisio    schedule 01.06.2010
comment
Не уверен, что вы поняли мой вопрос. Я не хочу сбрасывать, а затем повторно применять стили здесь, а скорее применяю правило к каждому элементу на странице. Мой вопрос заключается в том, является ли использование универсального селектора технически таким же, как и выбор каждого элемента по отдельности, или это приводит к снижению производительности по какой-либо причине.   -  person Bungle    schedule 02.06.2010
comment
* буквально не эквивалентно body, h1, p по очевидным причинам. Единственная причина, по которой он работает медленнее, заключается в том, что вы применяете стили ко всему, тогда как любые другие селекторы ограничивают вас определенным подмножеством элементов в DOM. Но реальный вопрос заключается в том, действительно ли браузер перестанет отвечать из-за применения слишком большого количества стилей намного медленнее? Я очень в этом сомневаюсь. См. Также: * {box-sizing: border-box} FTW   -  person BoltClock    schedule 23.07.2012

Ответы (3)


arrow_upward
73
arrow_downward

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

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

person mxcl    schedule 17.11.2012

arrow_upward
3
arrow_downward

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

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

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

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

Использованная литература:

  • http://getbootstrap.com/css/
  • Густафсон, А. 2015. Адаптивный веб-дизайн: создание богатого опыта с прогрессивным улучшением. Беркли, (Калифорния): Новые гонщики.
person Adobe-Wan Kenobi    schedule 11.03.2016

arrow_upward
0
arrow_downward

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

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

.mysuperclass ul li p a

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

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

person Jarrod Nettles    schedule 01.06.2010
comment
Спасибо, Джаррод. Я думаю, что мог бы лучше подчеркнуть в своем вопросе, что я действительно хочу настроить таргетинг на каждый элемент на странице с помощью моих правил (ов) CSS, то есть универсальный селектор, как я понимаю, это именно то, что я хочу в этом случае. Поскольку я также всегда слышал, что универсальный селектор работает медленно, я надеюсь узнать, присуща ли эта медленность селектору, или она просто основана на его типичном использовании (например, таблица стилей быстрого и грязного сброса, за которой будет следовать путем переопределения стилей). - person Bungle; 02.06.2010
comment
Понятно. Я бы посоветовал провести несколько тестов скорости с помощью инструментов разработчика Chrome. Протестируйте это и посмотрите результаты использования селектора с подстановочными знаками по сравнению с явным определением тега. Chrome предоставит вам подробную информацию о том, сколько времени занимает каждый процесс. - person Jarrod Nettles; 02.06.2010
comment
Я бы посоветовал не быть как можно более конкретным с вашими селекторами. В будущем, когда вы захотите внести изменения в стили или у вас будет больше исключений, вы захотите переопределить эти селекторы, что становится все сложнее, чем конкретнее они будут. Сохраняйте низкую специфичность и используйте больше селекторов элементов и классов. numiko.com/labs/2011/07/css-specificity-wars - person chharvey; 24.01.2014
comment
Абсолютно согласен с чхарви, большая специфичность = большее раздувание + больше усилий по поддержанию и расширению. Мое общее правило - никогда не использовать более двух уровней вложенных правил. Это абсолютно достижимо даже в крупных проектах, особенно при использовании такой методологии, как БЭМ (getbem.com) - person Mike; 01.08.2016
comment
Это ужасный совет. Это ОЧЕНЬ медленно, когда нужно искать каждый элемент вложенности. Вы используете .mysuperclass a, и все. - person Jiulin Teng; 09.05.2021