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');

for(var i = 0; i < 2; i++) {
    var el = document.createElement('div'); el.innerText = 'hi world'; el.style['padding-bottom'] = '175px'; node.appendChild(el)      
};

Tests:

one interactionObservers on many elements
var interfn = function(entry){console.log(entry[0])}; 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.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'})

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

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definitions and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition:**

MeasureThat.net is testing two different approaches to using IntersectionObserver:

1. **One IntersectionObserver per one element**: In this approach, a new IntersectionObserver instance is created for each individual element in the `#wrapper > div` list.
2. **One IntersectionObserver on many elements**: In this approach, a single IntersectionObserver instance is created and observed over all elements in the `#wrapper > div` list.

**Script Preparation Code:**

The script preparation code creates two sets of HTML elements:
```javascript
for (var i = 0; i < 2; i++) {
    var el = document.createElement('div');
    el.innerText = 'hi world';
    el.style['padding-bottom'] = '175px';
    node.appendChild(el);
}
```
This creates two sets of identical `div` elements, each with a padding bottom of 175 pixels.

**Html Preparation Code:**

The HTML preparation code is:
```html
<div id='wrapper' style="height: 300px; overflow: hidden;"></div>
```
It creates a single `div` element with an ID of "wrapper" and styles it to have a height of 300 pixels, but without any visible content.

**Individual Test Cases:**

The two test cases are:

1. **One interactionObservers on many elements**
```javascript
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'})
```
This code creates a single IntersectionObserver instance and observes all elements in the `#wrapper > div` list. It then scrolls the last child of the wrapper element into view.

2. **One intersectionObserver per one element**
```javascript
var interfn = function(entry){console.log(entry[0])};
var inter = new IntersectionObserver(interfn, { root: null, threshold: 0});

document.querySelectorAll('#wrapper > div').forEach(function(el){
    var inter = new IntersectionObserver(interfn, { root: null, threshold: 0});
    inter.observe(el);
})

var node = document.getElementById('wrapper');
node.lastChild.scrollIntoView({behavior: 'smooth'})
```
This code creates a new IntersectionObserver instance for each individual element in the `#wrapper > div` list. It then observes each element individually.

**Comparison:**

The two test cases are comparing the performance of:

1. **One IntersectionObserver on many elements**: Creating a single IntersectionObserver instance and observing all elements at once.
2. **One IntersectionObserver per one element**: Creating a new IntersectionObserver instance for each individual element.

**Pros and Cons:**

**One IntersectionObserver on many elements:**

Pros:

* Can be faster since it only creates a single observer instance
* Reduces memory usage since it doesn't create multiple instances

Cons:

* May not provide accurate results since all elements are observed simultaneously, which can lead to less precise timing
* If one element is observed out of sync with the others, it may skew the results

**One IntersectionObserver per one element:**

Pros:

* Provides more accurate results since each element is observed individually
* Can help identify issues with individual elements

Cons:

* Creates multiple observer instances, which can increase memory usage and slow down performance
* May be slower due to the overhead of creating and managing multiple observers

**Library Used:**

The IntersectionObserver API is used in both test cases. The library is built into modern web browsers and provides a simple way to observe elements for changes in their visibility.

**Special JS Features or Syntax:**

None mentioned in this explanation, but it's worth noting that the `IntersectionObserver` API was introduced in ECMAScript 2017 (ES7) as a part of the Web APIs.

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/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
one interactionObservers on many elements	106711.1 Ops/sec
one intersectionObserver per one element	56012.4 Ops/sec

Related benchmarks:

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

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

Created: one year ago by: Registered User

Jump to the latest result

one interactionObservers on many elements

one intersectionObserver per one element

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):