vue2 、 vue3首屏优化,减少白屏时间

在第一帧的时候加载应该被用户看到的页面部分,剩下的逐步加载

1. 使用v-for来模拟页面有很多重组件

复制代码
<template v-for="item in 100">
            <sub-home-page :key="item" v-if="defer(item)"></sub-home-page>
        </template>

2.在created钩子中使用requestAnimationFrame对count进行赋值

复制代码
let that = this
        function updataFrame() {
            that.count++;
            if(that.count >= this.components) return 
            that.reqId = requestAnimationFrame(updataFrame);
        }
        updataFrame();

3.使用计算属性,来控制组件是否渲染

复制代码
defer(){
            return function(n){
                return this.count >= n;
            }
        }

4.在页面销毁的时候,取消requestAnimationFrame

复制代码
destroyed(){
        cancelAnimationFrame(that.reqId)
    },

Vue3版本:

首页模拟100个重组件

复制代码
<template>
    <div class="index">
        <div v-for="item in 100" :key="item">
            <sub-index v-if="defer(item)"></sub-index>
        </div>
    </div>
</template>

<script setup>
import subIndex from "./components/subIndex.vue";
import { useDefer } from "/src/utils/useDefer.js";
const defer = useDefer();
</script>

<style lang="less" scoped>
.index{
    width: 100%;
    height: 100%;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(3, fr);
    grid-gap: 0.1em;
}
</style>

子组件(重组件)

复制代码
<template>
    <div class="subHomePage">
        <div class="item" v-for="item in 5000" :key="item">
        </div>
    </div>
</template>

<script setup>

</script>
<style scoped lang="less">
.subHomePage{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 3px solid red;
    .item{
        width: 5px;
        height: 3px;
        background: #ccc;
        margin: 0.1em;
    }
}
</style>

useDefer.js文件

复制代码
import { ref, onUnmounted } from "vue";
export function useDefer(maxCount = 100){
    let count = ref(0);
    let reqId = null;
    function updataFrame() {
        count.value++;
        if(count.value >= maxCount) return 
        reqId = requestAnimationFrame(updataFrame);
    }
    updataFrame();

    onUnmounted(() => {
        cancelAnimationFrame(reqId)
    })

    return function (n){
        return count.value >= n;
    }
}
相关推荐
用户458203153171 分钟前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
牛蛙点点申请出战2 分钟前
仿微信语音 WaveView 实现
android·前端·ios
yiyesushu4 分钟前
react + next.js + ethers v6 项目实例
前端
明远湖之鱼5 分钟前
巧用 Puppeteer + Cheerio:批量生成高质量 Emoji 图片
前端·爬虫·node.js
huangyuchi.6 分钟前
【Linux系统】初见线程,概念与控制
linux·运维·服务器·页表·linux线程概念·linux线程控制·分页式存储管理
葡萄城技术团队6 分钟前
SpreadJS:让多源数据筛选排序如 Excel 般便捷高效
运维·服务器·excel
落笔忆梦6 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
艾小码7 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
是晓晓吖8 分钟前
page.waitForResponse 执行环境:页面还是 Node.js?
前端·puppeteer
三十_9 分钟前
【Docker】学习 Docker 的过程中,我是这样把镜像越做越小的
前端·后端·docker