cssText vs style (v5)

Revision 5 of this benchmark created by Thomas Fuchs on

Description

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

Force a reset and reflow after each test.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style>
  .newClass { left: 10px; top:50px; }
</style>
<div id="element"></div>

Setup

var element = document.getElementById('element');
    var style = element.style;
    var $element = $(element);
    
    var left = 10;
    var top = 50;

Test runner

Ready to run.

Testing in
TestOps/sec
element.style
style.left = left + 'px';
style.top = top + 'px';
element.offsetLeft;
style.cssText = element.className = '';
ready
element.cssText
style.cssText = ';left:' + left + 'px;top:' + top + 'px';
element.offsetLeft;
style.cssText = element.className = '';
ready
change css class
element.className = 'newClass';
element.offsetLeft;
style.cssText = element.className = '';
ready
jQuery style
$element.css({
  'left': left,
  'top': top
});
element.offsetLeft;
style.cssText = element.className = '';
ready
addClass
$element.addClass('newClass');
element.offsetLeft;
style.cssText = element.className = '';
ready

Revisions

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