offscreen vs display none

JavaScript performance comparison

Test case created by DK

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  var ele = function() {
  var node = document.createElement('div');
  document.body.appendChild(node);
  node.style.display = 'block';
  node.style.position = 'absolute';
  node.style.top = 0;
  node.style.left = 0;
  this.node = node;
  return this;
  }
  
  ele.prototype.hide = function() {
  this.node.style.display = 'none';
  }
  
  ele.prototype.offscreen = function() {
  this.node.style.left = -10000;
  }
  
  ele.prototype.reset = function() {
  this.node.style.display = 'block';
  this.node.style.top = 0;
  this.node.style.left = 0;
  }
  
  var i = 100;
  objs = [];
  while ( i-- ) {
  objs.push(new ele());
  }

};

Benchmark.prototype.teardown = function() {
  var i = 100;
  
  while ( i-- ) {
  objs[i].reset();
  }

};
</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
hide
var i = 100;
while ( i-- ) {
objs[i].hide();
}
pending…
offscreen
var i = 100;
while ( i-- ) {
objs[i].offscreen();
}
pending…

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

Compare results of other browsers

0 Comments