CSS Style Overwrite vs Data Check

JavaScript performance comparison

Test case created by Jack Rugile

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var cell = new Entity();
   
    function Entity() {
      this.x = 0;
      this.elem = document.createElement( 'div' );
      document.body.appendChild( this.elem );
    }
   
    Entity.prototype.update = function() {
      this.x += 1;
      this.lx = this.x;
    };
   
    Entity.prototype.render1 = function() {
      this.elem.style.left = this.x + 'px';
    };
   
    Entity.prototype.render2 = function() {
      if( this.x != this.lx ) {
        this.elem.style.left = this.x + 'px';
      }
    };
};

Benchmark.prototype.teardown = function() {
    cell.update();
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Blind CSS Overwrite
cell.render1();
pending…
Check Data
cell.render2();
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

Add a comment