caching $('#') (v2)

Revision 2 of this benchmark created by devu on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="d1">
  1
</div>
<div id="d2">
  2
</div>
<div id="d3">
  3
</div>
<div id="d4">
  4
</div>
<div id="d5">
  5
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
without caching
$('#d1');
$('#d2');
for (var i = 0; i < 1000; i++) {
  $('#d3').html(i);
}
ready
with caching
$div1 = $('#d1');
$div2 = $('#d2');
$div3 = $('#d3');
for (var i = 0; i < 1000; i++) {
  $div3.html(i);
}
ready
with array caching
_$ = {};
_$['div1'] = $('#d1');
_$['div2'] = $('#d2');
_$['div3'] = $('#d3');
for (var i = 0; i < 1000; i++) {
  _$['div3'].html(i);
}
ready
pure JS
var object = {};
object['div1'] = document.getElementById('d1');
object['div2'] = document.getElementById('d2');
object['div3'] = document.getElementById('d3');
for (var i = 0; i < 1000; i++) {
  object['div3'].innerHTML = i;
}

//PS this is Object not an array
ready
Pure JS array
var array= new Array();
array[0] = document.getElementById('d1');
array[1] = document.getElementById('d2');
array[2] = document.getElementById('d3');
for (var i = 0; i < 1000; i++) {
  array[2].innerHTML = i;
}

//this is Array
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Prinz on
  • Revision 2: published by devu on