Libon

defer 数据切片渲染

2023/11/24 使用 defer 实现数据切片渲染, 用于大量数据渲染时的性能优化 #JavaScript

ToC

/**
 * 数据切片渲染
 * @param {number} maxFrameCount 最大刷新帧数
 * @param {number} stepSize 每次刷新增加的帧数(可能某次想要渲染多个时)
 * @example
 * ```html
 * <template v-for="n of 100" :key="n">
 *   <div v-if="defer(n)"></div>
 * </template>
 *
 * <script setup>
 *   const defer = useDefer()
 * <script>
 * ```
 */
function useDefer(maxFrameCount = 1000, stepSize = 1) {
  let frameCount = 0

  const refreshFrameCount = () => {
    requestAnimationFrame(() => {
      // 逐步增加渲染帧数
      frameCount += stepSize

      // 如果渲染帧数已经达到最大值,则不再增加
      if (frameCount >= maxFrameCount) {
        return
      }

      // 否则继续刷新渲染
      refreshFrameCount();
    })
  }

  // 启动刷新渲染
  refreshFrameCount()

  // 返回一个函数,用于判断是否需要渲染
  return function (showInFrameCount) {
    return frameCount >= showInFrameCount;
  }
}
CD ..