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>

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 }
]

Tests:

Variable
window.options.find(o => o.value === 'Green Banana');
Elements
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

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 one month ago):

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 one month ago):