cssText vs style (v24)

Revision 24 of this benchmark created on

Description

Comparing the performance of using style against changing directly cssText. Also compared against with just adding a css classname.

Preparation HTML

<div id="element">
</div>
<style type=”text/css”>
  .newClass { left: 10px; top:50px; }
</style>

Setup

var element = document.getElementById('element');
    
    // Reset
    element.style.left = '0px';
    element.style.top = '0px';
    
    var left = 10;
    var top = 50;

Test runner

Ready to run.

Testing in
TestOps/sec
.style (left -> top)
element.style.left = left + 'px';
element.style.top = top + 'px';
ready
.style (top -> left)
element.style.top = top + 'px';
element.style.left = left + 'px';
ready
.cssText (left -> top, concat)
element.style.cssText += '; left: ' + left + 'px; top: ' + top + 'px;';
ready
.cssText (left -> top)
element.style.cssText += '; left: 10px; top: 50px;';
ready
.cssText (top -> left, concat)
element.style.cssText += '; top: ' + top + 'px; left: ' + left + 'px;';
ready
.cssText (top -> left)
element.style.cssText += '; top: 50px; left: 10px;';
ready
change css class
element.className = '';
element.className = 'newClass';
ready

Revisions

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