性能优化：Intersection Observer 性能的疑问

最近在做网页性能优化 当遇到大量内容载入时通常会做 LazyLoading

传统方法都是当 Scrolling 时去抓 getBoundingClientRect 取得 offsetTop 来计算 后面有新的API：Intersection Observer 可以直接观察进入可视区的 element

我的代码如下(利用10000个DIV 当进入可视范围时innerHTML)

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

intersectionObserver

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

网上提到很多用IO效能会提高不少，实际去测试后确实 script、rendering 的时间降低了，但为什么 painting 的耗时这么高呢？ 就算我上面代码中displayBlock里面不做innerHTML结果一样 eles.forEach(ele => observer.observe(ele)) 这行只要执行就会触发 painting 耗时

有大佬能解答吗