style VS cssText / class / jQuery / .. (v22)

Revision 22 of this benchmark created by molokoloco on

Description

Comparing the performance of using style against changing directly cssText, and even using jQuery to do it ;) Also compared against with just adding a css classname.

Added forced reflow for testing how much elements you can effectively redraw with each methods I will use internal jQuery getComputedStyles by getting an element offset to force the render.

Preparation HTML

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

Setup

var $element = $('#element'),
        element  = $element[0],
        offset   = null;

Test runner

Ready to run.

Testing in
TestOps/sec
element.style
element.style.left = '10px';
element.style.top = '50px';
offset = $element.offset();
ready
element.cssText
element.style.cssText = 'left:10px; top:50px;';
offset = $element.offset();
ready
change css class
element.className = 'newClass';
offset = $element.offset();
ready
jQuery class
$('#element').addClass('newClass');
offset = $element.offset();
ready
jQuery style
$('#element').css({left: 10, top: 50});
offset = $element.offset();
ready
Set attribute
element.setAttribute('style', 'left: 10px; top: 50px;');
offset = $element.offset();
ready
classList
element.classList.add('newClass');
offset = $element.offset();
ready
Only get offset
offset = $element.offset();
ready

Revisions

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