Which is faster (v2)

Revision 2 of this benchmark created on

Description

Does jQuery cache selectors on its own?

Preparation HTML

<style type="text/css">
.bold { /* Yes, mingling presentation with semantics -- it's a test for heaven's sake. :-) */
    font-weight: bold;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="el">
This is a test.
</div>
<div>This will not change</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Recycling variables
var e = $("#el");

e.css({
 color: "red"
});
e.attr("class", "bold");
e.click(function() {
 alert("hello there!");
});
ready
Re-querying every time
$("#el").css({
 color: "red"
});
$("#el").attr("class", "bold");
$("#el").click(function() {
 alert("hello there!");
});
ready
Chaining
var e = $("#el");

e.css({
 color: "red"
}).
attr("class", "bold").
click(function() {
 alert("hello there!");
});
ready
Chaining without cache
$("#el").css({
 color: "red"
}).
attr("class", "bold").
click(function() {
 alert("hello there!");
});
ready

Revisions

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

  • Revision 1: published by Sean M. Vieira on
  • Revision 2: published on