jQuery body vs. document.body selector

JavaScript performance comparison

Test case created by Justin H. Johnson and last updated

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<section id="content">
</section>

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
$('body')
var $body = $('body'),
    $section = $body.find('#content'),
    str = "How now brown cow",
    i = 100;

while (i--) {
 $section.html(str);
}
pending…
$(document.body)
var $body = $(document.body),
    $section = $body.find('#content'),
    str = "How now brown cow",
    i = 100;

while (i--) {
 $section.html(str);
}
pending…
$('body') : not cached
var $body = $('body'),
    $section = $('body').find('#content'),
    str = "How now brown cow",
    i = 100;

while (i--) {
 $section.html(str);
}
pending…
$(document.body) : not cached
var $body = $(document.body),
    $section = $(document.body).find('#content'),
    str = "How now brown cow",
    i = 100;

while (i--) {
 $section.html(str);
}
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:

2 comments

Mathias Bynens commented :

This test case is needlessly complex. Since you’re just trying to test the performance of the different selectors, this revision would be better.

Jason commented :

I still can't get the whole meaning.

Add a comment