谈谈面试常考题：懒加载，防抖，节流（方法实现详解）

本文链接：https://blog.csdn.net/qq_62012466/article/details/139816728

前言

最近在学习中确实收获了挺多东西，其中我觉得有必要拿来进行分享一下的就是懒加载了，还有相关的防抖和节流。因为在浏览器中这些都是属于很常见的性能优化，面试也是常考题。话不多说，速度发车。

什么是懒加载？懒加载实现了什么效果？

引言

像上图中的百度图片，有成千上万的图片，但是每个图片都是通过网络请求进行拿到。虽然是异步进行但是同时进行大量图片的请求，整个页面的渲染以及网络的请求资源的下载将会变得非常缓慢，影响用户观感体验。这对于前端网站来说是十分致命的缺陷。

在当今互联网时代，用户体验已成为衡量网站质量的重要指标之一。随着网页内容的日益丰富，特别是图片资源的大量使用，如何高效且快速地展示页面成为了前端开发中不可忽视的挑战。其中，“图片懒加载”技术便是解决这一问题的有效手段，它不仅能够提升页面加载速度，还能显著改善用户体验。

懒加载到底做了什么？

简单来说其实懒加载做的事情就是只加载用户屏幕目前所需要的图片，这里可能不是特别准确，但是大致意思就是加载目前用户屏幕所展示的图片，其他的图片不进行加载，只有当用户滑动页面的时候，其他图片进行判断加载（图片出现在用户屏幕中则进行加载）

这里提一嘴，只要浏览器已经加载过的图片就会加入到缓存中,浏览器可以直接从缓存中加载图片，而不是每次都重新发起网络请求。

懒加载原理是什么呢？为什么懒加载能控制图片的加载呢？

这里就不得不聊聊图片的特性了，其实只要图片具有src属性，浏览器就会对该地址进行网络请求下载资源。懒加载就是通过判断加载（前面提过）然后给图片进行src赋值，浏览器就会自动发送网络请求给资源地址进行下载。

懒加载实例和实现讲解

其实懒加载就是两点需要注意

如何控制img属性src赋值，并且图片地址存放在哪
什么时候进行加载什么时候不进行加载

关于第一点我的实现是使用自定义属性data-src，data-为前缀的属性是HTML5引入的一个特性，允许开发者在HTML元素上嵌入自定义的数据属性。这类属性为非标准的属性，提供了存储与元素相关的元数据的方式，而不会影响到HTML的语义结构。在JavaScript中，可以通过元素的dataset属性轻松访问这些自定义数据属性。
这样我们就可以先使用data-src存储图片的资源地址，等到图片应当加载的时候，再进行src的赋值。

第二点我通过画图来解释

代码实现详解

实现步骤主要分为以下几点:

监听鼠标滚轮事件，因为只有鼠标进行滚动之后新的图片才有可能出现在屏幕中，所以这里我们进行鼠标滚轮监听，只要鼠标滚动进行了滚动我们就执行图片加载方法进行判断。
图片什么时候加载，主要需要做两件事情，第一件事情就是，判断图片是否进入到了屏幕中，这里我用的是
offsetTop属性，offsetTop 是一个JavaScript DOM属性，用于获取一个元素相对于其最近的具有定位（positioned）的父元素顶部的距离。如果元素的所有祖先元素都没有定位（默认的 position: static），那么 offsetTop 会返回元素相对于整个文档顶部的距离。

这里只需要判断图片的offsetTop属性（距离文档顶部的距离）是否 <= 滚轮已经滚动的距离scrollTop+屏幕高度clientHeight。让我画个图- ̗̀(๑ᵔ⌔ᵔ๑)

第二件事情就是通过dataset对象属性拿到自定义属性进行src的赋值，这一步知道dataset后就非常简单。

下面是我的实例代码，大家可以直接复制然后使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"