Queued Styles vs Non Queued Styles

JavaScript performance comparison

Test case created by elleestcrimi

Preparation code

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

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').remove();

var queuedStyles = []

divs.each(function() {
  var me = $(this);
  queuedStyles.push({
    element: me,
    style: {
      color: 'red',
      background: 'green',
      border: '1px solid black',
      position: 'absolute'
    }
  })
});

var i = 0;

while (i < queuedStyles.length) {
  var me = queuedStyles[i];
  me.element.css(me.style);
  i++;
}
$('body').append(divs)
pending…
Non Queued Styles
var divs = $('.test-div').remove();

divs.each(function() {
  $(this).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