Rendering Placeholders

JavaScript performance comparison

Test case created

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    var recycledPlaceholder;
    var seed = 0;
   
    function appendRemove(placeholder) {
      document.body.appendChild(placeholder);
      document.body.removeChild(placeholder);
      seed = (++seed % 256);
    }
   
    function recyclePlaceholder() {
      if (!recycledPlaceholder) {
        recycledPlaceholder = document.createElement('div');
      }
      stylePlaceholder(recycledPlaceholder);
      return recycledPlaceholder;
    }
   
    function rebuildPlaceholder() {
      var placeholder = document.createElement('div');
      stylePlaceholder(placeholder);
      return placeholder;
    }
   
    function stylePlaceholder(placeholder) {
      var style = placeholder.style;
      style.top = seed + 'px';
      style.backgroundColor = 'rbg(255, 255, ' + (seed) + ')';
      style.height = (seed) + 'px';
      style.width = (seed) + 'px';
    }
};
</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
Recycling
appendRemove(recyclePlaceholder());
 
pending…
Rebuilding
var placeholder = rebuildPlaceholder();
appendRemove(placeholder);
placeholder = null;
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