前端性能优化

图片懒加载

在前端的项目中，为了提高性能经常会使用到上拉加载，clientHeight、offsetHeight、scrollHeight、scrollTop是实现上拉 加载的关键。所以，首先来介绍下三者的意义以及区别。

• clientHeight：表示的是当前显示的元素的高度，如果存在X轴的滚动条与根元素边框，不包括X轴的滚动条与根元素边框的高度 。
• offsetHeight：也表示的是当前显示元素的高度，与clientHeight类似，但offsetHeight包括X轴的滚动条与根元素边框的高度。
• offsetTop：表示元素顶部到父元素顶部的距离
• scrollHeight：表示内容区域的整个高度，包括溢出的内容区域，即滚动条的高度。
• scrollTop：表示的是滚动条滚动的高度，初始未滚动时的高度为0。

//法一：利用getBoundingClientRect直接获取元素顶部距离可视区域顶部的高度
const imgs = document.getElementsByTagName("img");
// 获取可视区域的高度
const viewHight = document.documentElement.clientHeight;
// 统计当前加载到了哪张照片，避免每一次都从第一张照片开始检查
var num = 0;
function lazyload() {
  for (let i = num; i < imgs.length; i++) {
    const item = imgs[i]
    // 可视区域高度减去元素顶部距离可视区域顶部的高度，如果差值大于 0 说明元素展示
    let distance = viewHight - item.getBoundingClientRect().top;
	let distance = 
    if (distance >= 0) {
      // 展示真实图片
	    item.src = item.getAttribute("data-src");
      num = i + 1;
    }
  }
}
//法二：自己计算元素顶部到可视窗口顶部的距离
const viewScroll = document.documentElement.scrollTop;
function lazyLoad() {
	for (let i = num;i<imgs.length;i++) {
	  let item = imgs[i];
		if (viewHight+viewScroll>getRealTop(item)) {
			item.src = item.getAttribute('data-src');
			item.removeAttribute('data-src');
		}
	}
}
function getRealTop(item) {
	var realTop = item.offsetTop;
  while (item = item.offsetParent) {
  	realTop+=item.offsetTop
  }
  return realTop
}
// 监听 scroll 事件，实际项目中需要进行**节流优化**
window.addEventListener("scroll", throttle(lazyload,200), false);
lazyload();