--- theme: channing-cyan --- >本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！本文相关[demo](https://demo.sulg.top) 本文相关[仓库](https://github.com/sulgweb/demo) ## 前言 hello，小伙伴们好呀，我是`小羽同学`~ 性能优化系列文章又更新啦，这次主要是和小伙伴们来介绍一下`懒加载`以及相关的玩法。懒加载是前端性能优化中很重要的一环，可以有效地降低首页的白屏时间，并且可以广泛地应用到小伙伴们的项目中。提到懒加载，前端的小伙伴们通常的第一想法就是图片的懒加载啦。哈哈哈，其实懒加载并不止局限于图片懒加载，它也是有很多的`应用场景`。别着急，咱们一个一个的来介绍。 ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cfe2af0ef774f2ea1330f0539d8057e~tplv-k3u1fbpfcp-zoom-1.image) ## 路由懒加载使用过`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: , children: [], }, { path: '/lazy-intersection-observer', element: , children: [], }, { path: '/lazy-scroll', element: , children: [], } ]); return loading...}>{element}; } ``` 如下图所示，咱们的网站不会`一次性加载所有的文件`，当点击了其他的路由才会`陆续加载`相关的内容 ![router](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c43c805591874743a4f85fd503b31ab4~tplv-k3u1fbpfcp-zoom-1.image) ## 图片懒加载嘻嘻，图片懒加载，前端同学或多或少都会听过的东西啦。这里小羽将会介绍`三种`图片懒加载的方式。 ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37e635f3667f497ba65a39ecd468840b~tplv-k3u1fbpfcp-zoom-1.image) ### 基于浏览器特性的图片懒加载如果你不想引入任何的库，又不想写太多的代码的话，这可能是最适合你的方案了。只需要在你的image标签中添加一个`loading=“lazy”`即可 ``` import React from 'react'; import { imageList } from '@/utils/imageList'; import './index.less'; export default function LazyBrowser() { return (

{imageList.map((item) => (

))}

); } ``` ![browser1](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f1a61a4fc344446595c94dbb7ebd0a04~tplv-k3u1fbpfcp-zoom-1.image) 好了，最简单的实现方案已经搞定了。但是这个方案还是会还有一些缺点，比如无法设置默认的`加载图片`、`加载失败`的图片。 ### 基于滚动事件的图片懒加载有理想的小伙们，对此又采用其他方案，从而实现了这些功能。第一种是通过监听`滚动事件`，判断高度与图片的`位置`，从而实现`图片懒加载`。这里小伙伴们需要先熟悉三个滚动相关的参数：`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(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 (

{imageList.map((item, index) => ( (domRef.current[index] = e)} data-src={item} src={loadingPath} /> ))}

); } ``` 如下图所示，当图片不在`可视区域`内的时候就会显示咱们的loading图片，当到达咱们的可视区域就会`加载`真正的图片并且显示出来，从而达到`省流`的效果。 ![scroll](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb1b676528ca43369df804f928370c73~tplv-k3u1fbpfcp-zoom-1.image) ### 基于intersectionObserver的图片懒加载咱们可以通过监听scroll事件，判断图片是否在`可视区域`的方式外，从而实现图片懒加载。但是这样子做的话，其实咱们是`饶了`一大圈来实现`图片懒加载`，那有没有什么东西可以直接判断图片是否在可是区域内的呢？答案就是`intersectionObserver`。但是这个api在旧的浏览器上有一定的`兼容性`问题，如`can i use`中所示，如果需要兼容ie浏览器的小伙伴可以移步了，如果只需要兼容新版本的浏览器的小伙伴可以放心食用。 ![image-20221119134955146](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f3cee9a702449b0acb67a91d12181a5~tplv-k3u1fbpfcp-zoom-1.image) 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(); const visible = useIntersectionObserver(itemRef); return (

{visible ?

}

); }; export default function LazyIntersecctionObserver() { return (

{imageList.map((item) => ( ))}

); } ``` ## 模块懒加载 emmm，这个目前的话应该是暂时没有这样的一个定义的，是`小羽`基于应用场景这样子称呼。小伙伴在工作中有没有遇到那种一个页面中有很多个单独的`模块`，然后每个模块都会有自己相关的一些`渲染`或者`请求`的？如果咱们在一开始就将这些模块渲染出来，首先会消耗大量的`cpu性能`导致页面`初始化`的时候会存在`卡顿`的问题，其次如果这些单独的模块涉及到了相关的请求，那么它又会`消耗`用户的`流量`。总的来说，就是对用户的`体验`可能不会很好。因此，针对这种场景，咱们使用`模块的懒加载`。其实这里使用的模块懒加载，其实就是咱们基于`intersectionObserve`r图片懒加载的`延伸`使用方案。小伙伴们仔细想一下，咱们的`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 (

{!visible || loading ? :

{data}

}

); } ``` 实现效果如下图，咱们可以发现，在咱们不断滚动，使得模块进入咱们的`视野`，此时才会发起新的api请求，这样子可有有效的减少咱们服务端的`并发压力`，以及首屏的`渲染压力`，即可以减少首页`白屏`的时间。 ![module](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01af30e30a9a45cc9f62d327a7ca5f2d~tplv-k3u1fbpfcp-zoom-1.image) ## 小结本文小羽和小伙伴们介绍性能优化中的`懒加载`，包括了`三种`懒加载的方式：`路由懒加载`、`图片懒加载`、`模块懒加载`。并且都分别实现了相关的demo。希望可以在小伙伴们日常的开发中，可以提供到一些帮助。如果看这篇文章后，感觉有收获的小伙伴们可以`点赞`+`收藏`哦~ ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67f5371ba58c4c9da7d96c1630086f1b~tplv-k3u1fbpfcp-zoom-1.image) 如果想和`小羽`交流技术可以加下[wx](https://link.juejin.cn/?target=https%3A%2F%2Fcdn.sulg.top%2Fimages%2Fwx.png)，也欢迎小伙伴们来和小羽`唠唠嗑`，嘿嘿~