前端十万条数据渲染实战（上）：时间分片优化

前端

2023-09-13 07:25:58

在这个数据爆炸的时代，前端工程师经常面临处理海量数据渲染的挑战。当数据量达到十万条时，传统的渲染方法将不堪重负，导致页面卡顿、用户体验不佳。

本文将深入探讨一个实用的优化策略——时间分片，它能有效解决十万条数据渲染难题。时间分片是一种分而治之的策略，将渲染任务分解成更小的块，分时段逐步渲染，从而减轻浏览器的渲染压力。

时间分片原理

时间分片的原理很简单：将庞大的数据集合拆分成多个较小的子集，然后分时段逐步渲染这些子集。每个子集的渲染都独立进行，不会阻塞后续子集的渲染。

通过将渲染过程分解成多个较小的任务，浏览器可以更轻松地处理这些任务，从而减少卡顿并提高整体渲染性能。

时间分片实现

使用 setTimeout

实现时间分片最简单的方法之一是使用 setTimeout。通过 setTimeout 函数，我们可以指定一个时间间隔，在该时间间隔内渲染一批数据。例如：

const data = [/* ... 十万条数据 */];

function renderBatch(start, end) {
  for (let i = start; i < end; i++) {
    // 渲染第 i 条数据
  }
}

let start = 0;
const batchSize = 1000; // 每批渲染 1000 条数据
const interval = 100; // 100 毫秒渲染一批

function renderLoop() {
  renderBatch(start, start + batchSize);
  start += batchSize;

  if (start < data.length) {
    setTimeout(renderLoop, interval);
  }
}

renderLoop();

使用 requestAnimationFrame

除了 setTimeout，我们还可以使用 requestAnimationFrame 来实现时间分片。requestAnimationFrame 函数会在浏览器的每一帧渲染结束时触发一个回调，允许我们在下一帧进行渲染。

const data = [/* ... 十万条数据 */];

function renderBatch(start, end) {
  for (let i = start; i < end; i++) {
    // 渲染第 i 条数据
  }
}

let start = 0;
const batchSize = 1000; // 每批渲染 1000 条数据

function renderLoop() {
  renderBatch(start, start + batchSize);
  start += batchSize;

  if (start < data.length) {
    requestAnimationFrame(renderLoop);
  }
}

renderLoop();