什么是懒加载
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。
在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。
懒加载带来的好处
- 减轻服务器的压力
对于一个展示大量图片的网页，使用懒加载可以显著地减少浏览器向服务器发送的请求数量，降低了服务器的压力，同时也减小了浏览器的负担。 - 提升用户体验
如果同时加载所有图片，会导致首屏的加载速度较慢，因为浏览器会把不在可视区域内的图片也一并加载。使用懒加载可以保证浏览器首先加载用户可视区域内的资源，提高用户体验。
原理
1、通过监听差值实现
- 待加载图片的高度：img.clientHeight
- 图片顶部到文档顶部的距离：img.offsetTop
- 浏览器窗口滚动过的距离：document.documentElement.scrollTop 或 document.body.scrollTop
- 浏览器可视窗口高度：document.documentElement.clientHeight 或 window.innerHeight
2、通过getBoundingClientRect
方法返回DOMRect对象，其提供了元素的大小及其相对于视口的位置
3、使用IntersectionObserver
-
observe() 将一个元素加入监听目标集合
-
unobserve() 将一个元素移出监听目标集合
当监听目标发生滚动变化时触发的回调函数。该回调函数接受一个参数 entries, 它其实是 IntersectionObserverEntry 的实例。简单来讲这个 entries 就存储着我们用 observe() 添加给 observer 实例的那些需要被监听的元素与其根元素容器在某一特定过渡时刻的交叉状态（默认为顶级文档的视窗）。而每一个 entry 有一个 target 属性，指向这个被监听的元素。
图片懒加载再次优化
我们有没有仔细想过上述的三种方案是否完美呢？
他的概念：进入可视区域内容的资源会被加载
试想一下，如果我们是一个快速滚动的过程呢？那是不是所有进入可视区域的图片都会加载，然后我们的浏览器又出现请求过多又出现阻塞,页面卡顿
那是不是可以尝试优化这个快速滚动？
方案1、间隔时间出发一次资源加载。（截流）
- 减轻滚动时网络请求负担
- 适合于在滚动时还要加载资源
方案2、停止后去加载资源。（防抖）
- 最优的减轻滚动时网络请求负担
- 适用于在滚动时不需要加载资源的
