利用交叉观察器解锁懒加载新姿势

转载JD团队文章

作者：宋成林 懒加载，一个在我们前端性能优化中高频出现的词汇，无论是懒加载图片还是懒加载模块，无非都是希望用户可以在滚动指定视区再去加载相应的资源， 从而达到节省用户流量、提升首次加载时间、减轻服务器的压力的目的。 “懒加载”不是一个新的概念，对于经验丰富的你们来说，一定积累了很多实现方法，但为什本文还要提出来呢？因为我们开发过程中，常用的实现方式都是通过监听页面的 scroll 事件来实现的，这种方法在使用过程中，scroll 事件会被高频触发，强制浏览器重排和重绘，从而不断增加浏览器的压力，导致浏览器性能的损失，有时可能出现卡顿或是闪烁的现象，即使使用了节流与去抖等方法，但还是会产生高昂的计算开销。那是否有更好的方法来解决呢，本文会讲解一种新实现方式，在此之前，先让我们回顾一下常用的实现姿势吧！ 常用姿势 姿势一：getBoundingClientRect() 方法 通过 Element.getBoundingClientRect() 方法可以返回元素的大小及其相对于视口的位置。 rectObject = object.getBoundingClientRect() ;返回值 rectObject 对象包含了一组用于描述边框的只读属性—— left 、top 、right 和 bottom ，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。 如下图： 随着页面滚动，我们可以获取懒加载元素相对于视口的顶点位置 rectObject.top 的像素值，当这个值小于可视区高 window.innerHeight ，表示已经进入可视区，开始加载数据，如果要提前加载，可以设置一个 threshold 阈值。 姿势二： 首先我们获取元素 Element.offsetTop ，获取可视区高度 window.innerHeigh 。 随着页面滚动，实时获取滚动条的高度 scrollTop ，如果元素 Element.offsetTop – 滚动条的高度 scrollTop 小于可视区高度 window.innerHeight 的时候，开始加载数据。 这两种实现方式都是通过监听页面的 scroll […]