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

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

40 голосов
/ 01 июня 2010

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

Ответы [ 3 ]

53 голосов
/ 17 ноября 2012

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

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

1 голос
/ 11 марта 2016

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

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

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

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

Ссылки:

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

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

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

.mysuperclass ul li p a

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

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

...