Javascript 被DOM复杂性降级的操作？

我偶然发现了这个

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

编辑的元素深度为17层

jsperf实际上报告说，不使用缓存选择器更快

<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>

---

然而，表演是残暴的。为什么，为什么选择时不使用缓存的选择器更好？

该选择器没有缓存内容，命名完全错误

在原始版本中，它们具有：

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

这将得到优化，以

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

但是缓存的版本有：

$div = $('#container');

然后

无法将其优化为document.getElementById调用，因为搜索的范围是容器元素。但是getElementById是从DOM中获取元素的最快方法。当然，它的速度慢了，明显地慢了

缓存版本如下所示：

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

然后

$div.html('foo');

---

这比原始版本的测试稍微快一些：

删除对.html的调用会显著增加这两种测试的每秒操作数。当然，这不会改变结果

$div.html('foo');