前端性能优化--懒加载

前端性能优化–懒加载

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

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

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

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);
});

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

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

2）Vue 中的懒加载

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

import { defineAsyncComponent } from "vue";// 使用defineAsyncComponent定义懒加载组件
const LazyComponent = defineAsyncComponent(() => import("./LazyComponent.vue") // 异步加载组件
);export default {components: {LazyComponent,},
};