前端性能优化--懒加载

前端性能优化–懒加载

1）图片懒加载
图片压缩网站
TinyPNG 网站: https://tinypng.com/

1、它的大致实现方式是首先把图片的真实路径存储在 data-src 的自定义属性中，同时将图片的默认 src 设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。

<img src="loading.gif" data-src="xxx.webp" />
1

2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。

const imgs = document.querySelectorAll("img[data-src]");
// IntersectionObserver
//用法参见 https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/IntersectionObserver
const io = new IntersectionObserver((entires) => {
  entires.forEach((item) => {
    // 获取目标元素
    const oImg = item.target;
    // 当图片进入视口的时候，就赋值图片的真实地址
    // 并且注意已赋值过的图片就不要再次赋值了，防止来回滚动时重新赋值
    // intersectionRatio表示目标元素是否位于视区内
    if (item.isIntersecting && oImg.getAttribute("data-src")) {
      window.requestAnimationFrame(() => {
        oImg.setAttribute("src", oImg.getAttribute("data-src"));
        // 已赋值的图片移除data-src属性
        oImg.removeAttribute("data-src");
      });
    }
  });
});
Array.from(imgs).forEach((element) => {
  //给每一个图片设置监听，当图片进入和退出视区时，都会执行该监听
  io.observe(element);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。

<img loading="lazy" src="loading.gif" data-src="xxx.webp" /> 
1

2）Vue 中的懒加载

在 Vue 3 中，可以使用 defineAsyncComponent[5] 方法来创建异步组件，然后使用 ES 模块动态导入(import())语法，返回一个 Promise。这样仅在页面需要它渲染时才会调用加载内部实际组件的函数，实现延迟加载。

import { defineAsyncComponent } from "vue";

// 使用defineAsyncComponent定义懒加载组件
const LazyComponent = defineAsyncComponent(
  () => import("./LazyComponent.vue") // 异步加载组件
);

export default {
  components: {
    LazyComponent,
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

可参考

https://mp.weixin.qq.com/s/R4kwh2j8KOUHK__gJhYlIQ
https://mp.weixin.qq.com/s/YUjEAhvHT134pJ6lYgn76Q