inject vs apply

JavaScript performance comparison

Revision 5 of this test case created by Wonderfool

Preparation code

<script src="https://hostme.co.il/vein.js"></script>
<div id="container"><div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
<div class="myHeader">My Header</div>
</div>
      
<script>
Benchmark.prototype.teardown = function() {
  var nodes = document.querySelectorAll('.myHeader'),
    i = nodes.length;
  
  while (i--) {
    nodes[i].setAttribute('style', '');
  }
  vein.inject('h1.myHeader', null);

};
</script>

Preparation code output

<div id="container"><div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> <div class="myHeader">My Header</div> </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Application
var nodes = document.querySelectorAll('.myHeader'),
  i = nodes.length;

while (i--) {
  nodes[i].style.color = 'red';
  nodes[i].style.fontSize = '3em';
}
pending…
Injection
vein.inject('h1.myHeader', {
  'color': 'red',
  'font-size': '3em'
});
pending…

Compare results of other browsers

Revisions

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

0 Comments

My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header
My Header