使用defer优化页面白屏加载时间

背景:

官网首页头部轮播的图片过大, 导致页面加载过慢, 或是先加载出中部和底部部分, 页面出现次序十分不雅观, 故可自定义一个方法, 使页面组件逐帧加载

在untils.ts文件中新建方法:

import { ref,onUnmounted } from 'vue

// 给 maxCount一个最大值, 防止frameCount.value无限递增

export const useDefer = (maxCount = 4) => {

const frameCount = ref(0); // 此处使用ref, 使 frameCount 为响应式值

let rafId;

function updateFrameCount() {

rafId = requestAnimationFrame(() => {

frameCount.value++;

if (frameCount.value >= maxCount) {

return;

}

updateFrameCount();

});

}

updateFrameCount();

//销毁

onUnmounted(() => {

cancelAnimationFrame(rafId);

});

return function defer(n: number) {

return frameCount.value >= n;

};

};

vue文件中进行使用

import { useDefer } from '@/utils/utils';

const defer = useDefer();

//可定义在第几帧加载

<Banner v-if="defer(2)" />

摘自 https://blog.csdn.net/weixin_49022197/article/details/133032495