作者|安笺
大量的多媒体内容被用户消费，传统的拼dom元素的滚动方案会导致页面滚动的卡顿，有什么好的方案让用户浏览海量数据？
前言
做前端开发，难以避免的要和无限滚动加载这类交互打交道，简单的滚动加载大家都知道，记录某个元素的位置，在该元素即将到达视口时触发去请求加载下一屏数据的行为。在当前vue/react大行其道的时代，数据驱动视图更新，修改数据来新增dom节点到列表元素中就可以实现，而且这种行为在大部分产品或场景中都没多大问题，但当代随着社交媒体的流行，大量的视频、图片、文字等数据被用户消费，传统的拼dom元素的滚动方案在性能上就存在瑕疵，海量的数据造就大量的元素节点产生，从而会导致页面滚动的卡顿，那么有什么好的方案让用户浏览海量数据？
谷歌LightHouse开发推荐
chrome影响页面性能的因素：
- 总共有超过 1,500 个节点。
- 具有大于 32 个节点的深度。
- 有一个超过 60 个子节点的父节点。
效果对比
内容社交消耗是目前网上用户消费最多，而且加载数据最多的一种类型，下方是在数据大概2000条左右常规加载和虚拟滚动实现的效果对比
常规方案在数据量小，dom元素少的情况下，也是非常流畅，但是在数据量达到一定程度，dom元素量过大时，渲染时间就会急剧增多，滚动将变得滞后，灵敏度下降。
滚动方式介绍
原理：用固定个数的元素来模拟无线滚动加载，通过位置的布局来达到滚动后的效果。
由于无限滚动的列表元素高度是和产品设计的场景有关，有定高的，也有不定高的。
定高：滚动列表中子元素高度相等。
不定高：滚动列表中子元素高度都随机且不相等。
▐ 元素定高方案
- 实现原理
如图所示，我们只渲染固定个数的dom元素，一个视口高度是固定的，子元素的高度也是固定的，我们可以推算出一个视口最多可以看到多少个元素
domNum = window.screen.height / itemHeight
在这个基础上上下增加3~5个元素即可，例如一共可以显示4个元素，上下视口溢出各加3，一共需要10个dom元素来实现虚拟滚动。滚动后，每个元素距离父类都会有个偏移高度，默认的高度就是这个元素之上所有的兄弟元素的高度之和，我们这里只采用固定个数的元素，则视口内的元素上面并没有那么多的兄弟，但有需要该元素距离视口有那么多的偏移高度，则通过transform或者top值来把该元素的位置钉住，来模拟滚动后自己需要处在的位置上。
- 滚动效果
- 实现方式
忽略业务相关的任何东西，我们单纯来模拟打造这一套虚拟滚动。我们先通过数组模拟定义2万条数据，并创建一个对象currentArr来表示当前已经获取到的数据。我们模拟一页10条数据，刚进来的时候“后端”放回20条数据，即第一次请求了2页数据（每页10条数据）
... const arr = []; for (let i = 0; i < 20000; i++) { arr.push(i); } const currentArr = arr.slice(0, 19) // 默认取前2页（1页10条数据） ...
我们采用3级深度的dom结构
- 第一层是100vh高度的容器，允许滚动
- 第二层是所有元素组成高度，可以理解成是一个空有高度的空白元素，这个高度是当前已经获取的所有元素的总高度
- 第三层是固定元素渲染层
可滚动的元素高度我们需要先撑开。
我们可以动态计算当前元素一共需要多少高度的空间， itemHeight是每一个列表元素的高度，也可以让后端直接返回给我们一共有多少个元素，然后直接全部撑开， 那么height则为total * itemHeight
... <div className="main" ref={slider} onScroll={throttle(scroll, 200)}> <div className="wrap" style={{ height: currentArr.length * itemHeight * 2, // 这里默认是2倍屏 }} > {currentArr.slice(startInex, endIndex).map((item, index) => { return ( <div className="item" key={index} style={{ position: 'absolute', left: 0, top: 0, transform: `translateY(${(startInex + index) * itemHeight}px)`, }} > {item} </div>);} ) } </div> </div> ...
这里需获取要展示数组数据里的起始位置和结束位置
第一个元素位置 = 滚动距离/列表元素的高度。
最后一个元素位置 = 第一个元素位置 + 视口内最多展示元素的个数。
拿到起始位置和结束位置来切割数据数组，每次就取固定个数的元素来进行重绘渲染
const scrollTop = slider.current.scrollTop; // 滚动距离 let currentStartIndex = Math.floor(scrollTop / itemHeight); // 起始索引 let currentEndIndex = currentStartIndex + Math.ceil(screenH / itemHeight); // 终点索引
计算元素偏移位置
通过第一个元素的的索引值 + 当前元素数组索引值 可以计算距离父元素顶部的高度, 作用在元素的transform属性上，使其定位在固定的高度偏移量上，这样就大功告成了。
<div className="item" key={index} style={{ position: 'absolute', left: 0, top: 0, transform: `translateY(${(startInex + index) * itemHeight}px)`, }} >
整体代码
// index.less .main { width: 100vw;js height: 100vh; overflow: scroll; position: relative; } .item { width: 100vw; height: 180rpx; border-bottom: 2rpx solid black; } // index.js import { createElement, useRef, useState } from "rax"; import "./index.less"; const arr = []; // 模拟一共有2万条数据 for (let i = 0; i < 20000; i++) { arr.push(i); } // 默认第一屏取2页数据 const currentArr = arr.slice(0, 19), screenH = window.screen.height; let i = 2, isReqeust = false; function throttle(func, delay){ var timer = null; return function(){ var context = this; var args = arguments; if(!timer){ timer = setTimeout(function(){ func.apply(context, args); timer = null; }, delay); } } } function Index(props) { const { itemHeight = 90 } = props; const [startInex, setStartIndex] = useState(0); const [endIndex, setEndIndex] = useState(9); const [forceUpdate, setForceUpdate] = useState(false); const slider = useRef(null); const scroll = () => { const scrollTop = slider.current.scrollTop; // 滚动距离 if (currentArr.length * itemHeight - scrollTop - screenH < 400 && !isReqeust ) { isReqeust = true; // 加载下一页数据 setTimeout(() => { currentArr.push(...arr.slice(i* 10, i*10 + 9)); i++; scroll(); isReqeust = false; setForceUpdate(!forceUpdate) }, 500) return; } let currentStartIndex = Math.floor(scrollTop / itemHeight); // 起始索引 let currentEndIndex = currentStartIndex + Math.ceil(screenH / itemHeight); // 终点索引 if (currentStartIndex === startInex && currentEndIndex === endIndex) return requestAnimationFrame(() => { setStartIndex(currentStartIndex) setEndIndex(currentEndIndex) }); } return ( <div className="main" ref={slider} onScroll={throttle(scroll, 200)}> <div className="wrap" style={{ height: currentArr.length * itemHeight * 2, // 这里默认是2倍屏 }} > {currentArr.slice(startInex, endIndex).map((item, index) => { return ( <div className="item" key={index} style={{ position: 'absolute', left: 0, top: 0, transform: `translateY(${(startInex + index) * itemHeight}px)`, }} > {item} </div> ); })} </div> </div> ); } export default Index;
总结
列表元素等高的方案相对比较容易实现，而且方案很多，有作用在父元素上整体使用transform的，也有作用在每个单一元素上使用transform的，甚至通过top、paddingTop等等各种位置布局属性方案来实现的。
固定元素在渲染上能占到非常大的优势，通过key绑定保障元素性能甚至可以在20个固定元素的场景下渲染做到3ms，但是应用场景往往是多变的，我们的元素等高的场景只是一种，往往还存在非等高的场景，例如微薄、Twitter等等，也例如我们上面的对比图，里面的列表元素卡片分非常多种类，这种再操作上就需要换个思路的，不过换汤不换药，对于非等高的列表元素，可以参考下一篇文档。
