Benchmark: Looping variable vs elements

HTML Preparation code:

<select>
    <option value="Strawberry">Strawberry</option>
    <option value="Blueberry">Blueberry</option>
    <option value="Peach">Peach</option>
    <option value="Pomegranate">Pomegranate</option>
    <option value="Grape">Grape</option>
    <option value="Banana">Banana</option>
    <option value="Cherry">Cherry</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Pear">Pear</option>
    <option value="Plum">Plum</option>
    <option value="Muskmelon">Muskmelon</option>
    <option value="Avocado">Avocado</option>
    <option value="Apricot">Apricot</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Papaya">Papaya</option>
    <option value="Lemon">Lemon</option>
    <option value="Coconut">Coconut</option>
    <option value="Jackfruit">Jackfruit</option>
    <option value="Nectarine">Nectarine</option>
  	<option value="Strawberry">Strawberry</option>
    <option value="Blueberry">Blueberry</option>
    <option value="Peach">Peach</option>
    <option value="Pomegranate">Pomegranate</option>
    <option value="Grape">Grape</option>
    <option value="Green Banana">Green Banana</option>
    <option value="Cherry">Cherry</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Pear">Pear</option>
    <option value="Plum">Plum</option>
    <option value="Muskmelon">Muskmelon</option>
    <option value="Avocado">Avocado</option>
    <option value="Apricot">Apricot</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Papaya">Papaya</option>
    <option value="Lemon">Lemon</option>
    <option value="Coconut">Coconut</option>
    <option value="Jackfruit">Jackfruit</option>
    <option value="Nectarine">Nectarine</option>
</select>

AخA
 
<select>
    <option value="Strawberry">Strawberry</option>
    <option value="Blueberry">Blueberry</option>
    <option value="Peach">Peach</option>
    <option value="Pomegranate">Pomegranate</option>
    <option value="Grape">Grape</option>
    <option value="Banana">Banana</option>
    <option value="Cherry">Cherry</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Pear">Pear</option>
    <option value="Plum">Plum</option>
    <option value="Muskmelon">Muskmelon</option>
    <option value="Avocado">Avocado</option>
    <option value="Apricot">Apricot</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Papaya">Papaya</option>
    <option value="Lemon">Lemon</option>
    <option value="Coconut">Coconut</option>
    <option value="Jackfruit">Jackfruit</option>
    <option value="Nectarine">Nectarine</option>
    <option value="Strawberry">Strawberry</option>
    <option value="Blueberry">Blueberry</option>
    <option value="Peach">Peach</option>
    <option value="Pomegranate">Pomegranate</option>
    <option value="Grape">Grape</option>
    <option value="Green Banana">Green Banana</option>
    <option value="Cherry">Cherry</option>
    <option value="Pineapple">Pineapple</option>
    <option value="Pear">Pear</option>
    <option value="Plum">Plum</option>
    <option value="Muskmelon">Muskmelon</option>
    <option value="Avocado">Avocado</option>
    <option value="Apricot">Apricot</option>
    <option value="Mango">Mango</option>
    <option value="Apple">Apple</option>
    <option value="Papaya">Papaya</option>
    <option value="Lemon">Lemon</option>
    <option value="Coconut">Coconut</option>
    <option value="Jackfruit">Jackfruit</option>
    <option value="Nectarine">Nectarine</option>
</select>

Script Preparation code:

window.options = [
  { text: 'Strawberry', value: 'Strawberry', selected: false },
  { text: 'Blueberry', value: 'Blueberry', selected: false },
  { text: 'Peach', value: 'Peach', selected: false },
  { text: 'Pomegranate', value: 'Pomegranate', selected: false },
  { text: 'Grape', value: 'Grape', selected: false },
  { text: 'Blueberry', value: 'Banana', selected: false },
  { text: 'Cherry', value: 'Cherry', selected: false },
  { text: 'Pineapple', value: 'Pineapple', selected: false },
  { text: 'Pear', value: 'Pear', selected: false },
  { text: 'Plum', value: 'Plum', selected: false },
  { text: 'Muskmelon', value: 'Muskmelon', selected: false },
  { text: 'Avocado', value: 'Avocado', selected: false },
  { text: 'Apricot', value: 'Apricot', selected: false },
  { text: 'Mango', value: 'Mango', selected: false },
  { text: 'Apple', value: 'Apple', selected: false },
  { text: 'Papaya', value: 'Papaya', selected: false },
  { text: 'Lemon', value: 'Lemon', selected: false },
  { text: 'Coconut', value: 'Coconut', selected: false },
  { text: 'Jackfruit', value: 'Jackfruit', selected: false },
  { text: 'Nectarine', value: 'Nectarine', selected: false },
  { text: 'Strawberry', value: 'Strawberry', selected: false },
  { text: 'Blueberry', value: 'Blueberry', selected: false },
  { text: 'Peach', value: 'Peach', selected: false },
  { text: 'Pomegranate', value: 'Pomegranate', selected: false },
  { text: 'Grape', value: 'Grape', selected: false },
  { text: 'Green Banana', value: 'Green Banana', selected: false },
  { text: 'Cherry', value: 'Cherry', selected: false },
  { text: 'Pineapple', value: 'Pineapple', selected: false },
  { text: 'Pear', value: 'Pear', selected: false },
  { text: 'Plum', value: 'Plum', selected: false },
  { text: 'Muskmelon', value: 'Muskmelon', selected: false },
  { text: 'Avocado', value: 'Avocado', selected: false },
  { text: 'Apricot', value: 'Apricot', selected: false },
  { text: 'Mango', value: 'Mango', selected: false },
  { text: 'Apple', value: 'Apple', selected: false },
  { text: 'Papaya', value: 'Papaya', selected: false },
  { text: 'Lemon', value: 'Lemon', selected: false },  
  { text: 'Coconut', value: 'Coconut', selected: false },
  { text: 'Jackfruit', value: 'Jackfruit', selected: false },
  { text: 'Nectarine', value: 'Nectarine', selected: false }
]

 
window.options = [  { text: 'Strawberry', value: 'Strawberry', selected: false },  { text: 'Blueberry', value: 'Blueberry', selected: false },  { text: 'Peach', value: 'Peach', selected: false },  { text: 'Pomegranate', value: 'Pomegranate', selected: false },  { text: 'Grape', value: 'Grape', selected: false },  { text: 'Blueberry', value: 'Banana', selected: false },  { text: 'Cherry', value: 'Cherry', selected: false },  { text: 'Pineapple', value: 'Pineapple', selected: false },  { text: 'Pear', value: 'Pear', selected: false },  { text: 'Plum', value: 'Plum', selected: false },  { text: 'Muskmelon', value: 'Muskmelon', selected: false },  { text: 'Avocado', value: 'Avocado', selected: false },  { text: 'Apricot', value: 'Apricot', selected: false },  { text: 'Mango', value: 'Mango', selected: false },  { text: 'Apple', value: 'Apple', selected: false },  { text: 'Papaya', value: 'Papaya', selected: false },  { text: 'Lemon', value: 'Lemon', selected: false },  { text: 'Coconut', value: 'Coconut', selected: false },  { text: 'Jackfruit', value: 'Jackfruit', selected: false },  { text: 'Nectarine', value: 'Nectarine', selected: false },  { text: 'Strawberry', value: 'Strawberry', selected: false },  { text: 'Blueberry', value: 'Blueberry', selected: false },  { text: 'Peach', value: 'Peach', selected: false },  { text: 'Pomegranate', value: 'Pomegranate', selected: false },  { text: 'Grape', value: 'Grape', selected: false },  { text: 'Green Banana', value: 'Green Banana', selected: false },  { text: 'Cherry', value: 'Cherry', selected: false },  { text: 'Pineapple', value: 'Pineapple', selected: false },  { text: 'Pear', value: 'Pear', selected: false },  { text: 'Plum', value: 'Plum', selected: false },  { text: 'Muskmelon', value: 'Muskmelon', selected: false },  { text: 'Avocado', value: 'Avocado', selected: false },  { text: 'Apricot', value: 'Apricot', selected: false },  { text: 'Mango', value: 'Mango', selected: false },  { text: 'Apple', value: 'Apple', selected: false },  { text: 'Papaya', value: 'Papaya', selected: false },  { text: 'Lemon', value: 'Lemon', selected: false },    { text: 'Coconut', value: 'Coconut', selected: false },  { text: 'Jackfruit', value: 'Jackfruit', selected: false },  { text: 'Nectarine', value: 'Nectarine', selected: false }]

Tests:

Variable
window.options.find(o => o.value === 'Green Banana');
window.options.find(o => o.value === 'Green Banana');
Elements
const selected = [...document.querySelector('select').options]; selected.find(s => s.value === 'Green Banana');
x

const selected = [...document.querySelector('select').options];

selected.find(s => s.value === 'Green Banana');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Variable
Elements

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 14 on iOS 14.0.1

View result in a separate tab

Test name	Executions per second
Variable	6877897.5 Ops/sec
Elements	562589.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Let's break down the benchmark and its options.

Benchmark Description: The benchmark is designed to compare two approaches for searching a specific element within an array of objects in JavaScript:

Variable: This approach uses the find method on an array, passing a callback function that checks if the current element's value matches the target value ('Green Banana'). The first occurrence of the match returns the index of the element.
Elements: This approach uses the spread operator (...) to convert the select HTML element into an array of options, and then finds the specific option using the same callback function as in the Variable approach.

Options: The two main options being compared are:

Using the find method on an array (Variable approach)
Using the spread operator to convert a DOM element into an array and then finding the specific option (Elements approach)

Latest Benchmark Result: The latest benchmark result shows that the Mobile Safari 14 browser with iOS 14.0.1 operating system achieves higher execution rates for both test cases:

Variable approach: 6,877,897.5 executions per second
Elements approach: 562,589.0 executions per second

Analysis:

The Variable approach is faster because it avoids the overhead of converting the DOM element to an array and then searching through the array.
The Elements approach is slower due to the additional steps involved in converting the select element to an array and finding the specific option within that array.

In general, when working with arrays and performing search operations, the find method on an array tends to be faster than using the spread operator to convert a DOM element into an array. However, in this specific case, the difference is relatively small, and the performance gain from using the find method may not be significant for all use cases.

It's worth noting that the benchmark results might vary depending on the specific test environment, hardware, and other factors.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Description:**
The benchmark is designed to compare two approaches for searching a specific element within an array of objects in JavaScript:

1. **Variable**: This approach uses the `find` method on an array, passing a callback function that checks if the current element's value matches the target value (`'Green Banana'`). The first occurrence of the match returns the index of the element.
2. **Elements**: This approach uses the spread operator (`...`) to convert the `select` HTML element into an array of options, and then finds the specific option using the same callback function as in the Variable approach.

**Options:**
The two main options being compared are:

* Using the `find` method on an array (Variable approach)
* Using the spread operator to convert a DOM element into an array and then finding the specific option (Elements approach)

**Latest Benchmark Result:**
The latest benchmark result shows that the Mobile Safari 14 browser with iOS 14.0.1 operating system achieves higher execution rates for both test cases:

* Variable approach: 6,877,897.5 executions per second
* Elements approach: 562,589.0 executions per second

**Analysis:**

* The Variable approach is faster because it avoids the overhead of converting the DOM element to an array and then searching through the array.
* The Elements approach is slower due to the additional steps involved in converting the `select` element to an array and finding the specific option within that array.

In general, when working with arrays and performing search operations, the `find` method on an array tends to be faster than using the spread operator to convert a DOM element into an array. However, in this specific case, the difference is relatively small, and the performance gain from using the `find` method may not be significant for all use cases.

It's worth noting that the benchmark results might vary depending on the specific test environment, hardware, and other factors.

Related benchmarks:

Looping variable vs elements (version: 0)

Comparing performance of: Variable vs Elements

Created: 4 years ago by: Guest

Jump to the latest result

Variable

Elements

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):