1,背景
当一个页面需要加载较多个组件时,并且组件自身又比较复杂。如果一次性加载,可能等待时间较长,体验不好。
一种解决办法:分批次的来渲染子组件。
2,实现
通过 requestAnimationFrame(callback)
实现,同时能够控制按照指定顺序来渲染。
简单理解为:浏览器会按照一定的频率来重绘页面,大概 60次/s。每次重绘前都会执行 callback
函数。这样的话,我们可以在每次重绘前都只渲染一个组件,来实现组件的延迟加载。
示例代码:
2.1,延迟加载的核心代码
通过 mixin
来实现。大致逻辑:
- 首先会传入一个最大重绘次数。
- 定义一个计数当前重绘次数的变量,每次调用
callback
时自增,重绘次数达到最大则结束requestAnimationFrame
的执行。 - 定义一个方法,参数为指定的顺序,返回值用于判断组件是否展示。
比如v-if="deferItem(5)"
表示浏览器第5次重绘时渲染该组件。
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 个元素需要渲染,来模拟复杂的组件。
<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 个复杂子组件。
<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 相关解释文章来源:https://www.toymoban.com/news/detail-824311.html
以上。文章来源地址https://www.toymoban.com/news/detail-824311.html
到了这里,关于Vue2 - 延迟加载(requestAnimationFrame实现)+ 效果展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!