Benchmark: one intersectionObserver per one element vs one interactionObservers on many elements

HTML Preparation code:

<div id='wrapper' style="height: 300px; overflow: hidden;"></div>

Script Preparation code:

var node = document.getElementById('wrapper'), els = []

for(var i = 0; i < 30; i++) {
    var el = document.createElement('div'); el.innerText = 'hi world'; el.style['padding-bottom'] = '175px'; node.appendChild(el);
    els.push({el: el});
};

Tests:

one interactionObservers on many elements
document.getElementById('wrapper').firstChild.scrollIntoView();var interfn = function(entries){ var rel; entries.forEach(entry => { els.forEach(function(eln){ if(eln == entry.target) { rel = entry.target } }) }) rel.innerText = 'hey world'; }; var inter = new IntersectionObserver(interfn, { root: null, threshold: 0}); document.querySelectorAll('#wrapper > div').forEach(function(el){ inter.observe(el); }) var node = document.getElementById('wrapper'); node.lastChild.scrollIntoView({behavior: 'smooth'})
one intersectionObserver per one element
document.getElementById('wrapper').firstChild.scrollIntoView(); document.querySelectorAll('#wrapper > div').forEach(function(el){ var interfn = function(entry){console.log(entry[0])}; var inter = new IntersectionObserver(interfn, { root: null, threshold: 0}); inter.observe(el); }) var node = document.getElementById('wrapper'); node.lastChild.scrollIntoView({behavior: 'smooth'});

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

one interactionObservers on many elements

26K/s

one intersectionObserver per one element

5K/s

Fastest: one interactionObservers on many elements (5.3x faster)

View exact numbers

✓ one interactionObservers on many elements : 26,173 ops/sec
• one intersectionObserver per one element: 4,921 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
one interactionObservers on many elements
one intersectionObserver per one element

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Windows

View result in a separate tab

one interactionObservers on many elements

37K/s

one intersectionObserver per one element

14K/s

View exact numbers

Test name	Executions per second
✓ one interactionObservers on many elements	36,594 Ops/sec
one intersectionObserver per one element	13,937 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Definition**
The benchmark is designed to compare two approaches:

1. **One IntersectionObserver per one element**: This approach creates an instance of `IntersectionObserver` for each individual element, observing it separately.
2. **One IntersectionObserver on many elements**: In this case, only a single instance of `IntersectionObserver` is created, which observes multiple elements at once.

**Options Compared**
The benchmark tests the performance of these two approaches:

* Creating and managing separate instances of `IntersectionObserver` for each element (one per one element)
* Creating and managing a single instance of `IntersectionObserver` to observe multiple elements simultaneously

**Pros and Cons**

1. **One IntersectionObserver per one element**:
	* Pros: Each element can be observed independently, which might be beneficial for complex scenarios or when individual elements have different observing requirements.
	* Cons: This approach creates a separate instance of `IntersectionObserver` for each element, leading to increased memory usage and potentially slower performance due to the overhead of creating multiple observers.
2. **One IntersectionObserver on many elements**:
	* Pros: Reduces memory usage and overhead associated with creating individual observers for each element. Can be beneficial when observing a large number of elements.
	* Cons: This approach requires handling all observations from multiple elements within a single observer, which might lead to increased complexity and potential performance issues if not implemented correctly.

**Library Used**
The benchmark uses the `IntersectionObserver` API, which is a modern JavaScript API for detecting changes in an element's visibility and position relative to the viewport or another element. The purpose of this API is to enable efficient and accurate detection of these changes, allowing developers to create more responsive and interactive web applications.

**Special JS Feature/Syntax**
The benchmark utilizes the `IntersectionObserver` API, which requires modern JavaScript versions (ECMAScript 2017 and later). This ensures that only browsers supporting recent versions can execute this benchmark. Other features like ES6 syntax, arrow functions (`=>`), and template literals (`\r\n`) are also used.

**Other Alternatives**

If `IntersectionObserver` is not available or supported in a particular browser, developers might consider alternative approaches:

* Using traditional event-driven programming (e.g., mouseover, mouseout) to detect visibility changes.
* Employing other libraries or frameworks that provide similar functionality, such as `react-intersection-observer` or `vue-observe-view`.
* Implementing custom logic to track element visibility and position changes.

However, the `IntersectionObserver` API is widely supported in modern browsers and has become a standard feature in web development.

one intersectionObserver per one element vs one interactionObservers on many elements (version: 1)

Comparing performance of: `one interactionObservers on many elements vs one intersectionObserver per one element`

Created: 2 years ago by: Registered User

Go to the latest result

one interactionObservers on many elements

one intersectionObserver per one element

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

one intersectionObserver per one element vs one interactionObservers on many elements (version: 1)

Comparing performance of: one interactionObservers on many elements vs one intersectionObserver per one element

Created: 2 years ago by: Registered User

Go to the latest result

one interactionObservers on many elements

one intersectionObserver per one element

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 18 runs

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: `one interactionObservers on many elements vs one intersectionObserver per one element`