Queued Styles vs Non Queued Styles

JavaScript performance comparison

Revision 2 of this test case created by elleestcrimi

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  for (i = 0; i < 1000; i++)
  $('body').append('<div class="test-div" id="div-' + i + '"></div>');
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Queued Styles
var divs = $('.test-div')
var len = divs.length
var queuedStyles = []

while (len--) {
  var me = $(divs[len])
  queuedStyles.push({
    element: me,
    style: {
      color: 'red',
      background: 'green',
      border: '1px solid black',
      position: 'absolute'
    }
  })
}

var len = queuedStyles.length

while (len--) {
  var me = queuedStyles[len];
  me.element.css(me.style);
}
pending…
Pulled Queued Styles
var divs = $('.test-div').remove();
var len = divs.length
var queuedStyles = []

while (len--) {
  var me = $(divs[len])
  queuedStyles.push({
    element: me,
    style: {
      color: 'red',
      background: 'green',
      border: '1px solid black',
      position: 'absolute'
    }
  })
}

var len = queuedStyles.length

while (len--) {
  var me = queuedStyles[len];
  me.element.css(me.style);
}

$('body').append(divs)
pending…
Non Queued Styles
var divs = $('.test-div')
var len = divs.length

while (len--) {
  $(divs[len]).css({
    color: 'red',
    background: 'green',
    border: '1px solid black',
    position: 'absolute'
  })
}
pending…
Pulled Non Queued Styles
var divs = $('.test-div').remove();
var len = divs.length

while (len--) {
  $(divs[len]).css({
    color: 'red',
    background: 'green',
    border: '1px solid black',
    position: 'absolute'
  })
}

$('body').append(divs)
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment