操作因 DOM 复杂性而降级？答案

【问题标题】：Operations degraded by DOM complexity?操作因 DOM 复杂性而降级？
【发布时间】：2014-10-30 21:19:16
【问题描述】：

我偶然发现了这个jsperf。

它测试编辑仅通过 id 访问或通过缓存选择器通过 id 访问的元素的 html 的相对性能。

编辑的元素深度为 17 级。

jsperf 实际上报告 not 使用缓存的选择器更快。

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
</script>
<div id="container"><div><div><div><div><div><div>
<div><div><div><div><div><div><div>
  <div>
    <div>
    </div>
    <div>
    </div>
    <div class="robotarm">
    </div>
    <div>
      <div id="robotarm">
      </div>
    </div>
    <div class="robotarm">
    </div>
    <div class="robotarm">
    </div>
    <div>
    </div>
  </div>
</div>
</div></div></div></div></div></div></div>
</div></div></div></div></div></div></div>

<div><div><div><div><div><div><div>
</div></div></div></div></div></div></div>
<div><div><div><div><div><div><div>
</div></div></div></div></div></div></div>
<div><div><div><div><div><div><div>
</div></div></div></div></div></div></div>
<div><div><div><div><div><div><div>
</div></div></div></div></div></div></div>
<script>
  Benchmark.prototype.setup = function() {
    function cached() {
      $div = $('#container');
      for (i = 0; i < 1000; i++){
        $div.find('#robotarm').html('foo');
      }
    }

    function raw() {
      for (i = 0; i < 1000; i++){
        $('#robotarm').html('foo');
      }
    }
  };
</script>

但是，性能很糟糕。为什么，为什么不使用缓存选择器进行选择会更好？

【问题讨论】：

删除对 .html 的调用显着增加了两者的每秒操作数。它当然不会改变结果

标签： javascript performance dom caching jquery-selectors

【解决方案1】：

该选择器没有任何“缓存”，命名完全错误。

在“原始”版本中，它们有：

$('#robot-arm').html('foo');

将优化到

$(document.getElementById("robot-arm")).html('foo');

但“缓存”版本有：

$div = $('#container');

然后

$div.find('#robot-arm').html('foo');

这不能优化为document.getElementById 调用，因为搜索的范围是#container 元素。但是getElementById 是从 DOM 获取元素的最快方式。所以当然它更慢，非常明显。

“缓存”版本如下所示：

var $div = $("#robot-arm");

然后

$div.html('foo');

这比测试的“原始”版本（略）快：http://jsperf.com/using-id-selector-with-or-without-cached-scope/4

【讨论】：