Vue2 - 延迟加载(requestAnimationFrame实现)+ 效果展示

目录

1,背景

当一个页面需要加载较多个组件时,并且组件自身又比较复杂。如果一次性加载,可能等待时间较长,体验不好。

一种解决办法:分批次的来渲染子组件。

2,实现

通过 requestAnimationFrame(callback) 实现,同时能够控制按照指定顺序来渲染

简单理解为:浏览器会按照一定的频率来重绘页面,大概 60次/s。每次重绘前都会执行 callback 函数。这样的话,我们可以在每次重绘前都只渲染一个组件,来实现组件的延迟加载。

示例代码:

2.1,延迟加载的核心代码

通过 mixin 来实现。大致逻辑:

  1. 首先会传入一个最大重绘次数。
  2. 定义一个计数当前重绘次数的变量,每次调用 callback 时自增,重绘次数达到最大则结束 requestAnimationFrame 的执行。
  3. 定义一个方法,参数为指定的顺序,返回值用于判断组件是否展示。
    比如 v-if="deferItem(5)" 表示浏览器第5次重绘时渲染该组件。
js 复制代码
export default function defer(maxFrameCount) {
  return {
    data() {
      return {
        frameCount: 0,
      };
    },
    mounted() {
      const refreshFrame = () => {
        requestAnimationFrame(() => {
          this.frameCount++;
          if (this.frameCount < maxFrameCount) {
            refreshFrame();
          }
        });
      };
      refreshFrame();
    },
    methods: {
      deferItem(showFrameCount) {
        return this.frameCount >= showFrameCount;
      },
    },
  };
}

2.2,模拟的复杂组件

子组件内部有 20000 个元素需要渲染,来模拟复杂的组件。

html 复制代码
<template>
  <div class="container">
    <div v-for="n in 20000" class="item"></div>
  </div>
</template>

<script></script>
<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 300px;
  height: 300px;
}

.item {
  width: 5px;
  height: 5px;
  background-color: #eee;
  margin: 0.1em;
}
</style>

2.3. 父组件

模拟渲染 25 个复杂子组件。

html 复制代码
<template>
  <div class="container">
    <div v-for="n in 25" :key="n" class="wrapper">
      <HeavyComp v-if="deferItem(n)" />
    </div>
  </div>
</template>

<script>
import HeavyComp from "./components/HeavyComp.vue";
import defer from "./mixins/defer";
export default {
  components: {
    HeavyComp,
  },
  mixins: [defer(25)],
};
</script>
<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
.wrapper {
  border: 1px solid salmon;
}
</style>

3,效果


requestAnimationFrame 相关解释

以上。

相关推荐
mCell16 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip16 小时前
Node.js 子进程:child_process
前端·javascript
excel19 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel20 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼21 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping21 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
颜如玉21 小时前
HikariCP:Dead code elimination优化
后端·性能优化·源码
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts