目录
懒加载实现方式及底层原理
一、浏览器的底层渲染机制:
1、构建 DOM 树
2、样式计算
3、布局阶段
4、分层
5、绘制
6、分块
7、光栅化
8、合成
二、几个API
1、document.documentElement.clientHeight
获取屏幕可视区域的高度。
2、element.offsetTop
获取元素相对于文档顶部的高度。
3、document.documentElement.scrollTop
获取浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离。
4、如果满足offsetTop-scroolTop<clientHeight,则图片进入了可视区内,我们就去请求进入可视区域的图片。
三、getBoundingClientRect()
该函数返回一个rectObject对象,该对象有 6 个属性:top, left, bottom, right, width, height;这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。
通过这个 API,我们就很容易获取img元素相对于视口的顶点位置rectObject.top,只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域:
function isInSight(el){
const bound = el.getBoundingClientRect();
const clientHeight = window.innerHeight;
return bound.top <= clientHeight;
}
四、基于 IntersectionObserver 实现图片懒加载
有一个新的 IntersectionObserver API,可以自动"观察"元素是否可见,Chrome 51+ 已经支持。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做交叉观察器。
const imgs = document.querySelectorAll('img') //获取所有待观察的目标元素
var options = {
}
function lazyLoad(target) {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entrie => {
if (entrie.isIntersecting) {
const img = entrie.target;
const src = img.getAttribute('data-src');
img.setAttribute('src', src)
observer.unobserve(img); // 停止监听已开始加载的图片
}
})
}, options);
observer.observe(target)
}
imgs.forEach(lazyLoad)
虚拟滚动
一、二者区别
•懒渲染:这个就是常见的无限滚动的,每次只渲染一部分(比如 10 条),等剩余部分滚动到可见区域,就再渲染另一部分。
•可视区域渲染(虚拟滚动):只渲染可见部分,不可见部分不渲染。
[注]:实际上考虑页面流畅性,不可能完全不渲染视区之外的内容,建议是预留2-3屏.
二、二者的优缺点
1、懒渲染有三点重大缺陷:
•边滚边加载的模式,会导致页面越发卡顿。(实际上是把锅丢到了后面)
•无法实现动态反映选中状态
•滚动条无法正确反映操作者当前浏览的信息在全部列表中的位置。而且我百万级数据加载,你一次给我加载十几条,滚到底太慢了,是想愚弄用户吗!
2、虚拟滚动有两个重要的基本概念:
•可滚动区域:假设有 1000 条数据,每个列表项的高度是 30,那么可滚动的区域的高度就是 1000 * 30。当用户改变列表的滚动条的当前滚动值的时候,会造成可见区域的内容的变更。•可见区域:比如列表的高度是 300,右侧有纵向滚动条可以滚动,那么视觉可见的区域就是可见区域。
相比较于懒渲染,虚拟滚动要求一次性全部拿到数据,但是滚动条能够完全正确地反映当前页面在全部数据的位置。滚动无非是对几十个dom进行操作,可以达到极高的后续渲染性能。而且一旦实现,可以把页面慢的锅完全丢给后端了。
3、简单实现
export default class VirtualScroll {
constructor($list, list, itemGenerator, options = {
}) {
this.$list = $list
this.list = list
this.itemGenerator = itemGenerator
this._offset = options.initalOffset || 0
this.cacheCount = options.cacheCount || 5
this.renderListWithCache = []
this.offsetToEdge = 0
this.initItem(list)
this.initContainer($list)
this.initScroll($list)
this.bindEvent()
this.offset = this._offset
}
get offset() {
return<