jquery css chain vs array (v3)

Revision 3 of this benchmark created on

Preparation HTML

<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
</ul>

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

Setup

var $li = $('ul li');

Test runner

Ready to run.

Testing in
TestOps/sec
Chaining
$li
  .css('background', '#00ff00')
  .css('position', 'relative')
  .css('left', '30px')
  .css('height', '200px')
  .css('width', '300px');
ready
Array
$li.css({
  background: '#00ff00',
  position: 'relative',
  left: '30px',
  height: '200px',
  width: '300px'
});
ready
Array (quoted)
$li.css({
  'background': '#00ff00',
  'position': 'relative',
  'left': '30px',
  'height': '200px',
  'width': '300px'
});
ready
local var
$li.css('background', '#00ff00');
$li.css('position', 'relative');
$li.css('left', '30px');
$li.css('height', '200px');
$li.css('width', '300px');
ready

Revisions

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