gpt4 book ai didi

css - Chrome - 第 n 个 child 规则太慢

转载 作者:行者123 更新时间:2023-11-28 12:54:36 25 4
gpt4 key购买 nike

我一直在使用 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 伪类时表现不佳。
我想知道为什么会造成这样的结果。
我能得到任何算法、机制或引用资料吗?

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

最佳答案

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

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

首先,这两个函数略有不同。

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

这两个东西在功能上是不同的。

根据 CSS3 :nth-child() Selector ,

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

jQuery eq() Method ,

The eq() method returns an element with a specific index number of the selected elements.

例如,

<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) , 它返回 <div> div 2 </div> 的 jQuery 对象取决于索引 2.
否则,如果您使用 $('body div:nth-child(2)') , 它返回 <div> div 2 </div> 的 jQuery 对象集<强>'和<div> div 6 </div> '。

因为 'nth-child(n)' css 选择器返回 'its parent' 的第 n 个 child 。

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

关于css - Chrome - 第 n 个 child 规则太慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22805478/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com