cssText vs style (v13)

Revision 13 of this benchmark created by vamp on

Description

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

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
  var element = document.getElementById("element"),
      copy = element.cloneNode();
 
  var getElement = function(){
     var owner = element.parentNode, node = owner.insertBefore(copy.cloneNode(), element);
     owner.removeChild(element);
     return (element = node);
  };
</script>

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

Test runner

Ready to run.

Testing in
TestOps/sec
element.style
var element = getElement();
element.style.left = '10px';
element.style.top = '50px';
ready
element.cssText
var element = getElement();
element.style.cssText = 'left:10px;top:50px;';
ready
change css class
var element = getElement();
element.className = 'newClass';
ready

Revisions

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