Почему селектора, такие как [title = "home"] медленнее, чем использование класса?

Question

Я читал много статей о производительности CSS, таких как;

• Efficiently Rendering CSS
• Writing efficient CSS selectors
• Writing efficient CSS

Я понимаю, почему селекторы, как это плохо

#social a { 
} 

В браузере будет читать первым, а затем вынужден через все <a> теги на странице.

Но почему селектор, таких как а [название = «домой»] медленнее, чем при использовании класса?

Я предполагаю, что браузер создает какой-то индекс, чтобы понять, какие элементы имеют определенный класс (правильно?).

Но не должны ли браузеры индексировать, какие элементы имеют определенный атрибут? (например, название)?

Мой вопрос:; почему CSS/элемент выглядит медленнее при использовании селекторов, таких как a [title = "home"] по сравнению с использованием класса ? Что и как работает браузер, чтобы результат был намного медленнее?

Answer 1

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

Поскольку случайные селекторы, такие как title="home", не используются очень часто, они могут уйти от реализации с использованием более простых поисков. Это не повлияет на производительность, поскольку редко используется.

Классы также требуют специальной обработки в браузере, поскольку элемент может иметь несколько классов, например. class="foo bar baz". При анализе документа браузер должен разбить его так, чтобы он мог сопоставить любой из них с селекторами CSS.

Answer 2

Benchmark

Выводы

В селектор атрибута большинстве случаев»с неизвестным атрибутом, например, [a = "b"] 'и' селектор атрибутов с известным атрибутом, например. [title = "a"] 'появился в категории «3 худших». Можно с уверенностью сказать, что вам следует избегать этих селекторов.