JavaScript: Intersection Observer VS Scrolling

Question

I want to test large content rendering efficacy so, I use two ways to test speed when scrolling 10000 text div

// getBoundingClientRect
function lazyLoading_useRect() {
    let root = document.getElementById('root');

    root.addEventListener('scroll', function(e) {
        root.childNodes[0].childNodes.forEach(node => {
            let nodeTop = node.getBoundingClientRect().top; 
            if (nodeTop > -root.offsetHeight && nodeTop < root.offsetHeight) displayBlock(node, true);
            else displayBlock(node, false);
        });

    });
}

and

function lazyLoading_useIO() {
    function callback(entries, observer) {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) { 
                displayBlock(entry.target, true);
            } else {
                displayBlock(entry.target, false);
            } 
      });  
    }

    const options = {
      root: document.querySelector('#root'),
      rootMargin: '0px',
      threshold: [0]
    };  

    const observer = new IntersectionObserver(callback, options);
    const eles = document.querySelectorAll('#block'); 
    eles.forEach(ele => observer.observe(ele));
}

I thought IntersectionObserver would be faster than getBoundingClientRect but why IntersectionObserver spend a lot of time to paint?