Вопрос по css, html, css-selectors, performance – Какое влияние на производительность оказывает универсальный селектор?

39

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

С точки зрения производительности, когда этоКогда-либо лучше глобально отключить (или включить) характеристику длявсе только чтобы в итоге переустановить его? Изучение настроек браузера по умолчанию не займет у вас много времени - вы можете получить подсказки по «сбросу» CSS-файлов, но я бы не стал так далеко использовать его. Браузеры с открытым исходным кодом имеют CSS по умолчанию с открытым исходным кодом, которые вы можете посмотреть. reisio
Я не уверен, что вы поняли мой вопрос. Я не собираюсь переустанавливать и затем повторно применять стили здесь, а скорее применять правило к каждому элементу на странице. Мой вопрос заключается в том, является ли технически то же самое, что использовать универсальный селектор, как и для выбора каждого элемента по отдельности, или если по какой-либо причине происходит снижение производительности. Bungle
* буквально не эквивалентноbody, h1, p по понятным причинам.только Причина, по которой он работает медленнее, заключается в том, что вы применяете стили ко всему, тогда как любые другие селекторы ограничивают вас определенным подмножеством элементов в DOM. Но реальный вопрос в том, намного ли медленнее браузер перестает отвечать на запросы слишком большого количества стилей? Я очень сомневаюсь в этом. Смотрите также:* {box-sizing: border-box} FTW BoltClock

Ваш Ответ

0   ответов

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