new Image vs. createElement('img')

JavaScript performance comparison

Revision 18 of this test case created by Jon B

Preparation code

<img src="fake.jpg" />
<div id="enterme"></div>
      
<script>
Benchmark.prototype.setup = function() {
  var existingimg = document.getElementsByTagName('img')[0];
  var enterme = document.getElementById('enterme');
  
  var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

};
</script>

Preparation code output

<img src="fake.jpg" /> <div id="enterme"></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
change src
existingimg.onload=function(){
};
existingimg.src = url;
pending…
new img
var newimg = document.createElement('img');
enterme.appendChild(newimg);

newimg.onload=function(){
};
newimg.src = url;
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