Самый быстрый CSS-селектор?

Question

Учитывая, что у меня есть всплывающее окно с идентификатором «всплывающее» и в нем две кнопки, одна слева и одна справа, с классом «popupbutton», какое из этих правил CSS наиболее эффективно:

#popup a.popupbutton

#popup .popupbutton

a.popupbutton

.popupbutton

Answer 1

.popupbutton

Класс будет быстрее. Но когда вы приступаете к этому, вы экономите себе что-то вроде 20-50 мс (что может иметь или не иметь значение).

Был проведен довольно хороший тест, о котором вы можете прочитать здесь, который рассматривает разницу в скорости селектора CSS в разных браузерах: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Среднее замедление во всех браузерах составляет 50 мс, а если мы посмотрим на большие (IE 6 и 7, FF3), средняя дельта составляет всего 20 мс. Для 70% или более современных пользователей улучшение этих селекторов CSS принесет улучшение только на 20 мс.

Как видно из статьи, разница в скорости селектора довольно низкая, и эти тесты были направлены против довольно надежных примеров DOM.

Answer 2

.popupbutton - самый быстрый селектор, проверьте Google PageSpeed ​​tips о CSS рендеринге

Answer 3

.popupbutton самый быстрый.
Но имейте в виду, что a.popupbutton не то же самое, что .popupbutton. Они будут делать то же самое большую часть времени, но рассмотрим это исключение:

a:link { color: red; }
.popupbutton { color: green; } /* Won't work */
a.popupbutton { color: green; } /* Will work */