- 通过只渲染视口附近以内的内容,减少服务器与客户端的请求压力
- 内容流过多的时候页面上会加载出很多个dom节点,网站中的内容会很多,如果进行一些操作可能会导致页面卡顿的问题
核心解决思路:只渲染视口相关范围内的DOM,超过视口的DOM,我们可以对DOM做删除或者离线处理。
难点:
- 事先需要知道所有单项的大致尺寸才能知道哪些内容是当前视口范围内的内容
- 如何检测单项是否在视口范围内
单项尺寸固定的长列表–图片列表
如果事先知道各个单项的尺寸就基本上能大致的布局信息,就可以根据视口范围计算出渲染的内容。
然后根据滚动条滚动的距离计算出应该显示的项,并把应该显示的项替换正在显示的项。

单项尺寸未知的长列表–朋友圈列表
方案一: 把所有的内容渲染到视口外,获取内容的各个数据
缺点:渲染工作量增加一倍
方案二: 预估列表项的高度,等到真正渲染出来以后记录并改变相关的列表项内容