Open soulJF999 opened 3 years ago
1.懒加载 实现思路非常简单：监听父元素的scroll事件（一般是window），通过父元素的scrollTop判断页面是否到了页面底部，如果到了页面底部，则加载更多数据。 clientHeight可以用height+padding-滚动条的高度实现 clientTop一个元素顶部边框的高度，例如border-top-width offsetHeight包含元素的边框内边距和元素的水平滚动条（如果存在且渲染的话） offsetTop返回当前元素相对于其offsetParent元素的顶部的距离（标准模式下为html） scrollHeight相当于在没有高度限制时，能够完全展示子元素时的高度（clientHeight） scrollTop:如果一个元素不能被滚动，它的scrollTop将被设置为0。元素的顶部内容（卷起来的）到它的视口可见内容（的顶部）的距离 scrollY:返回文档在垂直方向已滚动的距离 判断是否到底： element.scrollHeight - element.scrollTop === element.clentHeight 可视区域渲染 每个数据的展现高度都必须一致（非必须，但最小高度需确定） 产品设计上，滚动条需挂靠在一个固定高度的区域
link标签的rel=preload是预加载 prefetch是预测会加载指定资源，如我们在页面加载后会初始化首屏组件，当用户滚动页面时，会拉取第二屏的组件。若能预测用户行为，则可以prefetch下一屏的组件 preload将提升资源的优先级，对跨域的文件进行preload时，我们必须加上crossorigin属性 preload不同资源时，需要注意引入的资源网络优先级
实现虚拟列表就是在处理用户滚动时，要改变列表在可视区域的渲染部分，其步骤如下 1.计算当前可见区域起始数据的startIndex 2.计算当前可见区域结束数据的endIndex 3.计算当前可见区域的数据，并渲染到页面中 4.计算startIndex对应的数据在整个列表中的偏移位置startOffset，并设置到列表上 5.计算endIndex对应的数据相对于可滚动区域最底部的偏移位置endOffset，并设置到列表上 startOffset和endOffset会撑开容器元素的内容高度，让其可持续的滚动；此外，还能保持滚动条处于一个正确的位置
getBoundingClientRect返回元素的大小及其相对于视口的位置 当列表项是动态高度时，我们要基于项目的实际情况，给列表项一个预估的高度 对于图文混合的动态高度虚拟列表的实现，可以基于ResizeObserver的方案
1.懒加载 实现思路非常简单：监听父元素的scroll事件（一般是window），通过父元素的scrollTop判断页面是否到了页面底部，如果到了页面底部，则加载更多数据。 clientHeight可以用height+padding-滚动条的高度实现 clientTop一个元素顶部边框的高度，例如border-top-width offsetHeight包含元素的边框内边距和元素的水平滚动条（如果存在且渲染的话） offsetTop返回当前元素相对于其offsetParent元素的顶部的距离（标准模式下为html） scrollHeight相当于在没有高度限制时，能够完全展示子元素时的高度（clientHeight） scrollTop:如果一个元素不能被滚动，它的scrollTop将被设置为0。元素的顶部内容（卷起来的）到它的视口可见内容（的顶部）的距离 scrollY:返回文档在垂直方向已滚动的距离 判断是否到底： element.scrollHeight - element.scrollTop === element.clentHeight 可视区域渲染 每个数据的展现高度都必须一致（非必须，但最小高度需确定） 产品设计上，滚动条需挂靠在一个固定高度的区域
link标签的rel=preload是预加载 prefetch是预测会加载指定资源，如我们在页面加载后会初始化首屏组件，当用户滚动页面时，会拉取第二屏的组件。若能预测用户行为，则可以prefetch下一屏的组件 preload将提升资源的优先级，对跨域的文件进行preload时，我们必须加上crossorigin属性 preload不同资源时，需要注意引入的资源网络优先级
实现虚拟列表就是在处理用户滚动时，要改变列表在可视区域的渲染部分，其步骤如下 1.计算当前可见区域起始数据的startIndex 2.计算当前可见区域结束数据的endIndex 3.计算当前可见区域的数据，并渲染到页面中 4.计算startIndex对应的数据在整个列表中的偏移位置startOffset，并设置到列表上 5.计算endIndex对应的数据相对于可滚动区域最底部的偏移位置endOffset，并设置到列表上 startOffset和endOffset会撑开容器元素的内容高度，让其可持续的滚动；此外，还能保持滚动条处于一个正确的位置
getBoundingClientRect返回元素的大小及其相对于视口的位置 当列表项是动态高度时，我们要基于项目的实际情况，给列表项一个预估的高度 对于图文混合的动态高度虚拟列表的实现，可以基于ResizeObserver的方案