Benchmark: range vs for nodes v3

HTML Preparation code:

<div>
    <span>other</span>
    <span id="start"></span>
    <span>test</span>
    <span id="end"></span>
    <span>other</span>
</div>

Script Preparation code:

window.testStartel = document.getElementById('start')
window.testEndel = document.getElementById('end')
/*const testspan = document.createElement('span')
testspan.textContent = 'test'
const tempFragment = document.createDocumentFragment()
const arr = []
for(let i = 0; i < 1; i++) {
 arr.push(testspan.cloneNode())
}
tempFragment.append(...arr)
window.testStartel.after(tempFragment)*/

Tests:

range
const range = document.createRange() range.setStartAfter(window.testStartel) range.setEndBefore(window.testEndel) const tempFragment = range.extractContents() const parentNode = window.testStartel.parentNode parentNode.insertBefore(tempFragment, window.testEndel)
for nodes
function getNodesBetween(childNodes, startNode, endNode) { const nodes = [] let start = false for (const node of childNodes) { if (node === endNode) { break } if (node === startNode) { start = true continue } start && nodes.push(node) } return nodes } const parentNode = window.testStartel.parentNode const nodes = getNodesBetween(Array.from(parentNode.childNodes), window.testStartel, window.testEndel) const tempFragment = document.createDocumentFragment() tempFragment.append(...nodes) parentNode.insertBefore(tempFragment, window.testEndel)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
range
for nodes

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The benchmark measures the performance of two approaches to retrieve elements between two sibling elements:

1. `range`: Using the `document.createRange()` API, which is part of the Web Content Accessibility Guidelines (WCAG) 2.1 specification.
2. `for nodes`: A custom implementation using a simple loop to iterate over the child nodes of an element.

**Options Compared**

The two options being compared are:

* `range`: This approach uses the `document.createRange()` API, which creates a range object that can be used to extract a portion of a document.
* `for nodes`: This approach uses a simple loop to iterate over the child nodes of an element and collects them in an array.

**Pros and Cons**

Here are some pros and cons of each approach:

* `range`:
	+ Pros: More concise and efficient, as it leverages native Web API functionality.
	+ Cons: May be less intuitive for developers unfamiliar with WCAG 2.1 specifications.
* `for nodes`:
	+ Pros: More explicit and easier to understand, especially for those not familiar with Web APIs.
	+ Cons: Requires more code and may be slower due to the overhead of creating an array.

**Library and Syntax**

The benchmark uses the following library:

* None explicitly mentioned; however, it's implied that `document` is being used as a global object.

There are no special JavaScript features or syntax used in this benchmark.

**Benchmark Preparation Code**

The preparation code sets up two HTML elements, `start` and `end`, which will serve as the sibling nodes. The `Script Preparation Code` section creates a document fragment containing an array of cloneable span elements, and appends it to the parent node after the `start` element.

**Individual Test Cases**

Each test case consists of:

1. A `Benchmark Definition`: This defines the approach being tested (either `range` or `for nodes`).
2. A `Test Name`: This provides a descriptive name for the benchmark.
3. The corresponding implementation code: For each option, there's an individual implementation that extracts the required elements between the sibling nodes.

**Latest Benchmark Result**

The latest result shows two executions per second:

* `range`: 2083.27294921875 executions per second
* `for nodes`: 1755.75439453125 executions per second

This suggests that the `range` approach is slightly faster than the custom implementation using a loop.

**Alternatives**

If you're looking for alternative approaches to solve this problem, here are some options:

1. Use the `ElementSiblingList` API (if supported by your target browsers): This provides a more concise way to iterate over sibling nodes.
2. Implement a recursive function: If you need to traverse deeper into the DOM tree or handle more complex scenarios, a recursive function might be a suitable alternative.
3. Utilize other Web APIs, such as `QuerySelectorAll` or `querySelector`, depending on your specific requirements.

Keep in mind that the choice of approach depends on your project's specific needs, target browsers, and performance requirements.

Related benchmarks:

range vs for nodes v3 (version: 2)

获取两个元素之间兄弟元素

Comparing performance of: range vs for nodes

Created: 4 years ago by: Registered User

Jump to the latest result

range

for nodes

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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