Я хочу проверить эффективность рендеринга большого контента, поэтому я использую два способа проверить скорость при прокрутке 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 тратит много времени на рисование?