哪个 jQuery 多元素选择器优化得更好

Posted 2023-05-09

【中文标题】哪个 jQuery 多元素选择器优化得更好

【英文标题】：Which jQuery selector for multiple elements is better optimized

【发布时间】：2019-08-13 17:16:58

【问题描述】：

我有一个根据 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()

这个特定示例不会因为效率较低的方式而受到影响，但我在代码中的其他地方将回调函数应用于更大的表，这可能会有所不同。

【问题讨论】：

您需要测试它们以查看哪个性能更高。只看这两个，我会说第一个在 DOM 上性能更高，因为第二个 find() 在缩小的范围内运行，但第二个可能表现更好，因为它是单个操作。但这是你必须自己测试的东西，然后得出结论是否有任何时差如此重要。

并参考 Optimize Selectors 获取有关该主题的一些 jQuery 文档。

从我在大型 DOM 上的经验来看，这两者都不是最好的，尤其是这是真的。但是，请同时添加 html，以便我们在这里更好地为您提供帮助。

【参考方案1】：

参考这里：https://***.com/a/16423239/125981 现在这不是您的问题的完全重复，但将有助于解释您的问题作为补充。

第二个并不好，因为它会做这一切（我描述）两次，所以不是那个。现在如何实际改进第一个......

既然您提到了“多个”，那么我们首先获取对您的表的引用，然后将其缓存在一个变量中以避免多个 DOM 命中。

let myResultsThing = $('#tblResults');

现在我们有了 ID 引用的元素（这是最快的选择器）

为什么？让我们谈谈那个。这里使用的 Sizzle 引擎使用从右到左的选择器，所以 $("#tblResults tbody tr td") 表示的是 1. 查找所有 td，2. 过滤 td 中的 tr，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 元素选择器，但我将把它留给您作为练习，因为我们在这里没有可以推测的标记.