JavaScript: Пересечение Наблюдатель VS Прокрутка - PullRequest
0 голосов
/ 29 февраля 2020

Я хочу проверить эффективность рендеринга большого контента, поэтому я использую два способа проверить скорость при прокрутке 10000 текстовых дел

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

    });
}

и

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

Я думал, что IntersectionObserver будет быстрее чем getBoundingClientRect, но почему IntersectionObserver тратит много времени на рисование?

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...