Benchmark: element.children vs element.querySelectorAll vs element.querySelectorAll(:scope)

element.children vs element.querySelectorAll vs element.querySelectorAll(:scope) (version: 0)

Really basic test comparing accessing children via parentElement.children vs via querySelectorAll vs scoped querySelectorAll. Not a great test for the use case, but people who are less lazy than me can fork it and make it do thing good.

Comparing performance of: `children vs querySelectorAll vs querySelectorAll(:scope) vs children.forEach vs querySelectorAll().forEach vs querySelectorAll(:scope).forEach`

Created: 2 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
</div>
<div class="fakeContainer">
	<div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
</div>

Tests:

children
const container = document.querySelector('.container'); for (const item of container.children) { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); }
querySelectorAll
const container = document.querySelector('.container'); const items = container.querySelectorAll('.item'); // calling on container still runs through the entire document...I think? for (const item of items) { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); }
querySelectorAll(:scope)
const container = document.querySelector('.container'); const items = container.querySelectorAll(':scope .item'); for (const item of items) { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); }
children.forEach
const container = document.querySelector('.container'); [...container.children].forEach(( item ) => { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); });
querySelectorAll().forEach
const container = document.querySelector('.container'); const items = container.querySelectorAll('.item'); items.forEach((item) => { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); });
querySelectorAll(:scope).forEach
const container = document.querySelector('.container'); const items = container.querySelectorAll(':scope .item'); items.forEach((item) => { //do things item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
children
querySelectorAll
querySelectorAll(:scope)
children.forEach
querySelectorAll().forEach
querySelectorAll(:scope).forEach

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Yandex Browser 25 on Mac OS X 10.15.7

View result in a separate tab

children

3K/s

querySelectorAll().forEach

3K/s

children.forEach

3K/s

querySelectorAll

3K/s

querySelectorAll(:scope).forEach

3K/s

querySelectorAll(:scope)

3K/s

View exact numbers

Test name	Executions per second
✓ children	3,198 Ops/sec
querySelectorAll().forEach	3,155 Ops/sec
children.forEach	3,143 Ops/sec
querySelectorAll	3,124 Ops/sec
querySelectorAll(:scope).forEach	3,046 Ops/sec
querySelectorAll(:scope)	3,000 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

element.children vs element.querySelectorAll vs element.querySelectorAll(:scope) (version: 0)

Really basic test comparing accessing children via parentElement.children vs via querySelectorAll vs scoped querySelectorAll. Not a great test for the use case, but people who are less lazy than me can fork it and make it do thing good.

Comparing performance of: children vs querySelectorAll vs querySelectorAll(:scope) vs children.forEach vs querySelectorAll().forEach vs querySelectorAll(:scope).forEach

Created: 2 years ago by: Registered User

Go to the latest result

children

querySelectorAll

querySelectorAll(:scope)

children.forEach

querySelectorAll().forEach

querySelectorAll(:scope).forEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `children vs querySelectorAll vs querySelectorAll(:scope) vs children.forEach vs querySelectorAll().forEach vs querySelectorAll(:scope).forEach`