javascript - 处理大型集合时优化 jQuery 选择器/addBack()

Question

我使用 jQuery 有意从一个可能很大的 html 表中的元素中删除 css 类。请参阅下文，了解我这样做的原因。

目前我是这样做的:

var tableElements = $("#TreeListElemente").find("*").addBack();
tableElements.removeClass("dxtl dxtl__B2 dxtl__B0 dxtlSelectionCell dxtlHeader dxtl__B3 dxtlControl dx-wrap dxtl__IM dxeHyperlink");

表格有时很大并且有很多元素。我想加快页面加载/DOM 操作。

IE 的内置 Javascript 分析器告诉我，尤其是 .addBack() 很慢。它似乎做了某种排序，这对我的用例来说完全没有必要。我能摆脱它吗？除了 addBack() 之外，还有其他方法可以包含所选元素本身吗？

IE javascript 探查器:大约 60000 个元素的集合的执行时间。包含时间在第三列

或者有没有另一种更有效的方法来从大量元素中删除类，选择一个元素、它本身和所有子元素？

注意:我为什么要这样做:我正在使用带有自己样式的 DevXpress TreeList 组件。在服务器端没有简单的方法来“取消样式”，因此我选择在客户端进行，如上所示。最后，我选择了 TreeList、所有子元素，并从中删除了相关的 css 类。

更新/解决方案 1

我已经成功实现了 Frédéric Hamidi 提出的解决方案，并取得了相当大的进步:

IE javascript 探查器:使用 Frederic 的提议，大约 60000 个元素的集合的执行时间。包含时间在第三列

addBack() 操作所需的时间刚刚过去，剩下的只是其他内容。这意味着总体上提高了 4 倍以上。耶!

更新/解决方案 2

我还实现了 A. Wolff 提出的解决方案并获得了轻微的额外改进:

IE javascript 探查器:使用 A. Wolff 的提议，大约 60000 个元素的集合的执行时间。包含时间在第三列

find() 操作所需的时间已经过去，只剩下其他内容了。这意味着在我的机器上有大约 10 毫秒的轻微改进。酷!

这是我现在使用的解决方案:

$("#TreeListElemente, #TreeListElemente [class]").removeClass("dxtl dxtl__B2 dxtl__B0 dxtlSelectionCell dxtlHeader dxtl__B3 dxtlControl dx-wrap dxtl__IM dxeHyperlink");

Answer 1

addBack()确实执行排序以将匹配的元素按文档顺序排列。简单的选择，add() , 做完全相同的事情，所以它不会解决你的问题。

但是，文档足以提供解决方案:

To create a jQuery object with elements in a well-defined order and without sorting overhead, use the $(array_of_DOM_elements) signature.

因此，为了避免这种开销，您可以这样写:

var ancestor = $("#TreeListElemente"),
    tableElements = $(ancestor.find("*").get().concat(ancestor[0]));

get()和 concat()不过，最终会在引擎盖下构建两个阵列，因此会影响性能。最终结果可能比您当前的方法更快，具体取决于您匹配的元素数量。