css - 为什么像 a[title ="home"] 这样的选择器比使用 class 慢？

Question

我看了很多CSS性能方面的文章，比如；

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

我明白为什么这样的选择器不好

#social a {
}

由于浏览器将首先读取 a，然后被迫循环遍历页面中的所有 标记。

但为什么像 a[title="home"] 这样的选择器比使用 class 慢？

我假设浏览器会创建某种索引，以便能够找出哪些元素具有特定类(正确？)。

但是浏览器不应该也索引哪些元素具有特定属性吗？ (例如标题)？

我的问题是；为什么在使用诸如 a[title="home"] 之类的选择器时，与使用 class 相比，CSS/元素的查找速度要慢得多？浏览器做了什么或如何操作才能使结果慢得多？

Answer 1

浏览器实现者优化了最常见的情况。由于类非常频繁地用于匹配样式，因此它们必须尽可能高效地实现这一点。当他们在 CSS 中加载时，他们会索引类以实现这一点。

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

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