Chrome - nth-child 规则太慢答案

【问题标题】：Chrome - nth-child rule is too slowChrome - nth-child 规则太慢
【发布时间】：2014-05-13 09:12:26
【问题描述】：

我一直在使用 jQuery 测试 DOM 选择性能。在将 $("ul li:nth-child(999)") 与 $("ul li").eq(999) 进行比较后，我得到了一些问题

$("ul li:nth-child(999)");
$("ul li").eq(999);

请点击以下链接查看我的详细测试结果：

JSPerf Test Result

尤其是 Chrome 在操作 nth-child 伪类时表现不佳。
我想知道为什么会出现这样的结果。
我能得到任何关于它的算法、机制或参考吗？

如果有人帮助我，我将不胜感激。
谢谢。

【问题讨论】：

标签： css google-chrome css-selectors pseudo-class

【解决方案1】：

你的测试结果很有趣。也希望能知道基础算法差异的正确答案。

不说这两个函数的算法，不知道有没有帮助。
但我认为只是功能上......

首先，这两个功能略有不同。

$().eq 是 jQuery 方法。它是自己的 jQuery 方法。
有点不同，':nth-child' 是 CSS 选择器。它被传递给 jQuery 引擎，优化了几乎与 CSS 引擎一样的性能。

这两件事在功能上是不同的。

根据CSS3 :nth-child() Selector，

:nth-child(n) 选择器匹配第 n 个子元素的每个元素，无论类型如何，其父元素。

和 jQuery eq() Method,

eq() 方法返回一个元素，该元素具有特定索引号 的选定元素。

例如，

<body>
    <div> div 1 </div>
    <div> div 2 </div>
    <div> div 3 </div>
    <div>
        div 4
        <div> div 5</div>
        <div> div 6</div>
    </div>
</body>

如果你使用$('body div').eq(2)，它会根据索引2返回<div> div 2 </div>的jQuery对象。
否则，如果您使用$('body div:nth-child(2)')，它将返回<div> div 2 </div> '和<div> div 6 </div>' 的jQuery 对象集。

因为 'nth-child(n)' css 选择器返回 '其父级' 的第 n 个子级。

但我也不知道导致 eq() 方法 比其他方法慢的根本原因是什么。
如果没有帮助，我很抱歉。

【讨论】：

【解决方案2】：

我在任何地方都找不到关于这个问题的任何答案，认为它可能是一个未知错误。于是我给 Chromium Team 发了一封邮件，这个 issue 已经在 Chromium 论坛上正式售票了。

您可以在以下链接中查看第 n 个子问题的票证：

https://code.google.com/p/chromium/issues/detail?id=364081&q=nth&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

谢谢。

【讨论】：