JavaScript手写专题——图片懒加载、滚动节流、防抖手写

图片懒加载场景：在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！我们再想，用户真的需要这么多图片吗？不对，用户点开页面的瞬间，呈现给他的只有屏幕的一部分（我们称之为首屏）。只要我们可以在页面打开的时候把首屏的图片资源加载出来，用户就会认为页面是没问题的。至于下面的图片，我们完全可以等用户下拉的瞬间再即时去请求、即时呈现给他。这样一来，性能的压力小了，用户的体验却没有变差——这个延迟加载的过程，就是 Lazy-Load

搭建图片懒加载场景

通常我们访问网页的时候会出现页面的场景，没来得及被图片填充完全的网页，是用大大小小的空 div 元素来占位的。一旦我们通过滚动使得这个 div 出现在了可见范围内，那么 div 元素的内容就会发生变化

可以设置这样一个html页面

使用data-语法给img标签添加自定义属性，比如使用data-src给img预制一个属性，存储当前图片将要显示的图片路径。之后当元素在可视窗口时通过js将data-src替换给src属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lazy-Load</title>
    <style>
      .container {
        display: flex;
        flex-wrap: wrap;
      }
      .img {
        width: 400px;
        height: 400px;
        margin: 10px;
        background: gray;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="img">
        <img alt="加载中1" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中2" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中3" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中4" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中5" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中6" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中7" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中8" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中9" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中10" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中11" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中12" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中13" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中14" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中15" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中16" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中17" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中18" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中19" class="pic" data-src="./images/image.avif" />
      </div>
      <div class="img">
        <img alt="加载中20" class="pic" data-src="./images/image.avif" />
      </div>
    </div>
  </body>
</html>

懒加载计算滚动到可视窗口

在懒加载的实现中，有两个关键的数值：一个是当前可视区域的高度，另一个是元素距离可视区域顶部的高度。

当前可视区域的高度，在和现代浏览器及 IE9 以上的浏览器中，可以用 window.innerHeight 属性获取。在低版本 IE 的标准模式中，可以用 document.documentElement.clientHeight 获取，这里我们兼容两种情况：

const viewHeight = window.innerHeight || document.documentElement.clientHeight

而元素距离可视区域顶部的高度，我们这里选用 getBoundingClientRect() 方法来获取返回元素的大小及其相对于视口的位置。对此 MDN 给出了非常清晰的解释：

该方法的返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 CSS 边框集合。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

lazyload方法

通过图片距离顶部的高度与内容区域的高度进行比较。如果图片没到可视区域，那么imgs[i].getBoundingClientRect().top将大于内容区域高度viewHight。如果图片在可视范围，那么viewHeight-imgs[i].getBoundingClientRect().top的差值将大于0

<script>
    // 获取所有的图片标签
    const imgs = document.getElementsByTagName('img')
    // 获取可视区域的高度
    const viewHeight = window.innerHeight || document.documentElement.clientHeight
    // num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
    let num = 0
    function lazyload(){
        for(let i=num; i<imgs.length; i++) {
            // 用可视区域高度减去元素顶部距离可视区域顶部的高度
            let distance = viewHeight - imgs[i].getBoundingClientRect().top
            // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
            if(distance >= 0 ){
                // 给元素写入真实的src，展示图片
                imgs[i].src = imgs[i].getAttribute('data-src')
                // 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
                num = i + 1
            }
        }
    }
    // 监听Scroll事件
    window.addEventListener('scroll', lazyload, false);
</script>

加载效果图

可以看右侧img的src属性，一开始是没有的，只要alt图片占位。当鼠标滚动到可视区域时src的属性才被替换为真实图片地址。

需要注意的是，这个 scroll 事件，是一个危险的事件——它太容易被触发了。试想，用户在访问网页的时候，是不是可以无限次地去触发滚动？尤其是一个页面死活加载不出来的时候，疯狂调戏鼠标滚轮（或者浏览器滚动条）的用户可不在少数啊！

再回头看看我们上面写的代码。按照我们的逻辑，用户的每一次滚动都将触发我们的监听函数。函数执行是吃性能的，频繁地响应某个事件将造成大量不必要的页面计算。因此，我们需要针对那些有可能被频繁触发的事件作进一步地优化。这里就引出了两位主角——throttle 与 debounce。

节流`throttle`优化懒加载

频繁触发回调导致的大量计算会引发页面的抖动甚至卡顿。为了规避这种情况，我们需要一些手段来控制事件被触发的频率。就是在这样的背景下，throttle（事件节流）和 debounce（事件防抖）出现了。

throttle 的中心思想在于：在某段时间内，不管你触发了多少次回调，我都只认第一次，并在计时结束时给予响应。

如果在delay秒后立即执行，可以使用时间戳判断。通过new Date方法获取当前时间戳，与上次执行的时间戳进行比较。如果差值超过了delay时间，那么执行fn。这里fn和last都是闭包的变量，throttle执行后，内部的function中仍然能够访问。

  function throttle(fn, delay) {
    let last = 0;
    return function () {
      let args = arguments;
      let now = +new Date();
      if (now - last >= delay) {
        fn.apply(this, args);
        last = now;
      }
    };
  }

节流还可以通过定时器异步处理。这个方法要比上面慢，因为setTimeout是异步函数，不会在delay后立即执行，而是等待事件循环处理后执行。

  function throttle2(fn, delay) {
    let timer = null;
    return function () {
      let context = this;//记住this
      let args = arguments;//参数
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(context, args);//执行fn
          timer = null;
        }, delay);
      }
    };
  }

给鼠标滚动事件添加节流函数

  const throttleScroll = throttle(lazyLoad, 3000);
  window.addEventListener("scroll", throttleScroll);

节流效果

可以看到下方，虽然鼠标在滚动，但是页面还是延迟加载

实现防抖debounce

防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。

 function debounce(fn, delay) {
    let timer = null;
    return function () {
      let context = this;
      let args = arguments;
      clearTimeout(timer); //每次都清空定时器
      timer = setTimeout(() => {
        //定时器执行fn
        fn.apply(context, args);
      }, delay);
    };
  }

鼠标滚动添加防抖效果

  const debounceScroll = debounce(lazyLoad, 1000);
  window.addEventListener("scroll", debounceScroll);

防抖效果

鼠标疯狂滚动，当鼠标停下来的时候延迟delay加载图片

但是debouce有个问题，debounce 的问题在于它“太有耐心了”。试想，如果用户的操作十分频繁——他每次都不等 debounce 设置的 delay 时间结束就进行下一次操作，于是每次 debounce 都为该用户重新生成定时器，回调函数被延迟了不计其数次。频繁的延迟会导致用户迟迟得不到响应，用户同样会产生“这个页面卡死了”的观感。

为了避免弄巧成拙，我们需要借力 throttle 的思想，打造一个“有底线”的 debounce——等你可以，但我有我的原则：delay 时间内，我可以为你重新生成定时器；但只要delay的时间到了，我必须要给用户一个响应。这个 throttle 与 debounce “合体”思路，已经被很多成熟的前端库应用到了它们的加强版 throttle 函数的实现中

有底线的防抖——防抖和节流结合体

delay 时间内，我可以为你重新生成定时器；但只要delay的时间到了，我必须要给用户一个响应

function debounce2(fn, delay) {
    let last = 0;
    let timer = null;
    return function (...args) {
      const context = this;
      const now = +new Date();
      if (now - last < delay) {
        //防抖
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
          last = now;
        }, delay);
      } else {
        fn.apply(context, args);
        last = now;
      }
    };
  }

效果如下，即使鼠标滚动没有停止，到了指定时间一定会执行