jQuery操作DOM元素集：使用filter()还是each()处理效率更高？

页面加载时默认展示一组DOM元素，需要在加载完成后隐藏特定元素。

HTML结构 #

<div id="container">
    <ul>
        <li id="blue">BLUE</li>
        <li id="red">RED</li>
        <li id="green">GREEN</li>
        <li id="orange">ORANGE</li>
        <li id="violet">VIOLET</li>
        <li id="teal">TEAL</li>
        <li id="black">BLACK</li>
    </ul>
</div> 

两种实现方案 #

方案1 #

var valid = ['red', 'green', 'blue'];
var $colors = $('li');
$colors
  .hide()
  .filter(function() {
      return valid.includes(this.id);
  })
  .show();

方案2 #

var valid = ['red', 'green', 'blue'];
var $colors = $('li');
$colors.show();
$colors.each(function() {
    if(!valid.includes(this.id)) { // 注：原代码缺少右括号，此处已补全语法
        $(this).hide();
    }
});

方案1的效率远高于方案2，核心差异来自DOM重排/重绘的次数：

• 方案1仅执行2次批量DOM操作：第一次全量隐藏所有li元素，第二次仅展示匹配条件的3个合法元素，全程只有2次重排/重绘，性能开销和li总数量无关
• 方案2在遍历阶段会对每个不符合条件的元素单独执行hide操作，若有上千个元素，就会触发近千次独立DOM操作，频繁的重排/重绘会带来极高的性能损耗

如果实际需要处理的元素过千，可以把合法id数组转换为Set，进一步降低遍历阶段的判断开销：const valid = new Set(['red', 'green', 'blue'])，可以将includes的O(n)时间复杂度降到has的O(1)。

内容的提问来源于stack exchange，提问作者Daveh0