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; overflow-y: auto;"><div id="content" style="height: 20000px; position: relative;"></div>
</div><script>
const container = document.getElementById('container');
const content = document.getElementById('content');
const itemHeight = 20; // 假设每个项的高度为20pxconst renderItems = () => {const scrollTop = container.scrollTop;const viewportHeight = container.clientHeight;const startIdx = Math.floor(scrollTop / itemHeight);const endIdx = Math.floor((scrollTop + viewportHeight) / itemHeight);content.innerHTML = ''; // 清空之前的内容for (let i = startIdx; i <= endIdx; i++) {const item = document.createElement('div');item.style.height = `${itemHeight}px`;item.style.position = 'absolute';item.style.top = `${i * itemHeight}px`;item.textContent = `Item ${i}`;content.appendChild(item);}
};container.addEventListener('scroll', renderItems);
renderItems(); // 初始化渲染
</script>

分批渲染（Batch Rendering）

当数据量较大时，一次性渲染所有数据可能会导致页面卡顿。分批渲染是一种将渲染任务分割成多个小批次的方法，逐步将数据渲染到页面上。我们可以使用 requestAnimationFrame 或 setTimeout 来实现分批渲染。

使用 `requestAnimationFrame` 进行分批渲染

requestAnimationFrame 是一种告诉浏览器你希望执行动画的一个特定函数，并在重绘之前调用该函数的方法。

const items = new Array(10000).fill(0).map((_, index) => `Item ${index}`);
const container = document.getElementById('container');const renderBatch = (start, end) => {for (let i = start; i < end; i++) {const item = document.createElement('div');item.textContent = items[i];container.appendChild(item);}
};const batchRender = (batchSize = 100) => {let index = 0;const total = items.length;const render = () => {if (index < total) {const end = Math.min(index + batchSize, total);renderBatch(index, end);index = end;requestAnimationFrame(render);}};requestAnimationFrame(render);
};document.addEventListener('DOMContentLoaded', () => {batchRender();
});

使用 `setTimeout` 进行分批渲染

setTimeout 是一种用于延迟执行代码片段的方法，我们可以利用它将渲染任务分割成多个小批次。

const items = new Array(10000).fill(0).map((_, index) => `Item ${index}`);
const container = document.getElementById('container');const renderBatch = (start, end) => {for (let i = start; i < end; i++) {const item = document.createElement('div');item.textContent = items[i];container.appendChild(item);}
};const batchRender = (batchSize = 100, delay = 0) => {let index = 0;const total = items.length;const render = () => {if (index < total) {const end = Math.min(index + batchSize, total);renderBatch(index, end);index = end;setTimeout(render, delay);}};render();
};document.addEventListener('DOMContentLoaded', () => {batchRender();
});