Question

我偶然发现了jsperf。

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

编辑的元素深度为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>

然而，表现非常恶劣。为什么，为什么没有缓存选择器选择会更好？

Answer 1

没有什么＆＃34;缓存＆＃34;关于那个选择器，命名是完全错误的。

在＆＃34; raw＆＃34;版本，他们有：

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

将优化到

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

但是＆＃34;缓存＆＃34;版本有：

$div = $('#container');

然后

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

无法针对document.getElementById调用进行优化，因为搜索范围限定为#container元素。但getElementById是从DOM 获取元素的最快单一方式。所以当然它速度较慢，非常明显。

A＆＃34;缓存＆＃34;版本看起来像这样：

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

然后

$div.html('foo');

这比（＆＃34; raw＆＃34;测试版本：http://jsperf.com/using-id-selector-with-or-without-cached-scope/4

DOM复杂性导致运营降级？

1 个答案: