本文为稀土AdminJS技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！
本文相关demo
本文相关仓库
前言
hello，小伙伴们好呀，我是小羽同学~
性能优化系列文章又更新啦，这次主要是和小伙伴们来介绍一下懒加载以及相关的玩法。
懒加载是前端性能优化中很重要的一环，可以有效地降低首页的白屏时间，并且可以广泛地应用到小伙伴们的项目中。
提到懒加载，前端的小伙伴们通常的第一想法就是图片的懒加载啦。
哈哈哈，其实懒加载并不止局限于图片懒加载，它也是有很多的应用场景。
别着急，咱们一个一个的来介绍。
路由懒加载
使用过react/vue等框架的小伙伴们，或多或少都有使用过这个东西吧？
特别是使用了vite的小伙伴们，如果不做路由的懒加载，按vite的逻辑，会将每一个tsx、less文件都加载出来，从而导致第一次加载的时间变得超级久的。
路由懒加载的作用就是将咱们的路由模块，剥离出来成为一个个单独的js和css文件，当你需要使用到他的时候，再将相关的文件加载并渲染出来。
这里以react为例子，主要是使用了react中的lazy和Suspense。
lazy和Suspense配合使用，可以显著减少主包的体积，加快加载速度，从而提升用户体验。当路由切换的时候才会加载lazy中的代码。而代码的加载是一个异步的过程，所以当代码没有完成加载的时候则会显示fallback中的内容，一般是一个loading组件，用于告诉用户正在加载中。当加载完成了，就会显示lazy的内容。
import React, { lazy, Suspense } from 'react';
import { useRoutes, Navigate } from 'react-router-dom';
const LazyBrowser = lazy(() => import('@/pages/LazyBrowser'));
const LazyIntersectionObserver = lazy(
() => import('@/pages/LazyIntersectionObserver'),
);
const LazyScroll = lazy(() => import('@/pages/LazyScroll'));
export default function Router() {
let element = useRoutes([
{
path: '/lazy-browser',
element: <LazyBrowser />,
children: [],
},
{
path: '/lazy-intersection-observer',
element: <LazyIntersectionObserver />,
children: [],
},
{
path: '/lazy-scroll',
element: <LazyScroll />,
children: [],
}
]);
return <Suspense fallback={<div>loading...</div>}>{element}</Suspense>;
}
如下图所示，咱们的网站不会一次性加载所有的文件，当点击了其他的路由才会陆续加载相关的内容
图片懒加载
嘻嘻，图片懒加载，前端同学或多或少都会听过的东西啦。
这里小羽将会介绍三种图片懒加载的方式。
基于浏览器特性的图片懒加载
如果你不想引入任何的库，又不想写太多的代码的话，这可能是最适合你的方案了。
只需要在你的image标签中添加一个loading=“lazy”即可
import React from 'react';
import { imageList } from '@/utils/imageList';
import './index.less';
export default function LazyBrowser() {
return (
<div className='lazy-browser'>
{imageList.map((item) => (
<div className='image' key={item}>
<img loading='lazy' src={item} />
</div>
))}
</div>
);
}
好了，最简单的实现方案已经搞定了。但是这个方案还是会还有一些缺点，比如无法设置默认的加载图片、加载失败的图片。
基于滚动事件的图片懒加载
有理想的小伙们，对此又采用其他方案，从而实现了这些功能。
第一种是通过监听滚动事件，判断高度与图片的位置，从而实现图片懒加载。
这里小伙伴们需要先熟悉三个滚动相关的参数：offsetTop、clientHeight、scrollTop
- offsetTop： 当前元素顶部距离最近父元素顶部的距离，和有没有滚动条没有关系。
- clientHeight：当前元素的高度，包括padding但不包括border、水平滚动条、margin的元素的高度。
- scrollTop：代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop===0。
首先先将loading的图片路径赋给每个img标签中的src，将真实的图片路径赋值到data-src上。
然后就是监听滚动事件，当前元素距离顶部的高度-clientHeight<=0的时候，即说明已经进入可视区域了，这时候咱们就会将img标签中的src路径修改为data-src中的真实图片路径。
import React, { useEffect, useRef } from 'react';
import { imageList } from '@/utils/imageList';
import './index.less';
const loadingPath = location.href + '/images/loading.gif';
export default function LazyScroll() {
const domRef = useRef([]);
const lazyScrollRef = useRef<HTMLDivElement>(null);
useEffect(() => {
getTop();
lazyScrollRef.current.addEventListener('scroll', getTop);
return () => {
if (lazyScrollRef.current) {
lazyScrollRef.current.removeEventListener('scroll', getTop);
}
};
}, []);
const getTop = () => {
// 当前视窗的可视区域
let clientHeight = lazyScrollRef.current.clientHeight;
let len = domRef.current.length;
for (let i = 0; i < len; i++) {
// 元素距离页面顶部的距离
let { top } = domRef.current[i].getBoundingClientRect();
// 当图片减去可视区域高度小于等于0的时候，将data-src的值赋值给src
if (top - clientHeight <= 0) {
if (domRef.current[i].src === loadingPath) {
domRef.current[i].src = domRef.current[i].dataset.src;
}
}
}
};
return (
<div className='lazy-scroll' ref={lazyScrollRef}>
{imageList.map((item, index) => (
<img
className='image'
key={item}
ref={(e) => (domRef.current[index] = e)}
data-src={item}
src={loadingPath}
/>
))}
</div>
);
}
如下图所示，当图片不在可视区域内的时候就会显示咱们的loading图片，当到达咱们的可视区域就会加载真正的图片并且显示出来，从而达到省流的效果。
基于intersectionObserver的图片懒加载
咱们可以通过监听scroll事件，判断图片是否在可视区域的方式外，从而实现图片懒加载。
但是这样子做的话，其实咱们是饶了一大圈来实现图片懒加载，那有没有什么东西可以直接判断图片是否在可是区域内的呢？
答案就是intersectionObserver。
但是这个api在旧的浏览器上有一定的兼容性问题，如can i use中所示，如果需要兼容ie浏览器的小伙伴可以移步了，如果只需要兼容新版本的浏览器的小伙伴可以放心食用。
ok，那么咱们就基于intersectionObserver简单的封装一个自定义的hooks吧，这个hooks的作用主要是会监听咱们的dom节点，如果未在可视区域的时候会返回false，如果在可视区域则会返回true，并且当第一次出现在可视区域的时候会清除监听，然后在销毁的时候也是需要记得清除一下监听哦。
import { useState, useEffect, useRef, useMemo } from 'react';
const useIntersectionObserver = (domRef: any) => {
const [visible, setVisible] = useState(false);
const intersectionObserver = useMemo(
() =>
new IntersectionObserver(
(
entries: IntersectionObserverEntry[],
observer: IntersectionObserver,
) => {
entries.map((item) => {
if (item.isIntersecting) {
setVisible(true);
observer.disconnect();
}
});
},
),
[],
);
useEffect(() => {
if (domRef.current) {
intersectionObserver.observe(domRef.current);
}
}, [domRef.current]);
useEffect(() => {
return () => {
// 清除监听
intersectionObserver.disconnect();
};
}, []);
return visible;
};
export default useIntersectionObserver;
当咱们把这个hooks封装好了，你会发现原来图片懒加载如此简单。只需要往useIntersectionObserver中传入你的dom节点，根据返回值是false 或者 true，分别显示loading和真实的图片即可。
实现的效果和上个方案一致，就不单独截图啦。使用方式如下：
import React, { useRef } from 'react';
import { imageList } from '@/utils/imageList';
import useIntersectionObserver from '@/hooks/useIntersectionObserver';
import './index.less';
const loadingPath = location.origin + '/images/loading.gif';
const Item = ({ url }) => {
const itemRef = useRef<HTMLDivElement>();
const visible = useIntersectionObserver(itemRef);
return (
<div className='image' ref={itemRef}>
{visible ? <img src={url} /> : <img src={loadingPath} />}
</div>
);
};
export default function LazyIntersecctionObserver() {
return (
<div className='lazy-intersection-observer'>
{imageList.map((item) => (
<Item url={item} key={item} />
))}
</div>
);
}
模块懒加载
emmm，这个目前的话应该是暂时没有这样的一个定义的，是小羽基于应用场景这样子称呼。
小伙伴在工作中有没有遇到那种一个页面中有很多个单独的模块，然后每个模块都会有自己相关的一些渲染或者请求的？如果咱们在一开始就将这些模块渲染出来，首先会消耗大量的cpu性能导致页面初始化的时候会存在卡顿的问题，其次如果这些单独的模块涉及到了相关的请求，那么它又会消耗用户的流量。总的来说，就是对用户的体验可能不会很好。
因此，针对这种场景，咱们使用模块的懒加载。
其实这里使用的模块懒加载，其实就是咱们基于intersectionObserver图片懒加载的延伸使用方案。
小伙伴们仔细想一下，咱们的useIntersectionObserver这个自定义的hooks里做了些什么？
这个hooks会监听咱们传入的dom，然后当这个dom元素在可视区域的时候会返回true。如果咱们在true的时候将图片替换成咱们相关模块，这不就是模块化的懒加载了吗？
使用的方式一致
import React, { useEffect, useState, useRef } from 'react';
import useIntersectionObserver from '@/hooks/useIntersectionObserver';
import axios from 'axios';
import { Spin } from 'antd';
export default function LazyModuleItem() {
const itemRef = useRef(null);
const visible = useIntersectionObserver(itemRef);
const [loading, setLoading] = useState(true);
const [data, setData] = useState('');
const init = () => {
setLoading(true);
axios
.get('https://api.uomg.com/api/comments.163?format=text')
.then((res: any) => {
setLoading(false);
console.log(res);
setData(res.data);
});
};
useEffect(() => {
if (visible) {
init();
}
}, [visible]);
return (
<div ref={itemRef}>
{!visible || loading ? <Spin /> : <div>{data}</div>}
</div>
);
}
实现效果如下图，咱们可以发现，在咱们不断滚动，使得模块进入咱们的视野，此时才会发起新的api请求，这样子可有有效的减少咱们服务端的并发压力，以及首屏的渲染压力，即可以减少首页白屏的时间。
小结
本文小羽和小伙伴们介绍性能优化中的懒加载，包括了三种懒加载的方式：路由懒加载、图片懒加载、模块懒加载。并且都分别实现了相关的demo。希望可以在小伙伴们日常的开发中，可以提供到一些帮助。
如果看这篇文章后，感觉有收获的小伙伴们可以点赞+收藏哦~
如果想和小羽交流技术可以加下wx，也欢迎小伙伴们来和小羽唠唠嗑，嘿嘿~