为什么诸如[title =“home”]之类的选择器比使用类慢？

Question

我一直在阅读很多CSS性能文章，例如;

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

我明白为什么像这样的选择器是坏的

#social a {
}

由于浏览器首先会读取 a ，因此必须循环浏览页面中的所有＆lt; a＆gt; 标记。

但是为什么选择器如 a [title =“home”] 比使用类慢？

我假设浏览器创建了某种索引，以便能够找出哪些元素具有某个类（正确？）。

但是浏览器是否也应该索引哪些元素具有某种属性？ （例如 title ）？

我的问题是;与使用类相比，使用 a [title =“home”] 等选择器时，为什么CSS /元素会变慢？浏览器的行为是什么或如何使结果慢得多？

Answer 1

浏览器实现者可以优化最常见的情况。由于类经常用于匹配样式，因此它们必须尽可能高效地实现它。当他们加载CSS时，他们会对类进行索引以使其成为可能。

由于title="home"之类的随机选择器不经常使用，因此可以使用更简单的搜索来实现它们。它不会对性能产生太大影响，因为很少使用它。

类也需要在浏览器中进行特殊处理，因为元素可能有多个类，例如class="foo bar baz"。在解析文档时，浏览器需要将其拆分，以便它可以匹配CSS选择器中的任何一个。

Answer 2

Benchmark

<强>结论

在大多数情况下，属性选择器具有未知属性，例如[a =“b”]'和'具有已知属性的属性选择器，例如[title =“a”]'出现在'3 Worst'类别中。可以肯定地说你应该避开那些选择器。