Run results for: children vs find < in jQuery

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser: Chrome 130

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

parent.find("> [data-attr=value]")

59.4M/s

parent.find("> span")

59.2M/s

parent.find("> *")

58.8M/s

parent.find("> .child")

57.6M/s

parent.children()

12.7M/s

parent.children(".child")

4.6M/s

parent.children("span")

4.3M/s

parent.children("[data-attr=value]")

3.1M/s

View exact numbers

Test name	Executions per second
✓ parent.find("> [data-attr=value]")	59,392,000 Ops/sec
parent.find("> span")	59,190,068 Ops/sec
parent.find("> *")	58,774,416 Ops/sec
parent.find("> .child")	57,649,436 Ops/sec
parent.children()	12,658,435 Ops/sec
parent.children(".child")	4,600,188 Ops/sec
parent.children("span")	4,289,934 Ops/sec
parent.children("[data-attr=value]")	3,131,189 Ops/sec

HTML Preparation code:

<div id="#parent">
  <div class="child">Child Class 1</div>
  <div class="child">Child Class 2</div>
  <span>Child element 3</span>
  <span>Child element 4</span>
  <label data-attr="value">Child Attribute value 5</label>
  <label data-attr="value">Child Attribute value 6</label>
  <p>
     <span class="child" data-attr="value">Grandchild 7 (must not be matched)</div>
  </p>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Script Preparation code:

Benchmark.prototype.setup = function() {

          
  var parent = $("#parent")

        
  };

Tests:

parent.children()
var results = parent.children();
parent.find("> *")
var results = parent.find("> *");
parent.children(".child")
var results = parent.children(".child");
parent.find("> .child")
var results = parent.find("> .child");
parent.children("span")
var results = parent.children("span");
parent.find("> span")
var results = parent.find("> span");
parent.children("[data-attr=value]")
var results = parent.children("[data-attr=value]");
parent.find("> [data-attr=value]")
var results = parent.find("> [data-attr=value]");