requestAnimationFrame-优化页面大数据量渲染

定义：requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。

优点：节省系统资源，提高系统性能，改善视觉效果。

举个粒子：

 data() {
    return {
      data: [], // 要渲染的数据
      count: 0,
      size: 3, // 一次渲染多少条数据
      timer: null
    }
  },
  methods: {
	animation(data) {
	  // 数据全部渲染完结束动画
      if (this.count - this.size >= data.length) {
        cancelAnimationFrame(this.timer)
        return
      }
      this.updateData(this.count, data)
      this.timer = requestAnimationFrame(() => {
        this.animation(data)
      })
    },
    updateData(count, data) {
      for (let i = count; i < count + this.size; i++) {
        if (i < data.length) {
          this.data.push(data[i])
        }
      }
      this.count += this.size
    },
  }
    

优化之后：

<div v-for="(item, i) in data" :key="item.id" >
	<div v-if="defer(i)">{{item.id}}</div>
</div>

// @param {number} maxFrameCount 需要执行渲染回调的次数
defer(maxFrameCount = 500) {
  const state = Vue.observable({ frameCount: 0 })
  const reflashFrameCount = () => {
    requestAnimationFrame(() => {
      state.frameCount++
      if (state.frameCount <= maxFrameCount) {
        reflashFrameCount()
      }
    })
  }
  reflashFrameCount()
  return showFrameCount => {
    return state.frameCount >= showFrameCount
  }
}