性能优化－懒加载

与懒加载相对应的概念就是预加载，首先来看看它们的概念：

懒加载：按需加载，就是不要一次性加载，而是需要的时候再去加载，减缓服务器的压力

预加载：一次性将全部资源加载完毕，需要的时候直接从本地缓存中读取就行，增加服务器的压力

也不能说谁好谁坏，就侧重点不同

懒加载最大的好处就是首屏渲染速度快，预加载最大的好处就是用户等待时间短

懒加载特别使用于长网页的电商页面，因为有大量的图片，如果在首屏一次性加载完全部图片，会导致首屏渲染时间长，我们当然希望用户一上来就能看到页面的图片，所以我们选择懒加载，来提升用户体验。

懒加载的原理：

将所有的图片的真实路径放在自定义属性data-xxx 中，：

<img src='/loading' data-src="./12.png">

然后我们需要获取一些高度值，来判断图片是否处于可视区域，如果是，我们就将data-src中的图片真实路径赋值给 img的src，这样就加载处真实的图片了

实现原理：

首先获取浏览器的可视区域高度 clientHeight + 页面被遮挡的高度scrollTop ,最后计算图片顶部与该页面顶部的近距离offsetTop

当offset < clientHeight + scrollTop 满足显示条件，这时就将data-src 中存储的赋值给图片的src路径即可