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

Question

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

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

41

html css performance css-selectors

задан TylerH 4 August 2016 в 19:57

1 ответ

Другие вопросы по тегам:

html css performance css-selectors

Похожие вопросы:

score 1 · Answer 1

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

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

.mysuperclass ul li p a

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

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