我看了很多CSS性能方面的文章,比如;
我明白为什么这样的选择器不好
#social a {
}
由于浏览器将首先读取 a,然后被迫循环遍历页面中的所有 标记。
但为什么像 a[title="home"] 这样的选择器比使用 class 慢?
我假设浏览器会创建某种索引,以便能够找出哪些元素具有特定类(正确?)。
但是浏览器不应该也索引哪些元素具有特定属性吗? (例如标题)?
我的问题是;为什么在使用诸如 a[title="home"] 之类的选择器时,与使用 class 相比,CSS/元素的查找速度要慢得多?浏览器做了什么或如何操作才能使结果慢得多?
最佳答案
浏览器实现者优化了最常见的情况。由于类非常频繁地用于匹配样式,因此它们必须尽可能高效地实现这一点。当他们在 CSS 中加载时,他们会索引类以实现这一点。
由于像 title="home"
这样的随机选择器并不经常使用,因此可以使用更简单的搜索来实现它们。它不会对性能产生太大影响,因为它很少被使用。
类在浏览器中也需要特殊处理,因为一个元素可能有多个类,例如class="foo bar baz"
。解析文档时,浏览器需要将其拆分,以便它可以将它们中的任何一个与 CSS 选择器匹配。
关于css - 为什么像 a[title ="home"] 这样的选择器比使用 class 慢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18529149/