09-使用JavaScript处理长列表数据：惰性渲染、虚拟滚动与分批渲染

使用JavaScript处理长列表数据：惰性渲染、虚拟滚动与分批渲染

笔记+分享
在前端开发中，处理长列表数据是一项常见且具有挑战性的任务。为了提升性能和用户体验，开发者可以采用多种技术和方法来优化渲染过程。本文将介绍如何使用原生JavaScript实现惰性渲染、虚拟滚动以及分批渲染。

惰性渲染（Lazy Rendering）

惰性渲染是一种按需加载数据的方法，即只在需要时才渲染页面上的数据。这种方法可以显著减少初始加载时间，提升页面性能。实现惰性渲染的常见方式是使用Intersection Observer API来检测元素是否进入视口。

const lazyLoad = () => {
   
   
    const options = {
   
   
        root: null, // 默认为视口
        rootMargin: '0px',
        threshold: 0.1 // 10%的内容进入视口时触发
    };

    const observer = new IntersectionObserver((entries, observer) => {
   
   
        entries.forEach(entry => {
   
   
            if (entry.isIntersecting) {
   
   
                const target = entry.target;
                // 模拟数据加载
                target.textContent = 'Loaded';
                observer.unobserve(target); // 加载完成后取消观察
            }
        });
    }, options);

    document.querySelectorAll('.lazy').forEach(item => {
   
   
        observer.observe(item);
    });
};

document.addEventListener('DOMContentLoaded', lazyLoad);

虚拟滚动（Virtual Scrolling）

虚拟滚动是一种只渲染当前视口内数据的方法，对于长列表数据特别有效。它通过只保留当前视口内的数据，来降低DOM节点数量，从而提升渲染性能。实现虚拟滚动的方式有很多，下面是一个简单的实现示例。

<div id="container" style="height: 500px