长列表优化，虚拟列表的实现

kaaaaaaai
352 阅读8分钟

在工作中，有时会有些特殊的需求，需要展示大量的列表数据，并且因为需求原因不能分页展示。这种列表也被称为长列表。如果一次性向页面插入大量的列表数据，在数据量较大的情况下，势必会影响性能。

例如我们用react模拟一下场景，点击按钮会在页面元素中插入10000条列表数据

import { useState } from "react";
import "./index.scss";
import ListItem from "../listItem/index";
// 获取随机的列表数据
import { getList, IItemData } from "../data";

export default function OrdinaryList() {
  // 所有列表数据
  const [allList, setAllList] = useState<IItemData[]>([]);
  // 列表项固定高度
  const listItemHeight = "50px";

  // 点击初始化列表
  const initList = () => {
    const now = Date.now();
    const arr = getList();
    setAllList(arr);
    console.log("JS运行时间：", Date.now() - now);
    setTimeout(() => {
      console.log("总运行时间：", Date.now() - now);
    }, 0);
  };

  // 渲染列表
  const renderList = () => {
    return allList.map((itemData) => (
      <div key={itemData.index}>
        <ListItem itemData={{ ...itemData, height: listItemHeight }}></ListItem>
      </div>
    ));
  };

  return (
    <div className="ordinary-list-wrap">
      <div className="list-wrap">{renderList()}</div>
      <button className="button" onClick={() => initList()}>
        列表数据赋值
      </button>
    </div>
  );
}


// ListItem组件
import "./index.scss";
import { IItemData } from "../data";

export default function OrdinaryList({
  itemData,
}: {
  itemData: IItemData & { height?: string };
}) {
  return (
    <div className="list-item" style={{ height: itemData.height ?? "auto" }}>
      <div className="avatar-box">
        <img className="image" src={itemData.image} alt="" />;
      </div>
      <div className="text-box">
        <p>order:{itemData.index + 1}</p>
        <p>{itemData.content}</p>
      </div>
    </div>
  );
}

CleanShot 2024-06-25 at 13.37.24.gif

控制台打印结果如下：粗略统计，可以看出从点击按钮代码执行到渲染结束大概消耗了1245毫秒左右的时间。

20240611111918.jpg

打开Chrome的Performance 工具测试一下

CleanShot 2024-06-11 at 17.13.14.gif

从Chrome的Performance 工具中可以看出，任务消耗时间在1210毫秒左右，其中主要耗时在

  • Event(click) : 774.41ms
  • Recalculate Style : 69.15ms
  • Layout : 304.50ms
  • Pre-Paint: 50.21ms

20240611113232.jpg

JS内存为36.7MB, DOM节点数为69998。

综上可见，一次性插入10000条列表数据，出现了白屏、数据渲染慢、卡顿等问题，从开发工具的数据也可以看出任务耗时过长，渲染dom节点过多。而上面的例子只是简单的dom结构，实际开发中，列表结构可能更复杂，耗时也会更长。

而虚拟列表就是解决这种情况的一种方法。

虚拟列表

所谓虚拟列表，就是只对用户可见区域渲染，而对用户不可见区域不进行渲染或进行小部分渲染。

WX20240611-150818@2x.png

如上图所示，只渲染中间可视区域的dom节点，而上下其他部分则不做渲染，而在列表滚动时，计算可视区域需要渲染的列表项并更新渲染。解决上面渲染dom节点过多导致页面白屏、卡顿、加载缓慢等问题，极大的优化了性能。

固定高度的虚拟列表实现

首先结合上面虚拟列表的原理，我们需要一个dom节点来渲染可视区域的列表，然后，为了保持与渲染列表所有项时一样的高度并触发滚动，还需要另外一个dom节点来做占位，以此来“撑开“容器。该dom节点的高度就是每项列表的固定高度乘以列表项的个数。所以HTML结构大致如下：

<div className="container">
  <div
    className="placeholder-element"
  ></div>
  <div
    className="list-wrap"
  >
    <!-- 渲染可视区域的列表数据 -->
    {renderList()}
  </div>
</div>

.placeholder-element元素做占位作用，.list-wrap元素做可视区域的列表的容器，该元素设置为position: absolute;固定在顶部，根据滚动位置设置transform属性调整位置。

假设列表每一项的固定高度为50px，那么我们就可以根据可视区域的高度得到需要渲染的列表项个数，从而从列表中截取出需要渲染的列表数据。

初次渲染显示的实现代码如下。

import { useState, useRef } from "react";
import "./index.scss";
import { getList, IItemData } from "../data";
import ListItem from "../listItem/index";

export default function VirtualList() {
  // 列表全部数据
  const [allList, setAllList] = useState<IItemData[]>([]);
  // 最外层包裹元素
  const containerWrap = useRef<HTMLDivElement>(null);
  // 列表的包裹元素
  const listWrap = useRef<HTMLDivElement>(null);
  // 列表个数
  const listSize = useRef(0);
  // 列表每一项的高度
  const itemHeight = 50;
  // 开始的索引
  const [startIndex, setStartIndex] = useState(0);

  // 点击获取列表数据
  const initList = () => {
    // 获取列表
    const arr = getList();
    setAllList(arr);
    const listWrapDom = listWrap.current;
    // 获取可视区域需要展示的列表项个数
    const listSizeNum = Math.ceil(listWrapDom!.offsetHeight / itemHeight);
    listSize.current = listSizeNum;
  };

  const renderList = () => {
    const visibleList = allList.slice(
      startIndex,
      startIndex + listSize.current
    );
    return visibleList.map((itemData) => (
      <div key={itemData.index} data-index={itemData.index + 1}>
        <ListItem
          itemData={{ ...itemData, height: itemHeight + "px" }}
        ></ListItem>
      </div>
    ));
  };

  return (
    <div>
      <div className="container" ref={containerWrap}>
        <div
          className="placeholder-element"
          style={{ height: allList.length * itemHeight + "px" }}
        ></div>
        <div className="list-wrap" ref={listWrap}>
          {renderList()}
        </div>
      </div>
      <button className="button" onClick={() => initList()}>
        列表数据赋值
      </button>
    </div>
  );
}

CleanShot 2024-06-25 at 13.40.01.gif

接下来需要给容器绑定滚动事件，当页面滚动时，需要重新计算可视区域的列表项以及.list-wrap元素的位置。

可以通过容器的scrollTop除以列表项的固定高度，来得到列表截取的第一个索引，从而就可以截取出可视区域的列表项以及计算可视区域的列表容器（.list-wrap）的位置，并通过transform属性调整列表容器位置到可视区域。

并且我们可以设置适量的前后缓冲列表项个数，避免在滚动过快时出现白屏。

所以整体实现代码如下：

import { useState, useRef } from "react";
import "./index.scss";
import { getList, IItemData } from "../data";
import ListItem from "../listItem/index";

export default function VirtualList() {
  // 列表全部数据
  const [allList, setAllList] = useState<IItemData[]>([]);
  // 最外层包裹元素
  const containerWrap = useRef<HTMLDivElement>(null);
  // 列表的包裹元素
  const listWrap = useRef<HTMLDivElement>(null);
  // 开始的索引
  const [startIndex, setStartIndex] = useState(0);
  // 可见的列表个数
  const listSize = useRef(0);
  // 列表每一项的高度
  const itemHeight = 50;
  // 上下增加缓冲列表项个数
  const buffer = 5;

  // 点击获取列表数据
  const initList = () => {
    // 获取列表
    const arr = getList();
    setAllList(arr);
    const listWrapDom = listWrap.current;
    const listSizeNum = Math.ceil(listWrapDom!.offsetHeight / itemHeight);
    listSize.current = listSizeNum;
  };

  // 滚动事件
  const listScroll = () => {
    const containerWrapDom = containerWrap.current;
    const scrollTop = containerWrapDom?.scrollTop || 0;
    const start = Math.floor(scrollTop / itemHeight);
    let sliceStart = start;
    if (start > buffer) {
      sliceStart = start - buffer;
    } else {
      sliceStart = 0;
    }
    setStartIndex(sliceStart);
  };

  // 可见区域列表渲染
  const renderList = () => {
    const visibleList = allList.slice(
      startIndex,
      startIndex + listSize.current + 2 * buffer
    );
    return visibleList.map((itemData) => (
      <div key={itemData.index} data-index={itemData.index + 1}>
        <ListItem
          itemData={{ ...itemData, height: itemHeight + "px" }}
        ></ListItem>
      </div>
    ));
  };

  return (
    <div>
      <div className="container" ref={containerWrap} onScroll={listScroll}>
        <div
          className="placeholder-element"
          style={{ height: allList.length * itemHeight + "px" }}
        ></div>
        <div
          className="list-wrap"
          ref={listWrap}
          style={{ transform: `translateY(${startIndex * itemHeight + "px"})` }}
        >
          {renderList()}
        </div>
      </div>
      <button className="button" onClick={() => initList()}>
        列表数据赋值
      </button>
    </div>
  );
}

最终效果如下

CleanShot 2024-06-25 at 13.41.30.gif

打开Chrome的Performance 工具测试一下

CleanShot 2024-06-11 at 17.14.51.gif

从Chrome的Performance 工具中可以看出，task不再爆红，任务消耗时间在14毫秒左右

  • Event(click) : 5.61ms
  • Recalculate Style : 0.15ms
  • Layout : 7.63ms
  • Pre-Paint: 0.29ms

从上面数据可以发现，相比使用虚拟列表之前，耗时有了非常大幅度的下降

image-20240611172557955.png

JS内存为18.1MB左右, DOM节点数为500左右。DOM节点数相比使用虚拟列表之前也大幅度下降了。

但上面这种实现方法依然有优化空间，由于使用的是scroll监听事件，页面滚动时，scroll事件会频繁触发，很多时候会重复计算触发事件，造成性能浪费。

我们可以使用IntersectionObserver来替代scroll监听事件，IntersectionObserver可以监听目标元素是否出现在可视区域内，从而可以在监听的回调中更新列表数据，而且重要的是IntersectionObserver API是异步的，不随着目标元素的滚动同步触发，性能消耗极低。

利用IntersectionObserver，我们的实现方案是这样的。

image-20240616214147476.png

如上图所示，通过IntersectionObserver监听截取列表的首尾两个元素是否出现在可见范围之内，当截取列表的第一个元素出现在可见范围内时，则整个截取列表的截取范围需要向上移动，同理当截取列表的最后一个元素出现在可见范围内时，则整个截取列表的截取范围需要向下移动，当然，这里还需要考虑边界的处理，例如当截取列表的第一个元素就是整个列表的第一个元素或者截取列表的最后一个元素就是整个列表的最后一个元素时，那么这时候就不需要调整列表的截取范围了。

代码如下

import { useState, useRef, useEffect } from "react";
import "./index.scss";
import { getList, IItemData } from "../data";
import ListItem from "../listItem/index";

export default function VirtualList() {
  // 列表全部数据
  const [allList, setAllList] = useState<IItemData[]>([]);
  // 最外层包裹元素
  const containerWrap = useRef<HTMLDivElement>(null);
  // 列表的包裹元素
  const listWrap = useRef<HTMLDivElement>(null);
  // 可见区域的第一个列表项
  const startElement = useRef<HTMLDivElement>(null);
  // 可见区域的最后一个列表项
  const endElement = useRef<HTMLDivElement>(null);
  // 开始的索引
  const [startIndex, setStartIndex] = useState(0);
  // 结束的索引
  const [endIndex, setEndIndex] = useState(0);
  // 列表每一项的高度
  const itemHeight = 50;
  // 上下增加缓冲列表项个数
  const buffer = 5;

  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      // 第一个元素可见时
      if (
        entry.isIntersecting &&
        entry.target.getAttribute("data-order") === "top"
      ) {
        if (startIndex > buffer) {
          setStartIndex(startIndex - buffer);
          setEndIndex(endIndex - buffer);
        } else {
          const diff = startIndex - 0;
          setEndIndex(endIndex - diff);
          setStartIndex(0);
        }
      }
      // 最后一个元素可见时
      if (
        entry.isIntersecting &&
        entry.target.getAttribute("data-order") === "bottom"
      ) {
        if (endIndex < allList.length - buffer) {
          setStartIndex(startIndex + buffer);
          setEndIndex(endIndex + buffer);
        } else {
          const diff = allList.length - endIndex;
          setStartIndex(startIndex + diff);
          setEndIndex(allList.length);
        }
      }
    });
  });

  useEffect(() => {
    if (startElement.current) {
      io.observe(startElement.current);
    }
    if (endElement.current) {
      io.observe(endElement.current);
    }
    return () => {
      if (startElement.current) {
        io.unobserve(startElement.current);
      }
      if (endElement.current) {
        io.unobserve(endElement.current);
      }
    };
  }, [endIndex]);

  // 点击获取列表数据
  const initList = () => {
    // 获取列表
    const arr = getList();
    setAllList(arr);
    const listWrapDom = listWrap.current;
    const listSizeNum = Math.ceil(listWrapDom!.offsetHeight / itemHeight);
    setEndIndex(listSizeNum + buffer * 2);
  };

  // 可见区域列表渲染
  const renderList = () => {
    const visibleList = allList.slice(startIndex, endIndex);
    return visibleList.map((itemData, index) => {
      let ref = null;
      let position = "";
      if (index === 0) {
        ref = startElement;
        position = "top";
      } else if (index === visibleList.length - 1) {
        ref = endElement;
        position = "bottom";
      }
      return (
        <div
          key={itemData.index}
          ref={ref}
          data-order={position}
          data-index={itemData.index + 1}
        >
          <ListItem
            itemData={{ ...itemData, height: itemHeight + "px" }}
          ></ListItem>
        </div>
      );
    });
  };

  return (
    <div>
      <div className="container" ref={containerWrap}>
        <div
          className="placeholder-element"
          style={{ height: allList.length * itemHeight + "px" }}
        ></div>
        <div
          className="list-wrap"
          ref={listWrap}
          style={{ transform: `translateY(${startIndex * itemHeight + "px"})` }}
        >
          {renderList()}
        </div>
      </div>
      <button className="button" onClick={() => initList()}>
        列表数据赋值
      </button>
    </div>
  );
}

效果如下

CleanShot 2024-06-25 at 13.43.43.gif

动态高度的虚拟列表实现

固定高度的虚拟列表实现相对比较方便，因为可以方便地计算出整体高度及偏移量等数据。而实际开发中，每一个列表项的高度很有可能是不固定的。

在列表项的高度是动态的情况下，我们可以在列表数据变量上扩展一些数据，具体有

  • height: 当前列表项的高度
  • top: 当前列表项顶部距离整个列表顶部的距离
  • bottom: 当前列表项底部距离整个列表顶部的距离

在初始化数据时，由于不知道列表项的高度，所以，我们可以先给一个预估高度，例如

import { getList, IItemData } from "../data";
type IList = IItemData & { height: number; top: number; bottom: number };		
// 所有列表数据(缓存高度数据)
const allList = useRef<IList[]>([]); 
// 预估高度
const estimatedHeight = 70;
// 初始化列表
const initList = () => {
  const arr = getList();
  allList.current = arr.map((e, i) => ({
    ...e,
    height: estimatedHeight,
    top: i * estimatedHeight,
    bottom: (i + 1) * estimatedHeight,
  }));
};

通过useEffect在每次更新渲染时，计算更新列表数据的height，top，bottom

  useEffect(() => {
    const listItemDoms = listWrap.current?.children;
    if (listItemDoms && listItemDoms.length) {
      let hasDifferenceValue = false;
      let firstDifferenceIndex = undefined;
      for (let i = 0; i < listItemDoms.length; i++) {
        const itemDom = listItemDoms[i] as HTMLElement;
        const index = visibleList[i].index;
        const differenceValue =
          allList.current[index].height - itemDom.offsetHeight;
        if (differenceValue) {
          hasDifferenceValue = true;
          if (firstDifferenceIndex === undefined) {
            firstDifferenceIndex = index;
            allList.current[index].bottom =
              allList.current[index].bottom - differenceValue;
          }
          // 更新真实高度
          allList.current[index].height = itemDom.offsetHeight;
        }
      }
      // 有差值，遍历更新列表数据的top、bottom数据
      if (hasDifferenceValue) {
        for (
          let i = (firstDifferenceIndex || 0) + 1;
          i < allList.current.length;
          i++
        ) {
          allList.current[i].top = allList.current[i - 1].bottom;
          allList.current[i].bottom =
            allList.current[i - 1].bottom + allList.current[i].height;
        }
      }
    }
  });

那么，如何去获取当前需要截取的列表范围呢

因为我们每个列表项都维护一个bottom属性，其表示当前列表项底部距离整个列表顶部的距离，通过容器的scrollTop和容器高度，结合bottom属性进行比对就可以得到列表截取的起始索引值和末尾值。并添加滚动事件更新列表。

总体代码如下

import { useState, useRef, useEffect } from "react";
import "./index.scss";
import { getList, IItemData } from "../data";
import ListItem from "../listItem/index";

type IList = IItemData & { height: number; top: number; bottom: number };

export default function VirtualDynamicList() {
  // 所有列表数据(缓存高度数据)
  const allList = useRef<IList[]>([]);
  // 最外层包裹元素
  const containerWrap = useRef<HTMLDivElement>(null);
  // 列表的包裹元素
  const listWrap = useRef<HTMLDivElement>(null);
  // 偏移量
  const [translateYOffset, setTranslateYOffset] = useState(0);
  // 可见的列表数据
  const [visibleList, setVisibleList] = useState<IItemData[]>([]);
  // 预估高度
  const estimatedHeight = 70;
  // 上下增加缓冲列表项个数
  const buffer = 5;

  // 初始化列表
  const initList = () => {
    const arr = getList();
    allList.current = arr.map((e, i) => ({
      ...e,
      height: estimatedHeight,
      top: i * estimatedHeight,
      bottom: (i + 1) * estimatedHeight,
    }));
    listScroll();
  };

  useEffect(() => {
    const listItemDoms = listWrap.current?.children;
    if (listItemDoms && listItemDoms.length) {
      let hasDifferenceValue = false;
      let firstDifferenceIndex = undefined;
      for (let i = 0; i < listItemDoms.length; i++) {
        const itemDom = listItemDoms[i] as HTMLElement;
        const index = visibleList[i].index;
        const differenceValue =
          allList.current[index].height - itemDom.offsetHeight;
        if (differenceValue) {
          hasDifferenceValue = true;
          if (firstDifferenceIndex === undefined) {
            firstDifferenceIndex = index;
            allList.current[index].bottom =
              allList.current[index].bottom - differenceValue;
          }
          // 更新真实高度
          allList.current[index].height = itemDom.offsetHeight;
        }
      }
      // 有差值，遍历更新列表数据的top、bottom数据
      if (hasDifferenceValue) {
        for (
          let i = (firstDifferenceIndex || 0) + 1;
          i < allList.current.length;
          i++
        ) {
          allList.current[i].top = allList.current[i - 1].bottom;
          allList.current[i].bottom =
            allList.current[i - 1].bottom + allList.current[i].height;
        }
      }
    }
  });

  // 获取索引（采用二分查找）
  const getIndex = (height: number) => {
    let startIndex = 0;
    let endIndex = allList.current.length - 1;
    let resultIndex = 0;
    while (startIndex <= endIndex) {
      const middleIndex = Math.floor((endIndex + startIndex) / 2);
      const middleBottom = allList.current[middleIndex].bottom;
      if (middleBottom === height) {
        return middleIndex + 1;
      } else if (middleBottom > height) {
        if (!resultIndex || resultIndex > middleIndex) {
          resultIndex = middleIndex;
        }
        endIndex--;
      } else if (middleBottom < height) {
        startIndex = middleIndex + 1;
      }
    }
    return resultIndex;
  };

  // 滚动事件
  const listScroll = () => {
    const containerWrapDom = containerWrap.current;
    const scrollTop = containerWrapDom?.scrollTop || 0;
    const startIndex = getIndex(scrollTop);
    let sliceStart = startIndex;
    if (startIndex > buffer) {
      sliceStart = startIndex - buffer;
    } else {
      sliceStart = 0;
    }
    setTranslateYOffset(allList.current[sliceStart].top);
    const listWrapDom = listWrap.current;
    const endIndex = getIndex(scrollTop + listWrapDom!.offsetHeight);
    setVisibleList(allList.current.slice(sliceStart, endIndex + buffer));
  };

  const renderList = () => {
    return visibleList.map((itemData) => (
      <div key={itemData.index} data-index={itemData.index + 1}>
        <ListItem itemData={{ ...itemData, height: "auto" }}></ListItem>
      </div>
    ));
  };

  return (
    <div>
      <div className="container" ref={containerWrap} onScroll={listScroll}>
        <div
          className="hide-placeholder-element"
          style={{
            height: allList.current.length
              ? allList.current[allList.current.length - 1].bottom + "px"
              : 0,
          }}
        ></div>
        <div
          className="list-wrap"
          ref={listWrap}
          style={{
            transform: `translateY(${translateYOffset + "px"})`,
          }}
        >
          {renderList()}
        </div>
      </div>
      <button className="button" onClick={() => initList()}>
        列表数据赋值
      </button>
    </div>
  );
}

效果如下

CleanShot 2024-06-26 at 14.09.11.gif

完整代码

github.com/chenkai77/v…

avatar
文章
阅读
粉丝