骨架屏 (懒加载优化)

骨架屏 (懒加载优化)

  • 即便通过 Webpack 的按需加载CDN 静态资源缓存代码分割 等技术来减少首屏的代码体积,首屏加载时的白屏时间(也称为首屏等待时间)仍然可能存在,尤其在网络条件较差或页面内容复杂时,常见的解决方案是使用骨架屏技术,数据加载前的占位动画可以表示内容还在加载中.
  • 在这里插入图片描述
核心概念和实现思路
  • 使用 IntersectionObserver 进行懒加载

    • IntersectionObserver 用来监听目标元素是否进入视区(即视口)。当某个占位元素(如 divsection)进入视口时,才异步加载对应的组件。这种方式可以避免首屏加载时不必要的资源占用,提升页面加载速度。

    • 当组件加载完成后,可以根据需求决定是否需要销毁监听器,比如加载完成即销毁,或者离开视区后销毁。

  • 异步组件加载

    • 在 Vue 中,使用 () => import('component') 来进行异步加载。异步组件的加载是在用户需要时(通常是当组件进入视区时)才会加载,而不是在页面初始加载时。

    • 通过这种懒加载方式,我们可以极大提升首屏加载的性能,因为只有用户能看到的组件会优先加载。

  • 骨架屏

    • 在真实组件加载前,用骨架屏占位,提供一个与真实组件大小相近的占位元素,让用户感知页面在加载中,避免空白页面的出现。骨架屏可以是简单的 HTML 结构,如 <section />,并通过 CSS 渲染出类似加载动画的效果。
  • 内存泄漏防止

    • 在页面或组件销毁时,必须调用 IntersectionObserver.disconnect(),防止继续监听无用的元素,避免内存泄漏。
实现步骤
1. 使用 IntersectionObserver 和骨架屏
  • 通过骨架屏占位符和 IntersectionObserver 实现组件懒加载,先监听占位元素,进入视口时再加载真正的组件。 (注意下面的实现是 v-if,也可以用v-show)

  • 示例代码

  •  <template><div><!-- 占位元素 (骨架屏) --><section ref="observerTarget" class="skeleton-screen"><!-- 真实组件在可视区时才会懒加载 --><component v-if="isVisible" :is="lazyComponent" /></section></div></template>​<script>export default {data() {return {isVisible: false, // 组件是否可见lazyComponent: null // 懒加载的真实组件};},mounted() {this.createObserver();},beforeDestroy() {// 销毁时取消监听,防止内存泄漏if (this.observer) {this.observer.disconnect();}},methods: {createObserver() {const observerOptions = {root: null, // 默认是视口threshold: 0.1 // 目标元素至少可见 10% 时触发};​this.observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {// 当目标元素进入可视区时,加载真实组件this.loadComponent();// 加载完成后销毁观察器this.observer.disconnect();}});}, observerOptions);​// 观察占位符骨架屏this.observer.observe(this.$refs.observerTarget);},loadComponent() {// 使用异步组件加载实际组件this.lazyComponent = () => import('./LazyLoadedComponent.vue');this.isVisible = true; // 组件可见}}};</script>​<style>.skeleton-screen {width: 100%;height: 200px;background-color: #eee; /* 骨架屏的占位效果 */}</style>
    
  • 要点说明:
    • 骨架屏<section ref="observerTarget" class="skeleton-screen"> 用作骨架屏,占位在实际组件加载之前。
    • IntersectionObserver:通过 IntersectionObserver 监听目标元素,当元素进入视区时加载真实组件并销毁观察器。
    • 异步组件加载this.lazyComponent = () => import('./LazyLoadedComponent.vue'); 在实际需要时才加载组件。
  • 注意点
    • 内存管理:一定要在组件销毁时调用 disconnect() 释放 IntersectionObserver,否则可能导致内存泄漏。
    • 异步组件加载的性能:异步组件加载可以显著减少首屏资源的消耗,但如果过度使用,可能会增加页面的延迟。确保只在必要时使用懒加载。

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

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

相关文章

【前端安全】js逆向之微信公众号登录密码

❤️博客主页&#xff1a; iknow181 &#x1f525;系列专栏&#xff1a; 网络安全、 Python、JavaSE、JavaWeb、CCNP &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐评论✍ 随着发展&#xff0c;越来越多的登录页面添加了密码加密的措施&#xff0c;使得暴力破解变得不在简单&a…

el-table添加fixed后错位问题

1 方案1 return {isShow:false, }mounted() {this.isShowtrue},watch: {$route(newRoute) {this.monitoredRoute newRoute; // 将新的路由信息保存到组件的monitoredRoute属性中// 执行其他操作或调用其他方法},//或$route(newRoute) {this.monitoredRoute newRoute; // 将新…

python三局两胜游戏

分为以下步骤实现这个功能 1、猜拳 2、机器产生数值 3、人去猜数字&#xff0c;定义剪刀石头布 4、控制机器产生&#xff0c;123程序运行的时候可能会出现一点玄学问题&#xff0c;就是&#xff0c;提示n1这一行不符合pep8然后报错&#xff0c;不用管&#xff0c;运行就可以&am…

在Linux系统安装Nginx

注意&#xff1a;Nginx端口号是80(云服务器要放行) 我的是基于yum源安装 安装yum源(下面这4步就好了) YUM源 1、将源文件备份 cd /etc/yum.repos.d/ && mkdir backup && mv *repo backup/ 2、下载阿里源文件 curl -o /etc/yum.repos.d/CentOS-Base.repo ht…

【三步 完全离线搭建 openwebui 】

完全离线linux 版open webui 的搭建 1.在具有网络连接的环境中下载whl 在有网络的环境&#xff0c;使用pip download可以保存所有的依赖包,可以使用-i 指定清华的镜像源加速下载速度。 # 命令&#xff1a; pip download <package_name> --only-binary:all: --wheel --…

VS Code Python 文件导入提示 xxx Module 不存在解决方式

VS Code Python 文件导入提示 xxx Module 不存在解决方式 引言正文如何打开 setting.json 文件引言 之前在 https://blog.csdn.net/u011699626/article/details/142612579?spm=1001.2014.3001.5501 一文中我们介绍了如何配置 VS code 中 Jupyter Notebook 的文件导入环境,这…

接口+内部类

接口和内部类是Java中两个重要的概念&#xff0c;可以在代码中使用它们来实现更灵活和模块化的设计。 接口是一种定义了一组抽象方法的特殊类&#xff0c;其中的方法没有具体的实现。通过实现接口&#xff0c;一个类可以获得接口中定义的方法&#xff0c;并提供实际的实现。接…

使用rust写一个Web服务器——多线程版本

文章目录 模拟慢请求多线程Web服务器实现为每个请求单独生成一个线程限制创建线程的数量ThreadPool的初始化ThreadPool的存储ThreadPool的设计 关闭和资源清理为ThreadPool实现Drop停止工作线程测试 仓库地址&#xff1a; 1037827920/web-server: 使用rust编写的简单web服务器 …

2024年云南省职业院校技能大赛赛程规章(大数据赛项)

大家期待已久的职业院校技能大赛在各个省份已经陆续出新文件了&#xff0c;近日云南省的赛程规章也是出来了&#xff0c;我相信不仅是对云南&#xff0c;对其他省份也很有参考价值&#xff0c;小编为大家精简整理了一下文件的内容。 一、竞赛目标 为适应大数据产业对高素质技术…

【Spring Security】基于SpringBoot3.3.4版本②如何配置免鉴权Path

基于Spring Boot 3.3.4,详细说明Spring Security 6.3.3的使用 摘要本地开发环境说明SecurityFilterChain介绍application.ymlWen3SecurityProperties.java修改DemoWen3Security修改SecurityFilterChainIgnoredPathController.javaIgnoredPathController2.java启动工程测试测试…

《OpenCV 计算机视觉》—— Harris角点检测、SIFT特征检测

文章目录 一、Harris 角点检测1.基本思想2.检测步骤3.OpenCV实现 二、SIFT特征检测1. SIFT特征检测的基本原理2. SIFT特征检测的特点3. OpenCV 实现 一、Harris 角点检测 OpenCV中的Harris角点检测是一种基于图像灰度值变化的角点提取算法&#xff0c;它通过计算每个像素点的响…

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十二集:制作完整地图和地图细节设置以及制作相机系统的跟随玩家和视角锁定功能

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作完整的地图和地图细节设置 1.制作地图前的设置2.制作地图前期该做的事3.制作地图之堆叠素材4.制作地图后期该做的事5.制作地图之修复意想不到的Bug二、…

C++仿函数的介绍以及priority_queue的介绍和模拟实现

目录 1.仿函数 1.1仿函数的介绍 1.2自定义类型使用仿函数 1.3自定义支持比较大小&#xff0c;但是比较的逻辑不是自己想要的逻辑 2.优先级队列priority_queue 2.1priority_queue的介绍 2.2priority_queue的使用 2.3priority_queue的模拟实现 1.仿函数 1.1仿函数的介绍…

微信小程序实战教程:如何使用map组件实现地图功能

在微信小程序中&#xff0c;map组件是一个非常实用的功能&#xff0c;它可以帮助我们快速实现地图展示、定位、标注等操作。本文将详细介绍如何在微信小程序中使用map组件&#xff0c;带你轻松掌握地图开发技能。 一、map组件概述 map组件是微信小程序官方提供的一个地图组件…

【C语言】指针篇 | 万字笔记

写在前面 在学习C语言过程&#xff0c;总有一个要点难点离不开&#xff0c;那就是大名鼎鼎的C语言指针&#xff0c;也是应为有指针的存在&#xff0c;使得C语言一直长盛不衰。因此不才把指针所学的所有功力都转换成这个笔记。希望对您有帮助&#x1f970;&#x1f970; 学习指…

彩虹易支付最新版源码及安装教程(修复BUG+新增加订单投诉功能)

该系统也没版本号&#xff0c;此版本目前是比较新的版本&#xff0c;增加了订单投诉功能&#xff0c;和一个好看的二次元模板。 此版本是全开源版&#xff0c;无一处加密文件,系统默认是安装后是打不开的&#xff0c; 本站特别修复了BUG文件&#xff0c;在PHP7.4环境下也没问…

【网络安全 | JAVA代码审计】基础安全问题和解决方法初探

未经许可,不得转载。 文章目录 SQL注入XSS文件上传XXE路径遍历SQL注入 漏洞代码: public String jdbc_sqli_vul(@RequestParam("username") String username) {StringBuilder result =

Java的学习(语法相关)

字符串存储的问题 char 和字符串都是字符的集合&#xff0c;它们之间的确有相似性&#xff0c;但在 Java 中它们有着不同的存储机制和处理方式。让我从 char 和 String 的本质区别入手来解释。 1. char 和 String 的区别 char 是基本类型&#xff1a;char 是 Java 中的基本数据…

微信小程序技术框架选型

“近期在对团队的微信小程序进行技术框架选型&#xff0c;故对目前主流的微信小程序技术框架进行了一些分析和比较&#xff0c;包括各框架的维护团队、社区链接、GitHub star数、优缺点对比等方面&#xff0c;为团队提供技术框架选型参考” 一、引言 随着移动互联网的快速发展…

【C++】多态(下)

个人主页~ 多态&#xff08;上&#xff09;~ 多态 四、多态的原理1、虚表的存储位置2、多态的原理3、动态绑定和静态绑定 五、单继承和多继承关系的虚函数表1、单继承中的虚函数表2、多继承中的虚函数表 六、多态中的一些小tips 四、多态的原理 1、虚表的存储位置 class A {…