哪个jQuery选择器可以更好地优化多个元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了哪个jQuery选择器可以更好地优化多个元素相关的知识,希望对你有一定的参考价值。

我有一个动态构造的表,它是根据AJAX调用返回的数据构建的。在构建表的函数结束时,我需要将jQuery UI包装器应用于表中的一些锚元素,由“map-marker”和“th-list”图标标识。哪两个选项更好地优化?

$("#tblResults tbody tr td").find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

要么

$("#tblResults tbody tr td a[data-icon='map-marker'], #tblResults tbody tr td a[data-icon='th-list']").button()

这个特定的例子不会以低效率的方式来做它,但我在我的代码中有其他地方我将回调函数应用于更大的表,并且它可能会有所不同。

答案

有关参考,请参阅此处:https://stackoverflow.com/a/16423239/125981现在,这不是您问题的完全重复,但有助于解释您的问题作为补充。

第二个并不是更好,因为它将完成所有这些(我描述)两次,所以不是没有那个。现在如何真正改善第一个......

既然你提到了“multiple”,那么我们首先得到你的表的引用,然后在变量中缓存它以避免多次DOM命中就是这样做。

let myResultsThing = $('#tblResults');

现在我们有ID引用的元素(这是最快的选择器)

为什么?我们来谈谈这个。这里使用的Sizzle引擎使用右到左选择器,所以这个$("#tblResults tbody tr td")说的是1.找到所有td,2。过滤那些tdtr内的那些,3。过滤那些tbody里面的那些4.过滤器属于id #tblResults表示的元素内的那些

现在,如果你有10张表,其中100张td,每张10行,每张3张tbody,你可以看到这是一项非常繁忙的工作。因此,通过首先隔离ID,我们将很快消除90%以上的努力。

好的,我们上面有表格参考方式。使用它我们可以找到tbody(或所有tbody更精确可能有多个),从而消除页眉和页脚中的任何td

let myTbodies = myResultsThing.find('tbody')
//get into the rest of it
.find('tr td').find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

现在,我可能倾向于实际测试上述所有内容

myResultsThing.find("a[data-icon='map-marker'], a[data-icon='th-list']").button();

根据您的DOM的确切情况,您可以缓存(如我所做的那样)清除TD或A元素选择器,但我会将其留给您作为练习,因为我们没有标记来推测这里。

以上是关于哪个jQuery选择器可以更好地优化多个元素的主要内容,如果未能解决你的问题,请参考以下文章

前端性能优化jQuery性能优化

JQuery颜色选择器[关闭]

高性能jquery的几种优化

单击功能上的多个选择器,如何知道单击了哪个选择器?

优化 jQuery 悬停代码以更好地执行(更流畅的动画)

document.querySelector()方法