new Image vs. createElement('img')

JavaScript performance comparison

Revision 3 of this test case created by Jason Miller and last updated

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var img = document.createElement('img');
  document.body.appendChild(img);
  
  var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
  
  var cacheImage = new Image();
  var cacheImageEl = document.createElement('img');
  

};

Benchmark.prototype.teardown = function() {
  document.body.removeChild(img);

};
</script>

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
new Image
img.src = '';
//var cacheImage = new Image();
cacheImage.src = '';
cacheImage.onload=function(){
  //img.src = this.src;
  //cacheImage = null;
  //deferred.resolve();
};
cacheImage.src = url;
img.src = cacheImage.src;
pending…
createElement
img.src = '';
//var cacheImage = document.createElement('img');
cacheImageEl.src = '';
cacheImageEl.onload=function(){
  //img.src = this.src;
  //cacheImage = null;
  //deferred.resolve();
};
cacheImageEl.src = url;
img.src = cacheImageEl.src;
pending…
Direct src Assignment
img.style.visibility='hidden';
img.src = '';
img.onload=function(){
  img.style.visibility='hidden';
  img.onload=null;
  //deferred.resolve();
};
img.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