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 = thisfunction 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;}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/43630.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单仿写MVC

代码地址&#xff08;需要自取&#xff09;&#xff1a;mvc_Imitation: 简单仿写实现MVC (gitee.com) 项目目录 先把架子搭好 Controller注解 Documented Retention(RetentionPolicy.RUNTIME) Target(ElementType.TYPE) public interface Controller { }RequestMapping Do…

大模型lora微调中,rank参数代表什么,怎么选择合适的rank参数

在大模型的LoRA&#xff08;Low-Rank Adaptation&#xff09;微调中&#xff0c;rank参数&#xff08;秩&#xff09;是一个关键的超参数&#xff0c;它决定了微调过程中引入的低秩矩阵的维度。具体来说&#xff0c;rank参数r表示将原始权重矩阵分解成两个低秩矩阵的维度&#…

11.索引_创建不同种类索引(primary+unique+复合....)

索引Index 文章目录 索引Index一、 索引简介1.定义2.索引分类2、索引优缺点3.索引关键字的选取原则 二、创建索引-(创建不同种类索引,删除)-索引失效 一、 索引简介 官网 1.定义 索引是将关键字数据以某种数据结构的方式存储到外存&#xff0c;用于提升数据的检索性能&#…

互助学习平台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;课程信息管理&#xff0c;课程分类管理&#xff0c;课程评价管理&#xff0c;学习计划管理&#xff0c;留言板管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;课程信息…

Databend 开源周报第 152 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend。 支持内置 UDFs …

数学建模美赛入门

数学建模需要的学科知识 高等数学线性代数 有很多算法的掌握是需要高等数学和线代的相关知识 如&#xff1a;灰色预测模型需要微积分知识&#xff1b;神经网络需要用到导数知识&#xff1b;图论和层次分析法等都需要用到矩阵计算的相关知识等&#xff1b; 概率论与数理统计&am…

忘记Apple ID密码怎么退出苹果ID账号?

忘记Apple ID密码怎么退出账号&#xff1f;Apple ID对每个苹果用户来说都是必不可少的&#xff0c;没有它&#xff0c;用户就不能享受iCloud、App Store、iTunes等服务。苹果手机软件下载、丢失解锁、恢复出厂设置等都需要使用Apple ID。如果忘记Apple ID 密码&#xff0c;这会…

Flutter 开启混淆打包apk,并反编译apk确认源码是否被混淆

第一步&#xff1a;开启混淆并打包apk flutter build apk --obfuscate --split-debug-info./out/android/app.android-arm64.symbols 第二步&#xff1a;从dex2jar download | SourceForge.net 官网下载dex2jar 下载完终端进入该文件夹&#xff0c;然后运行以下命令就会在该…

分享五款软件,成为高效生活的好助手

​ 给大家分享一些优秀的软件工具,是一件让人很愉悦的事情&#xff0c;今天继续带来5款优质软件。 1.图片放大——Bigjpg ​ Bigjpg是一款图片放大软件&#xff0c;采用先进的AI算法&#xff0c;能够在不损失图片质量的前提下&#xff0c;将低分辨率图片放大至所需尺寸。无论…

Windows10 企业版 LTSC 2021发布:一键点击获取!

Windows10企业版 LTSC 2021是微软发布的长达5年技术支持的Win10稳定版本&#xff0c;追求稳定的企业或者个人特别适合安装该系统版本。该版本离线制作而成&#xff0c;安全性高&#xff0c;兼容性出色&#xff0c;适合新老机型安装&#xff0c;力求带给用户更稳定、高效的操作系…

兼容性问题---H5屏幕适配方案

对前端计量单位的理解&#xff1a;px、vw、rem、em、%等&#xff1b; https://www.tiangong.cn/chatShare?share_ide3a157fe37e041de95a2 前端开发中常见的计量单位主要包括以下几种&#xff1a;px (像素): 屏幕显示的最小单位&#xff0c;一个像素表示显示器上一个点的颜色。…

【第24章】MyBatis-Plus之SQL注入器

文章目录 前言一、概述1. 使用场景2. 功能 二、注入器配置三、自定义全局方法攻略1. 定义SQL2. 注册自定义方法3.定义BaseMapper4.配置SqlInjector 四、注意事项五、更多示例六、实战1. 定义SQL2. 注册自定义方法3.定义BaseMapper4.配置SqlInjector5. 测试类6. 结果 总结 前言 …

QT调节屏幕亮度

1、目标 利用QT实现调节屏幕亮度功能&#xff1a;在无屏幕无触控时&#xff0c;将屏幕亮度调低&#xff0c;若有触控则调到最亮。 2、调节亮度命令 目标装置使用嵌入式Linux系统&#xff0c;调节屏幕亮度的指令为&#xff1a; echo x > /sys/class/backlight/backlight/…

Linux开机自启动连接wifi

&#x1f308;个人主页&#xff1a;Rookie Maker &#x1f525; 系列专栏&#xff1a;Linux &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于IT的优质内容&#xff01;&#x1f3c6;&#x1f3c6; &#x1f600;欢迎来到我的代码世界~ &#x1f601; 喜欢的…

【技术支持】npm镜像设置

临时设置 npm install <package> --registryhttps://registry.npmmirror.com/永久设置 npm config set registry https://registry.npmmirror.com/获取设置值 npm config get registry退回官方 npm config set registry https://registry.npmjs.org/

P8306 【模板】字典树

题目描述 给定 n 个模式串 s1​,s2​,…,sn​ 和 q 次询问&#xff0c;每次询问给定一个文本串 ti​&#xff0c;请回答 s1​∼sn​ 中有多少个字符串 sj​ 满足 ti​ 是 sj​ 的前缀。 一个字符串 t 是 s 的前缀当且仅当从 s 的末尾删去若干个&#xff08;可以为 0 个&#…

Kubernetes管理神器-插件管理器Krew

Kubernetes管理神器-插件管理器Krew Krew是Kubernetes的一个插件管理器&#xff0c;它允许用户搜索、安装和管理kubectl插件。通过Krew&#xff0c;用户可以方便地扩展kubectl的功能&#xff0c;使用社区提供的各种插件。 类似于apt,dnf,brew等工具&#xff0c;截至目前&…

环境快照:精通Conda中的conda env export命令

环境快照&#xff1a;精通Conda中的conda env export命令 引言 在科学计算和软件开发中&#xff0c;能够准确地复制和共享工作环境是至关重要的。Conda提供了conda env export命令&#xff0c;允许用户导出当前环境的配置&#xff0c;包括已安装的包及其版本。这使得环境的复…

2.贪心算法.基础

2.贪心算法.基础 基础知识题目1.分发饼干2.摆动序列3.最大子序和4.买股票的最佳时机24.2.买股票的最佳时机5.跳跃游戏5.1.跳跃游戏26.K次取反后最大化的数组和7.加油站8.分发糖果 基础知识 什么是贪心? 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 贪…

【代码随想录算法训练Day63】最小生成树算法

Day63 图论第七天 prim算法 #include<iostream> #include<vector> #include <climits>using namespace std; int main() {int v, e;int x, y, k;cin >> v >> e;// 填一个默认最大值&#xff0c;题目描述val最大为10000vector<vector<int…