Is [селектор]> * действительно, что медленный

Question

Итак, я создаю набор виджета JavaScript (jQuery), и я хочу убедиться, что все элементы этих виджетов используют box-sizing: border-box (и да, я знаю это означает, что я могу поддерживать только версию IE версии 8 или выше, с которой я в порядке).

Теперь я слышал, что делать [selector] > * очень медленно, но насколько он медленный?

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

.jg-grid-wrap, 
.jg-grid-content-outer-wrap, 
.jg-grid-colum-actions a, 
.jg-grid-content-wrap, 
.jg-grid-wrap .hide, 
.jg-grid-wrap ul, 
.jg-grid-wrap ul li, 
.jg-grid-header-wrap, 
.jg-grid-header-wrap li, 
.jg-grid-header-wrap .sort-indicator, 
.jg-grid-row, 
.jg-grid-row li, 
.jg-grid-footer-wrap, 
.jg-grid-footer-wrap .column-selection 
.jg-grid-wrap .controls, 
.jg-grid-wrap .controls .first-page-link, 
.jg-grid-wrap .controls .previous-page-link, 
.jg-grid-wrap .controls .next-page-link, 
.jg-grid-wrap .controls .last-page-link, 
.jg-grid-wrap .controls .column-selection-link, 
.jg-grid-wrap .controls .set-page-link, 
.jg-grid-wrap .controls .total-page-count, 
.jg-grid-wrap .controls .record-counts, 
.jg-grid-wrap .controls .record-display-text 
{ 
    box-sizing: border-box; 
} 

, но это было бы намного меньше и легче просто написать:

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

Действительно ли это стоит времени, чтобы перечислить каждый возможный элемент отдельно, потому что [selector] > * действительно так медленно?

UPDATE

В конце концов, я просто хочу, чтобы пойти с:

[class^=jg-] * 
{ 
    box-sizing: border-box; 
} 

Этот селектор имеет ~ 14% от общего числа 4 мс на основе Google Chrome. Другие немного меньше (~ 4%), но думая об этом, CSS будет последним местом, которое, вероятно, мне нужно будет беспокоиться о производительности (мой код javascript и серверный код будет основной частью узкого места). Если мне действительно нужно оптимизировать мой CSS-хром-профайлер, то когда мне это нужно.

Answer 1

Если вы действительно хотите всех элементов в контейнере с пометкой этого классом, вы хотите

.jg-grid-wrap * 

Оператор > ограничивает матч прямых детей.

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

.jg-grid-wrap div, .jg-grid-wrap form, .jg-grid-wrap ul 

и т. Д., С любыми элементами уровня блока, которые вам действительно интересны. (То есть, вам действительно интересно, имеют ли теги <span> свойство «box-sizing»?)

Профилировщик CSS Chrome может быть очень полезен при поиске дорогих правил CSS. Это должно быть то, что вы исследуете эмпирически, прежде чем беспокоиться об этом слишком много; современные механизмы CSS довольно быстры.

Answer 2

Браузеры оценить CSS справа налево, когда страница (вос) обращается:

.jg-grid-wrap > * 

Это будет в основном соответствовать все элементы на странице в первую очередь; то он проверяет прямого предка всех элементов и сравнивает класс.

Как плохо, как это звучит, это могло быть хуже:

.jg-grid-wrap * 

Для элементов под .jg-grid-wrap это не так уж плохо, но и другие элементы вызывают браузер для обхода дерева элементов вплоть до html в найти предка.

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

Так что мой вывод: просто оставить код в одиночку, то, что кажется оптимальным для человеческого глаза может иметь катастрофические последствия для бедного браузера :)