jQuery find() vs find().filter() with attribute selector (v6)

Revision 6 of this benchmark created on

Description

What's the difference in performance between:

$("div[data-num='300']");

and

$("div").filter("[data-num='300']");

Preparation HTML

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

<script>
var fragment = document.createDocumentFragment(),
    i = 500,
    item;

while (i--) {
    item = document.createElement('div');
    item.textContent = i;
    fragment.appendChild(item);
}

document.documentElement.appendChild(fragment);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
$("div[data-num='300']")
$("div[data-num='300']");
ready
$("div").filter("[data-num='300']")
$("div").filter("[data-num='300']");
ready
with var
var $tmp = $("div");
$tmp.filter("[data-num='300']");
ready
$find()
$.find("div[data-num='300']");
ready
[data-num='300']
$("[data-num='300']");
ready
find([data-num='300'])
$.find("[data-num='300']");
ready
find().filter()
$("#div").find("*").filter("[data-num='300']");
ready

Revisions

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