【Web技术】906- 彻底玩转图片懒加载及底层实现原理

旧城等待， 2022-11-12 11:55 188阅读 0赞

## 前言 ##

`图片懒加载`其实已经是一个近乎“烂大街”的词语了，在大大小小的面试中也会被频繁的问到，我在之前的面试中也被问到了`图片懒加载的原因、实现方式及底层原理`，但由于自己平时很少做“图片”相关的处理，对于“懒加载”也是知之甚少，所以在面试中问答的也不是很好。

今天，我将首先从`浏览器底层渲染机制`来剖析为什么要去做图片懒加载，之后我将带大家一起来看下目前主流的几种实现图片懒加载的方式及其实现原理，最后会做一个展望。

## 为什么要做图片懒加载 ##

要问答这个问题，首先我们先来看下浏览器的底层渲染机制：

1、构建 DOM 树

2、样式计算

3、布局阶段

4、分层

5、绘制

6、分块

7、光栅化

8、合成

而在`构建DOM`的过程中如果遇到`img`在新老版本的`chrome`中表现又是不一样的：

*  老版本：阻塞 DOM 渲染
 *  新版本：虽然不会阻塞 DOM 渲染，但每一个图片请求都会占用一个 HTTP，而且 Chrome 最多允许对同一个 Host 同时建立六个 TCP 连接

当你打开一个网站时，浏览器会做许多工作，这其中包括下载各种可能用到的资源，然后渲染呈现在你面前，假设你的网站有大量的图片，那么加载的过程是很耗时的，尤其像那些电商类需要大量图片的网站，可想而知，网站的初始加载时间会很长，再加上网络等其它影响，用户体验会很差。

相信你经常遇到过一个网站卡在某个地方，一直在加载，这种体验很不好。我们都希望一输入网址，页面立马就呈现在眼前。

总结一下就是：`直接全部加载的话会减缓渲染速度，产生白屏等进而影响用户体验`。

## 基于原生 js 实现图片懒加载 ##

### 相关 API ###

先来看几个后面会用到的`API`

#### document.documentElement.clientHeight ####

获取屏幕可视区域的高度。

![cb3b6ed749776693c5367196b9c2c742.png][]

> “
> 
> 图片来源MDN\[1\]

#### element.offsetTop ####

获取元素相对于文档顶部的高度。

![5231e87a9b02e7a7741c9175adb6d6d5.png][]

> “
> 
> 图片来源阮一峰博客\[2\]

#### document.documentElement.scrollTop ####

获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离。

![9a839fd070109f11cb2322cf7a21a2ae.png][]

> “
> 
> 图片来源Seven's Blog

### 思路分析 ###

通过上面三个 API，我们获得了三个值：可视区域的高度、元素相对于其父元素容器顶部的距离、浏览器窗口顶部与容器元素顶部的距离也就是滚动条滚动的高度。

虽然这几个`API`很简单，但是单纯的去说还是有点抽象，这里我们还是用图来展示一下：![9f0ed736e02065176227dce95ff48170.png][]

看完上面这张图片，我想你已经明白了：如果满足`offsetTop-scroolTop<clientHeight`，则图片进入了可视区内，我们就去请求进入可视区域的图片。

### 代码实现 ###

基于上面的分析，我们很容易就可以写出如下代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>基于原生 js 实现图片懒加载</title>
        <style>
            img {
                display: block;
                width: 100%;
                height: 300px;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <img src="./img/1.png" alt="">
        <img src="./img/2.png" alt="">
        <img src="./img/3.png" alt="">
        <img src="./img/4.png" alt="">
        <img src="./img/5.png" alt="">
        <img src="./img/6.png" alt="">
        <img src="./img/7.png" alt="">
        <img src="./img/8.png" alt="">
    </body>
    <script>
            var imgs = document.querySelectorAll('img');
    
            //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
            function getRealTop(e) {
                var realTop = e.offsetTop;
                while(e = e.offsetParent) {
                    realTop += e.offsetTop;
                }
                return realTop;
            }
    
            function lazyLoad(imgs) {
                var H = document.documentElement.clientHeight;//获取可视区域高度
                var S = document.documentElement.scrollTop || document.body.scrollTop;
                for (var i = 0; i < imgs.length; i++) {
                    if (H + S > getRealTop(imgs[i])) {
                        imgs[i].src = imgs[i].getAttribute('src');
                    }
                }
            }
    
            window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
                lazyLoad(imgs);
            }
    </script>
    </html>

> “
> 
> 但上面的代码如果你在`lazyLoad`中打印，你会发现滚动条上下滚动时，`lazyLoad`会被频繁调用，造成很大的性能损失，这里我们可以给事件加上节流`throttle`

## 基于 getBoundingClientRect()实现图片懒加载 ##

先来了解一下这个`API`吧：

`getBoundingClientRect()`用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。`getBoundingClientRect()`是`DOM`元素到浏览器可视范围的距离（不包含页面看不见的部分）。

该函数返回一个`rectObject`对象，该对象有 6 个属性：`top`, `left`, `bottom`, `right`, `width`, `height`；这里的`top`、`left`和`css`中的理解很相似，`width`、`height`是元素自身的宽高，但是`right`，`bottom`和`css`中的理解有点不一样。`right`是指元素右边界距窗口最左边的距离，`bottom`是指元素下边界距窗口最上面的距离。

![892177f3aa030413b95f696e44cf6e24.png][]

### 思路分析 ###

通过这个 API，我们就很容易获取`img`元素相对于视口的顶点位置`rectObject.top`，只要这个值小于浏览器的高度`window.innerHeight`就说明进入可视区域：

function isInSight(el){
      const bound = el.getBoundingClientRect();
      const clientHeight = window.innerHeight;
      return bound.top <= clientHeight;
    }

### 代码实现 ###

这里结合第一种实现方式，做下改造，就得到了：

function loadImg(el){
     if(!el.src){
       const source = el.getAttribute('src');;
       el.src = source;
     }
    }
    function checkImgs(){
      const imgs = document.querySelectorAll('img');
      Array.from(imgs).forEach(el =>{
        if (isInSight(el)){
          loadImg(el);
        }
      })
    }
    window.onload = function(){
      checkImgs();
    }
    document.onscroll = function () {
      checkImgs();
    }

## 基于 InterpObserver 实现图片懒加载 ##

### 概念 ###

同样，还是先来看一下概念。

> “
> 
> 这里我们参考阮一峰大佬关于InterpObserver API\[3\]的介绍。

我们在平时的开发中，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。

![037a326a9726b4e1a8e149b3ce8268c5.gif][]

上图的绿色方块不断滚动，顶部会提示它的可见性。

传统的实现方法是，监听到`scroll`事件后，调用目标元素（绿色方块）的`getBoundingClientRect()`方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于`scroll`事件密集发生，计算量很大，容易造成性能问题。

目前有一个新的 `InterpObserver API`，可以自动"观察"元素是否可见，`Chrome 51+` 已经支持。由于可见（`visible`）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做`交叉观察器`。

### 使用 ###

它的用法也非常简单。

var io = new InterpObserver(callback, option);

上面代码中，`InterpObserver`是浏览器原生提供的构造函数，接受两个参数：`callback`是可见性变化时的回调函数，`option`是配置对象（该参数可选）。

构造函数的返回值是一个观察器实例。实例的`observe`方法可以指定观察哪个 `DOM` 节点。

// 开始观察
    io.observe(document.getElementById('container'));
    
    // 停止观察
    io.unobserve(element);
    
    // 关闭观察器
    io.disconnect();

上面代码中，`observe`的参数是一个 `DOM` 节点对象。

如果要观察多个节点，就要多次调用这个方法。

io.observe(elementA);
    io.observe(elementB);

### 代码实现 ###

看完相关的`API`，下面就让我们基于`InterpObserver`来实现图片懒加载：

const imgs = document.querySelectorAll('img') //获取所有待观察的目标元素
    var options = {}
    function lazyLoad(target) {
      const observer = new InterpObserver((entries, observer) => {
        entries.forEach(entrie => {
          if (entrie.isIntersecting) {
            const img = entrie.target;
            const src = img.getAttribute('src');
            img.setAttribute('src', src)
            observer.unobserve(img); // 停止监听已开始加载的图片
          }
    
        })
      }, options);
      observer.observe(target)
    }
    
    imgs.forEach(lazyLoad)

## `img.loading=lazy` ##

最后这种相对就简单很多了，它是 `Chrome` 自带的原生 `lazyload` 属性。我们先来看下他在各大浏览器的支持程度：

![736b540855d9b354080b5563fac41794.png][]

> “
> 
> 其实支持程度还不是特别好，我们你的应用对于浏览器兼容性要求比较高的话，建议还是先观望一波～

它的使用也非常简单，如标题所示：

<img src="example.jpg" loading="lazy" alt="zhangxinxu" width="250" height="150">

关于原生懒加载 loading=”lazy”的更多介绍可以参考张鑫旭大佬的浏览器 IMG 图片原生懒加载 loading=”lazy”实践指南\[4\]。

### 参考资料 ###

\[1\]

MDN: *https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight*

\[2\]

阮一峰博客: *http://www.ruanyifeng.com/blog/2009/09/find\_element\_s\_position\_using\_javascript.html*

\[3\]

InterpObserver API: *http://www.ruanyifeng.com/blog/2016/11/interpobserver\_api.html*

\[4\]

浏览器 IMG 图片原生懒加载 loading=”lazy”实践指南: *https://www.zhangxinxu.com/wordpress/2019/09/native-img-loading-lazy/*

![77442a9b78859b988ca1cb351af3a6de.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![92d556134a255b73513fc10a95f63d59.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[cb3b6ed749776693c5367196b9c2c742.png]: /images/20221022/17c762921ebd4390906f344f1f3027f6.png
[5231e87a9b02e7a7741c9175adb6d6d5.png]: /images/20221022/a87f82e4cd2b4b59be357ade5d647cba.png
[9a839fd070109f11cb2322cf7a21a2ae.png]: /images/20221022/9389b07cda2e469da9215824627c052a.png
[9f0ed736e02065176227dce95ff48170.png]: /images/20221022/db699d6ed5db4f9b857f4c1ea389e733.png
[892177f3aa030413b95f696e44cf6e24.png]: /images/20221022/71b24dd6b3d448ca82e36f51d31c48d0.png
[037a326a9726b4e1a8e149b3ce8268c5.gif]: /images/20221022/772a904983de4a3294dd9cc60738ce1b.png
[736b540855d9b354080b5563fac41794.png]: /images/20221022/7ffa5792674b4ce7be0f5e933f1ff8dd.png
[77442a9b78859b988ca1cb351af3a6de.gif]: /images/20221022/70a69f1fe6db49c18cc31c874a3ab03b.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[92d556134a255b73513fc10a95f63d59.gif]: https://img-blog.csdnimg.cn/img_convert/92d556134a255b73513fc10a95f63d59.gif