style versus jquery css

JavaScript performance comparison

Revision 18 of this test case created

Preparation code

<div id="test" style="width: 400px; height: 200px; background-color: #ccc;">
</div>
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
Benchmark.prototype.setup = function() {
    var cachedElement = document.getElementById('test');
    var cachedStyle = document.getElementById('test').style;
    var cached$ = $('#test');
};
</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
Jquery css()
$('#test').css('background-color', '#000000');
pending…
Raw style
document.getElementById('test').style.backgroundColor = "#000000";
pending…
cached jQuery item
cached$.css('background-color', '#000000');
pending…
jQuery css via $(element)
$(cachedElement).css('background-color', '#000000');
pending…
Style via jQuery cached
cached$[0].style.backgroundColor = "#000000";
pending…
cachedElement
cachedElement.style.backgroundColor = "#000000";
pending…
cachedStyle
cachedStyle.backgroundColor = "#000000";
pending…
Raw style(array)
document.getElementById('test').style[ "background-color" ] = "#000000";
pending…
Cached style(array)
cachedStyle[ "background-color" ] = "#000000";
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