Vue延迟渲染(defer)优化

原理

‌核心原理是利用 requestAnimationFrame 来逐帧更新一个计数器 count，然后通过返回的函数来判断当前是否已经达到了指定的帧数。

Defer属性的使用场景和效果

这个 Hook 可以用于延迟加载某些资源或组件，直到页面已经渲染了一定数量的帧。这样可以避免在页面初始加载时一次性加载过多内容，从而提升页面的初始加载性能。

举个🌰子

<template>
    <div class="box">
        <div v-for="n in 10000" :key="n">
            <grid/>
        </div>
    </div>
</template>

渲染效果如下图所示:

优化代码如下:

<template>
    <div class="box">
        <div v-for="n in 10000" :key="n">
            <grid v-if="defer(n)"/>
        </div>
    </div>
</template>
<script setup>
import grid from './grid.vue';
import { useDefer } from '../utils/defer'

const defer = useDefer()
</script>

// defer.js
import { ref } from 'vue'
// 将状态提升到模块作用域以实现单例模式
const count = ref(0)
let maxN = 0
let rafId = null

function update() {
  count.value++
  // 当前计数超过最大需处理帧数时停止
  if (count.value >= maxN) {
    stop()
  } else {
    rafId = requestAnimationFrame(update)
  }
}

function stop() {
  if (rafId !== null) {
    cancelAnimationFrame(rafId)
    rafId = null
  }
}

export function useDefer() {
  return function (n) {
    // 更新最大需处理帧数
    if (n > maxN) {
      maxN = n
      // 若当前无循环则启动新循环
      if (rafId === null) {
        rafId = requestAnimationFrame(update)
      }
    }
    return count.value >= n
  }
}

优化效果如下图所示: