首页 > 其他分享 >骨架屏(懒加载优化)

骨架屏(懒加载优化)

时间:2024-09-29 22:51:08浏览次数:9  
标签:骨架 占位 组件 IntersectionObserver 首屏 优化 加载

即便通过 Webpack 的按需加载CDN 静态资源缓存代码分割 等技术来减少首屏的代码体积,首屏加载时的白屏时间(也称为首屏等待时间)仍然可能存在,尤其在网络条件较差或页面内容复杂时,常见的解决方案是使用骨架屏技术,数据加载前的占位动画可以表示内容还在加载中

骨架屏

核心概念和实现思路

  1. 使用 IntersectionObserver 进行懒加载
    • IntersectionObserver 用来监听目标元素是否进入视区(即视口)。当某个占位元素(如 divsection)进入视口时,才异步加载对应的组件。这种方式可以避免首屏加载时不必要的资源占用,提升页面加载速度。
    • 当组件加载完成后,可以根据需求决定是否需要销毁监听器,比如加载完成即销毁,或者离开视区后销毁。
  2. 异步组件加载
    • 在 Vue 中,使用 () => import('component') 来进行异步加载。异步组件的加载是在用户需要时(通常是当组件进入视区时)才会加载,而不是在页面初始加载时。
    • 通过这种懒加载方式,我们可以极大提升首屏加载的性能,因为只有用户能看到的组件会优先加载。
  3. 骨架屏
    • 在真实组件加载前,用骨架屏占位,提供一个与真实组件大小相近的占位元素,让用户感知页面在加载中,避免空白页面的出现。骨架屏可以是简单的 HTML 结构,如 <section />,并通过 CSS 渲染出类似加载动画的效果。
  4. 内存泄漏防止
    • 在页面或组件销毁时,必须调用 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,否则可能导致内存泄漏。
  • 异步组件加载的性能:异步组件加载可以显著减少首屏资源的消耗,但如果过度使用,可能会增加页面的延迟。确保只在必要时使用懒加载。

参考

https://blog.csdn.net/qq_42002794/article/details/124125526

Vue首屏性能优化组件 - Blog (touchczy.top)

https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html

.top/zh-cn/Vue/Vue首屏性能优化组件.html#描述)

https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html

标签:骨架,占位,组件,IntersectionObserver,首屏,优化,加载
From: https://blog.csdn.net/youxinm24/article/details/142645444

相关文章

  • 今日一学,sql优化,创建索引的优缺点
    收藏了,但是不打开,久而久之就忘了,今日一学!所谓是好记性不如烂键盘。**2024Javaoffer收割指南**sql优化尽量避免使用select*,返回无用的字段会降低效率。优化方式:只能使用具体的字段代替select具体字段,只返回使用到的字段。(虽然我经常select*但是一个表字段非常多,那......
  • 【Web APIs day 03 事件流、事件委托、其他事件:优化多个事件绑定和实现常见网页交互】
    WebAPIs-第3天目标:学习事件流,事件委托,其他事件等知识,优化多个事件绑定和实现常见网页交互事件流移除事件监听其他事件元素尺寸与位置综合案例事件流为什么要学习事件流?可以帮我们解决一些疑惑,比如点击子盒子会会弹出2次的问题事件流指的是事件完整执行过程中的......
  • java-快速将普通main类变为javafx类,并加载自定义fxml
    java-快速将普通main类变为javafx类,并加载自定义fxml前提步骤1.普通类继承Application2.实现main方法3.写一个controller4.写一个fxml文件5.写start方法加载fxml6.具体代码7.运行即可前提使用自带javafx的jdk,这里使用的是jdk1.834,当然你可以使用其他的可行......
  • OpenWRT部署后优化
    一、配置国内opkg源系统——软件包——配置opkg修改为 清华大学镜像源 (以23.05.4版本为例,别的版本也可以按需更改)src/gzopenwrt_corehttps://mirrors.tuna.tsinghua.edu.cn/openwrt/releases/23.05.4/targets/x86/64/packagessrc/gzopenwrt_basehttps://mirrors.tuna.t......
  • 1267:【例9.11】01背包问题(从二维优化一维dp问题)
    代码如下:#include<iostream>usingnamespacestd;intdp[10010],w[200],c[200];intmain(){ intm,n; cin>>m>>n; for(inti=1;i<=n;i++) { cin>>w[i]>>c[i]; } for(inti=1;i<=n;i++) { for(intj=m;j......
  • Python Web 应用中的 API 网关集成与优化
    PythonWeb应用中的API网关集成与优化目录......
  • 优化器:从SGD到Adam到AdamW
    1.SGD随机梯度下降(stochasticgradientdescent,SGD)输入数据为(x,y)组成的pair,模型参数是\(W\),随机选择一批样本组成一个batch,输入模型计算loss:\(L=f(X,Y;W)\),并求出梯度,更新参数时:\(W=W-lr*\frac{\partialL}{\partialW}\)这就是随机梯度下降。2.Adam本段参考视频:https......
  • 优化 Windows 触控笔的设置,你可以创建一个 .reg 文件来修改注册表。下面是一个示例内
    优化Windows触控笔的设置,你可以创建一个.reg文件来修改注册表。下面是一个示例内容,你可以根据需要进行调整:打开记事本或任何文本编辑器。将以下内容复制并粘贴到文件中:CopyCodeWindowsRegistryEditorVersion5.00;优化触控笔设置[HKEY_CURRENT_USER\Software\Mi......
  • Hugging Face + JuiceFS:多用户多节点环境下提升模型加载效率
    HuggingFace的Transformers是一个功能强大的机器学习框架,提供了一系列API和工具,用于预训练模型的下载和训练。为了避免重复下载,提高训练效率,Transformers会自动下载和缓存模型的权重、词表等资源,默认存储在~/.cache/huggingface/hub目录下。这个缓存数据的机制。但是,当......
  • SpringBoot学科竞赛管理平台:开发与优化
    3系统分析3.1可行性分析在进行可行性分析时,我们通常根据软件工程里方法,通过四个方面来进行分析,分别是技术、经济、操作和法律可行性。因此,在基于对目标系统的基本调查和研究后,对提出的基本方案进行可行性分析。3.1.1技术可行性本学科竞赛管理系统的设计与实现采用Java......