Run results for: one intersectionObserver per one element vs one interactionObservers on many elements

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

one interactionObservers on many elements

45K/s

one intersectionObserver per one element

4K/s

View exact numbers

Test name	Executions per second
✓ one interactionObservers on many elements	45,374 Ops/sec
one intersectionObserver per one element	3,680 Ops/sec

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'});