JavaScript利用时间分片实现高性能渲染数据详解

什么是时间分片

时间分片是一项 Web API 新特性，它可以让长时间运行的 JavaScript 任务在多个时间间隔执行。在使用时间分片任务时，可以将大型任务分割为更小的任务，以便浏览器在不影响主线程性能的情况下，逐步执行它们。

为什么需要时间分片

在 JavaScript 中，如果一个任务运行时间太长，会阻塞主线程的渲染，导致页面卡顿。时间分片能够解决这个问题，因为它使得长时间运行的任务能够在多个时间间隔执行，而不会阻塞主线程的渲染，从而提高性能。

时间分片如何实现

JavaScript 的时间分片实现依赖于 requestIdleCallback API。通过将任务传递给 requestIdleCallback，浏览器可以在空闲时间对任务进行分片处理，从而提高性能。

以下是一段小示例：

function recursiveSum(sum = 0, num = 0) {
  if(num === 100000000) {
    return sum;
  }
  return () => recursiveSum(sum + num, num + 1);
}

let currentSum = 0;
let numsToCompute = recursiveSum();

function compute() {
  while(numsToCompute && performance.now() < 50) {
    currentSum += numsToCompute(); // 每次执行递归调用，计算sum
  }
  if(numsToCompute) {
    requestIdleCallback(compute);
  } else {
    console.log('计算完成', currentSum);
  }
}

requestIdleCallback(compute);

这个小示例我们通过 recursiveSum 函数生成了1-1亿的数组，然后通过计算得到这1-1亿的和，这个计算是可以通过递归实现的，但是在目前运行程序中，是会报出堆栈溢出的错误，解决这个问题，时间分片就起到了作用，我们通过时间分片，将计算分成了多个部分，然后在浏览器的空闲时间段内进行执行。

时间分片的应用

常见的应用场景是大数据量的渲染。在前端中，特别是在移动端中，数据量过大时可能会导致渲染卡顿或者页面卡死。使用时间分片可以使得数据渲染更为平滑，用户的交互体验会更好。

以下是一个示例，我们需要渲染高度比较大的表格，使得我们的DOM元素较多，而在传统的渲染方式下，这些DOM元素是全部一次性创建的，会导致页面的卡顿影响交互效果。我们可以使用时间分片的方式，让页面分批创建DOM元素并渲染到页面上：

function createRows(startTime, count) {
  for(let i = 0; i < count; i++) {
    tableBody.innerHTML += `<tr><td>${startTime + i}</td><td>第 ${startTime + i} 行</td></tr>`;
  }
}

let i = 0;
let startTime = 0;
let count = 100;
function renderByPartition() {
  const start = performance.now();
  while(i < 1000 && performance.now() - start < 20) {
    i += count;
    createRows(startTime, count);
    startTime += count;
  }
  if(i < 1000) {
    requestIdleCallback(renderByPartition);
  } else {
    console.log('渲染完成');
  }
}

requestIdleCallback(renderByPartition);

这个示例通过分批创建DOM元素的方式，可以在平滑的情况下进行页面渲染，从而提高用户的交互体验。

总结

时间分片技术能帮助我们以一种低流程费用的方式降低运行一些复杂任务的成本，这些复杂任务包括对大型数据的运算和数据的渲染等等。时间分片就是将一个任务拆分成多个子任务，并在多个 event loop 让这些子任务分散执行，从而减少任何一个 event loop 执行任务的时长，减轻主线程的工作压力。时间分片的应用场景十分广泛，例如表格渲染、数据量处理等，因此在前端开发中使用时间分片可以提高 web 应用程序的性能和用户体验。