原理

优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能

原理：

一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给``的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

监听页面滚动事件

• 分析clientHeight、scrollTop、scrollHeight三者的属性关系。

window.addEventListener('scroll', function() {
  const clientHeight = document.documentElement.clientHeight;
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  if (clientHeight + scrollTop >= scrollHeight) {
    // 检测到滚动至页面底部，进行后续操作
    // ...
  }
}, false);

页面布局位置基础知识

• 网页可见区域宽： document.body.clientWidth;
• 网页可见区域高： document.body.clientHeight;
• 网页可见区域宽： document.body.offsetWidth (包括边线的宽);
• 网页可见区域高： document.body.offsetHeight (包括边线的高);

• 网页正文全文宽： document.body.scrollWidth;
• 网页正文全文高： document.body.scrollHeight;
• 网页被卷去的高： document.body.scrollTop;
• 网页被卷去的左： document.body.scrollLeft;

• 网页正文部分上： window.screenTop;
• 网页正文部分左： window.screenLeft;
• 屏幕分辨率的高： window.screen.height;
• 屏幕分辨率的宽： window.screen.width;
• 屏幕可用工作区高度： window.screen.availHeight;

• 对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框
• HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
• HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
• window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。