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

Latest run results:

Run details: (Test run date: 2 years 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

one interactionObservers on many elements

107K/s

one intersectionObserver per one element

56K/s

View exact numbers

Test name	Executions per second
✓ one interactionObservers on many elements	106,711 Ops/sec
one intersectionObserver per one element	56,012 Ops/sec

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: 2 years ago by: Registered User

Go to the latest result

one interactionObservers on many elements

one intersectionObserver per one element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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: 2 years ago by: Registered User

Go to the latest result

one interactionObservers on many elements

one intersectionObserver per one element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

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