vue2项目延迟装载defer优化白屏

 使用的混入,这个使用的是关键帧的形式来分片加载,可以优化白屏时间

export default function(maxFraneCount) {
  return {
    data() {
      return {
        frameCount: 0
      }
    },
    mounted() {
      const refreshFrameCount = () => {
        requestAnimationFrame(() => {
          this.frameCount++
          if (this.frameCount < maxFraneCount) {
            refreshFrameCount()
          }
        })
      }
      refreshFrameCount()
    },
    methods: {
      defer(showInFrameCount) {
        return this.frameCount >= showInFrameCount
      }
    }
  }
}

你可能感兴趣的:(前端,开发语言,vue.js)