cssText vs. multiple css rules (v16)

Revision 16 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="box" style="background:#555;color:#FFF;position:absolute;left:0;top:0;width:400px;height:100px;"></div>

Setup

var $elem = $('#box');
  $("body").append($elem);
  
  for (var i = 0; i < 1000; i++) {
    $elem.append($('<div id="i" style="position=absolute; size="'+i+'%">'));
  }

Test runner

Ready to run.

Testing in
TestOps/sec
cssText
$elem[0].style.cssText +=';width:300px;height:50px;top:40px;left:90px;';
ready
cssText 2
$elem[0].style.cssText +='width:300px;height:50px;top:40px;left:90px;';
ready
jQuery css({ })
$elem.css({ 'width': 300, 'height': 50, 'top':40, 'left': 90 });
ready
multiple style rules
$elem[0].style.width = '300px';
$elem[0].style.height = '50px';
$elem[0].style.top = '40px';
$elem[0].style.left = '90px';
ready
multiple style rules as strings
$elem[0].style['width'] = '300px';
$elem[0].style['height'] = '50px';
$elem[0].style['top'] = '40px';
$elem[0].style['left'] = '90px';
ready
multiple style rules with cached object
var obj = $elem[0];

obj.style.width = '300px';
obj.style.height = '50px';
obj.style.top = '40px';
obj.style.left = '90px';
ready

Revisions

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