jsopt

Benchmark created on

Preparation HTML

<div id="a"></div>
<div id="wrapper">
    <div id="el-1"></div>
    <div id="el-2"></div>
    <div id="el-3"></div>
</div>
<canvas></canvas>
<script>
  var ctx = document.querySelector('canvas').getContext('2d'),
      doc = document,
      tmp, tmp2 = '',
      tmp3 = '',
      tmp4 = 1,
      tmp5 = 1,
      wnd = window,
      $wrapper = document.querySelector('#wrapper'),
      $el1 = document.querySelector('#el-1'),
      $el2 = document.querySelector('#el-2'),
      $el3 = document.querySelector('#el-3'),
      a1 = [1, 2, 3, 4, 5, 6, 7, 8, 9],
      a2 = [1, 2, 3, 4, 5, 6, 7, 8, 9],
      i, c;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
[A] getting global var
tmp = window;
ready
[B] getting local var
tmp = wnd;
ready
[A] getting element by id
tmp = doc.getElementById('a');
ready
[B] getting element by tag name
tmp = doc.getElementsByTagName('div')[0];
ready
[A] unoptimized reflow
$el1.style.border = 'solid 1px red';
$el1.style.display = 'inline-block';
for (var i = 0; i < 10000; i++) {
 $el1.innerHTML = Math.random() * 1e10;
 $el1.style.width = ~~ (Math.random() * 200) + 'px';
 $el1.style.height = ~~ (Math.random() * 200) + 'px';
}
ready
[B] optimized reflow
$el1.style.border = 'solid 1px red';
$wrapper.style.display = 'none';
for (var i = 0; i < 10000; i++) {
 $el1.innerHTML = Math.random() * 1e10;
 $el1.style.width = ~~ (Math.random() * 200) + 'px';
 $el1.style.height = ~~ (Math.random() * 200) + 'px';
}
$el1.style.display = 'inline-block';
ready
[A] string concat via +
tmp2 += 'a' + 'b';
ready
[B] string concat via concat
tmp3 = tmp3.concat('a', 'b');
ready
[A] mul 2
tmp4 *= 2;
ready
[B] lsh 1
tmp5 = tmp5 << 1;
ready
[A] slow selector
tmp = document.querySelector('#wrapper div:first-child');
ready
[B] slow selector
tmp = document.getElementById('wrapper').querySelector('div:first-child');
ready
[C] fast selector with cache
tmp = $wrapper.querySelector('div')[0];
ready
[A] loop unoptimized
for (i = 0; i < a1.length; i += 1) {
 a1[i]++;
}
ready
[B] loop optimized
for (i = 0, c = a2.length; i < c; i += 1) {
 a2[i]++;
}
ready
[C] loof foreach
a1.forEach(function(i) {
 i++;
});
ready

Revisions

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