Являются ли CSS селекторы большим ударом по производительности?

Question

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

Я говорю о замене селекторов имен классов, таких как .example, на более сложные селекторы, такие как #example div> div: nth-child (3)> p

Answer 1

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

Answer 2

Здесь вы можете найти интересное сообщение в блоге об аргументах с примерами и тестами производительности CSS-селекторов в большинстве распространенных браузеров:

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Это заключение автора:

На основании этих тестов у меня есть следующая гипотеза: для большинства веб-сайтов возможный выигрыш в производительности при оптимизации селекторов CSS будет небольшим и не будет стоить затрат.Существуют некоторые типы правил CSS и взаимодействия с JavaScript, которые могут сделать страницу заметно медленнее.Это где фокус должен быть.

Answer 3

Хит производительности крошечный.

Answer 4

Браузер совпадает с справа налево , и любые неспецифические теги будут вызывать большее снижение производительности. *

1 & Ndash; Медленнее:

.foo p

2 & Ndash; Быстрее

.foo p.bar

В первом примере браузер сопоставляет ВСЕ абзацы, а затем сужает его до тех, чей предок имеет класс foo.

Во втором примере браузер сопоставляет все элементы, имеющие класс bar, затем сопоставляет подмножество, являющееся абзацами, а затем подмножество, предок которого имеет класс foo.

Можно было бы ожидать, что начальный набор второго примера будет меньше, чем в первом примере.

* Имейте в виду, что попадание действительно станет очевидным только при плохо разработанном CSS на страницах, которые очень большие (мегабайты) и / или имеют много-много элементов (например, сотни span с или div с). Небольшие страницы с небольшим количеством элементов не увидят реального & mdash; снижения производительности - даже при плохо написанном CSS.