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;
    }
}
相关推荐
獭.獭.12 分钟前
Linux -- 信号【上】
linux·运维·服务器
智能化咨询14 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang16 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼19 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
路由侠内网穿透1 小时前
本地部署 GPS 跟踪系统 Traccar 并实现外部访问
运维·服务器·网络·windows·tcp/ip
ZERO_pan4 小时前
服务器装机遇到的问题
运维·服务器
l1t4 小时前
利用DeepSeek实现服务器客户端模式的DuckDB原型
服务器·c语言·数据库·人工智能·postgresql·协议·duckdb
杀气丶4 小时前
Linux下运行芙蕾雅天堂2【俄文简译L2FATER】
运维·服务器·天堂2·l2fater·l2fater.cn
喵手4 小时前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络