0

我目前正在阅读 jQuery 以填补一些知识空白。

查看各种 CSS 选择器，我看到：-

  • #C（任何 ID 为 C 的元素）

    $('#profile')

  • E#C（ID 为 #C 的 E 类型的任何元素）。

    $('div#profile')

我知道特殊性在 CSS 规则的应用中很重要，但鉴于在页面上有重复的 ID 是不好的做法，我想知道为什么存在第二种形式以及如何在 jQuery 中处理它。

它在查询 DOM 时是否具有性能优势？（即立即限制选择范围）。这个问题主要适用于 jQuery，但我也很想知道它是否对渲染引擎等有任何影响。

4

2 回答 2

3

jQuery 有一个专门的“快速路径”来处理#C带有直接document.getElementById. E#C此路径不处理表单的选择器，而是委托给Sizzle库。

因此，我看不出如何E#C在实践中提供任何性能优势，而理论上也没有关于更好性能的论据。确实，E#C要慢得多；在此处查看巨​​大的性能差异¹。

也就是说，E#C选择器当然更具限制性，因此无论选择是由 jQuery 还是任何其他介质完成，两者的行为都会有所不同。即便如此，我从未使用过E#C（或见过使用过）；我想不出任何理由在不同的页面上重用一个 id。

¹不可否认，在现实生活中，选择器不会循环运行，因此性能差异并不重要。

于 2012-10-24T18:52:26.577 回答
2

jQuery 使用自下而上的搜索。它从最后一个选择器开始并向上过滤。

例子：

$('#id1 .class1 .class2') 查找 class2 的所有类，然后过滤所有具有 class1 父级的类的结果，然后使用 id 为 id1 的父级进一步过滤

$('#profile') 和 $('div#profile') 本质上是相同的，大约是毫秒的几分之一。但最好了解性能优势以及如何适当地遍历 DOM。

于 2012-10-24T18:51:47.913 回答