如何实现一个高度自适应的虚拟列表

时间  2021-08-12
标签 node typescript 数组 缓存 markdown antd 函数 oop 性能 优化 栏目 CSS 繁體版
原文   原文链接

近期在某平台开发迭代的过程当中遇到了超长List嵌套在antd Modal里加载慢，卡顿的状况。因而心血来潮决定从零本身实现一个虚拟滚动列表来优化一下总体的体验。node

改造前：

咱们能够看出来在改造以前，打开编辑窗口Modal的时候会出现短暂的卡顿，而且在点击Cancel关闭后也并非当即响应而是稍做迟疑以后才关闭的typescript

改造后：

改造完成后咱们能够观察到整个Modal的打开比以前变得流畅了很多，能够作到当即响应用户的点击事件唤起/关闭Modal数组

0x0 基础知识

因此什么是虚拟滚动/列表呢？缓存

一个虚拟列表是指当咱们有成千上万条数据须要进行展现可是用户的“视窗”（一次性可见内容）又不大时咱们能够经过巧妙的方法只渲染用户最大可见条数+“BufferSize”个元素并在用户进行滚动时动态更新每一个元素中的内容从而达到一个和长list滚动同样的效果但花费很是少的资源。markdown

(从上图中咱们能够发现实际用户每次能看到的元素/内容只有item-4 ~ item-13 也就是9个元素)antd

0x1 实现一个“定高”虚拟列表

  • 首先咱们须要定义几个变量/名称。函数

    • 从上图中咱们能够看出来用户实际可见区域的开始元素是Item-4，因此他在数据数组中对应的下标也就是咱们的startIndex
    • 同理Item-13对应的数组下标则应该是咱们的endIndex
    • 因此Item-1，Item-2和Item-3则是被用户的向上滑动操做所隐藏，因此咱们称它为startOffset(scrollTop)

由于咱们只对可视区域的内容作了渲染，因此为了保持整个容器的行为和一个长列表类似（滚动）咱们必须保持原列表的高度，因此咱们将HTML结构设计成以下oop

<!--ver 1.0 -->
<div className="vListContainer">
  <div className="phantomContent">
    ...
    <!-- item-1 -->
    <!-- item-2 -->
    <!-- item-3 -->
    ....
  </div>
</div>
复制代码
  • 其中：
    • vListContainer 为可视区域的容器，具备 overflow-y: auto 属性。
    • 在 phantom 中的每条数据都应该具备 position: absolute 属性
    • phantomContent 则是咱们的“幻影”部分，其主要目的是为了还原真实List的内容高度从而模拟正常长列表滚动的行为。

  • 接着咱们对 vListContainer 绑定一个onScroll的响应函数，并在函数中根据原生滚动事件的scrollTop 属性来计算咱们的 startIndex 和 endIndex性能

    • 在开始计算以前，咱们先要定义几个数值：
      • 咱们须要一个固定的列表元素高度：rowHeight
      • 咱们须要知道当前list一共有多少条数据: total
      • 咱们须要知道当前用户可视区域的高度: height
    • 在有了上述数据以后咱们能够经过计算得出下列数据：
      • 列表总高度: phantomHeight = total * rowHeight
      • 可视范围内展现元素数：limit = Math.ceil(height/rowHeight)

（注意此处咱们用的是向上取整）优化

  • 因此咱们能够在onScroll 回调中进行下列计算：
onScroll(evt: any) {
  // 判断是不是咱们须要响应的滚动事件
  if (evt.target === this.scrollingContainer.current) {
    const { scrollTop } = evt.target;
    const { startIndex, total, rowHeight, limit } = this;

    // 计算当前startIndex
    const currentStartIndex = Math.floor(scrollTop / rowHeight);

    // 若是currentStartIndex 和 startIndex 不一样（咱们须要更新数据了）
    if (currentStartIndex !== startIndex ) {
      this.startIndex = currentStartIndex;
      this.endIndex = Math.min(currentStartIndedx + limit, total - 1);
      this.setState({ scrollTop });
    }
  }
}
复制代码
  • 当咱们一旦有了startIndex 和 endIndex 咱们就能够渲染其对应的数据：
renderDisplayContent = () => {
  const { rowHeight, startIndex, endIndex } = this;
  const content = [];
  
  // 注意这块咱们用了 <= 是为了渲染x+1个元素用来在让滚动变得连续（永远渲染在判断&渲染x+2）
  for (let i = startIndex; i <= endIndex; ++i) {
    // rowRenderer 是用户定义的列表元素渲染方法，须要接收一个 index i 和
    // 当前位置对应的style
    content.push(
      rowRenderer({
        index: i, 
        style: {
          width: '100%',
          height: rowHeight + 'px',
          position: "absolute",
          left: 0,
          right: 0,
          top: i * rowHeight,
          borderBottom: "1px solid #000",
        }
      })
    );
  }
  
  return content;
};
复制代码

线上Demo：codesandbox.io/s/a-naive-v…

原理：

  • 因此这个滚动效果到底是怎么实现的呢？首先咱们在vListContainer中渲染了一个真实list高度的“幻影”容器从而容许用户进行滚动操做。其次咱们监听了onScroll事件，而且在每次用户触发滚动是动态计算当前滚动Offset（被滚上去隐藏了多少）所对应的开始下标（index）是多少。当咱们发现新的下边和咱们当前展现的下标不一样时进行赋值而且setState触发重绘。当用户当前的滚动offset未触发下标更新时，则由于自己phantom的长度关系让虚拟列表拥有和普通列表同样的滚动能力。当触发重绘时由于咱们计算的是startIndex 因此用户感知不到页面的重绘（由于当前滚动的下一帧和咱们重绘完的内容是一致的）。

优化：

  • 对于上边咱们实现的虚拟列表，你们不难发现一但进行了快速滑动就会出现列表闪烁的现象/来不及渲染、空白的现象。还记得咱们一开始说的 **渲染用户最大可见条数+“BufferSize” 么？对于咱们渲染的实际内容，咱们能够对其上下加入Buffer的概念（即上下多渲染一些元素用来过渡快速滑动时来不及渲染的问题）。优化后的onScroll 函数以下：
onScroll(evt: any) {
  ........
  // 计算当前startIndex
  const currentStartIndex = Math.floor(scrollTop / rowHeight);
    
  // 若是currentStartIndex 和 startIndex 不一样（咱们须要更新数据了）
  if (currentStartIndex !== originStartIdx) {
    // 注意，此处咱们引入了一个新的变量叫originStartIdx，起到了和以前startIndex
    // 相同的效果，记录当前的 真实 开始下标。
    this.originStartIdx = currentStartIndex;
    // 对 startIndex 进行 头部 缓冲区 计算
    this.startIndex = Math.max(this.originStartIdx - bufferSize, 0);
    // 对 endIndex 进行 尾部 缓冲区 计算
    this.endIndex = Math.min(
      this.originStartIdx + this.limit + bufferSize,
      total - 1
    );

    this.setState({ scrollTop: scrollTop });
  }
}
复制代码

线上Demo：codesandbox.io/s/A-better-…

0x2 列表元素高度自适应

如今咱们已经实现了“定高”元素的虚拟列表的实现，那么若是说碰到了高度不固定的超长列表的业务场景呢？

  • 通常碰到不定高列表元素时有三种虚拟列表实现方式：

  1. 对输入数据进行更改，传入每个元素对应的高度 dynamicHeight[i] = x x 为元素i 的行高

    须要实现知道每个元素的高度（不切实际）

  2. 将当前元素先在屏外进行绘制并对齐高度进行测量后再将其渲染到用户可视区域内

    这种方法至关于双倍渲染消耗（不切实际）

  3. 传入一个estimateHeight 属性先对行高进行估计并渲染，而后渲染完成后得到真实行高并进行更新和缓存

    会引入多余的transform（能够接受），会在后边讲为何须要多余的transform...

  • 让咱们暂时先回到 HTML 部分
<!--ver 1.0 -->
<div className="vListContainer"> <div className="phantomContent"> ... <!-- item-1 --> <!-- item-2 --> <!-- item-3 --> .... </div> </div>


<!--ver 1.1 -->
<div className="vListContainer"> <div className="phantomContent" /> <div className="actualContent"> ... <!-- item-1 --> <!-- item-2 --> <!-- item-3 --> .... </div> </div>
复制代码

  • 在咱们实现 “定高” 虚拟列表时，咱们是采用了把元素渲染在phantomContent 容器里，而且经过设置每个item的position 为 absolute 加上定义top 属性等于 i * rowHeight 来实现不管怎么滚动，渲染内容始终是在用户的可视范围内的。在列表高度不能肯定的状况下，咱们就没法准确的经过estimateHeight 来计算出当前元素所处的y位置，因此咱们须要一个容器来帮咱们作这个绝对定位。

  • actualContent 则是咱们新引入的列表内容渲染容器，经过在此容器上设置position: absolute 属性来避免在每一个item上设置。

  • 有一点不一样的是，由于咱们改用actualContent 容器。当咱们进行滑动时须要动态的对容器的位置进行一个 y-transform 从而实现容器永远处于用户的视窗之中：

getTransform() {
  const { scrollTop } = this.state;
  const { rowHeight, bufferSize, originStartIdx } = this;

  // 当前滑动offset - 当前被截断的（没有彻底消失的元素）距离 - 头部缓冲区距离
  return `translate3d(0,${ scrollTop - (scrollTop % rowHeight) - Math.min(originStartIdx, bufferSize) * rowHeight }px,0)`;

}
复制代码

线上Demo：codesandbox.io/s/a-v-list-…

(注：当没有高度自适应要求时且没有实现cell复用时，把元素经过absolute渲染在phantom里会比经过transform的性能要好一些。由于每次渲染content时都会进行重排，可是若是使用transform时就至关于进行了( 重排 + transform) > 重排）

  • 回到列表元素高度自适应这个问题上来，如今咱们有了一个能够在内部进行正常block排布的元素渲染容器（actualContent ），咱们如今就能够直接在不给定高度的状况下先把内容都渲染进去。对于以前咱们须要用rowHeight 作高度计算的地方，咱们统一替换成estimateHeight 进行计算。

    • limit = Math.ceil(height / estimateHeight)
    • phantomHeight = total * estimateHeight

  • 同时为了不重复计算每个元素渲染后的高度(getBoundingClientReact().height) 咱们须要一个数组来存储这些高度

interface CachedPosition {
  index: number;         // 当前pos对应的元素的下标
  top: number;           // 顶部位置
  bottom: number;        // 底部位置
  height: number;        // 元素高度
  dValue: number;        // 高度是否和以前(estimate)存在不一样
}

cachedPositions: CachedPosition[] = [];

// 初始化cachedPositions
initCachedPositions = () => {
  const { estimatedRowHeight } = this;
  this.cachedPositions = [];
  for (let i = 0; i < this.total; ++i) {
    this.cachedPositions[i] = {
      index: i,
      height: estimatedRowHeight,             // 先使用estimateHeight估计
      top: i * estimatedRowHeight,            // 同上
      bottom: (i + 1) * estimatedRowHeight,   // same above
      dValue: 0,
    };
  }
};
复制代码
  • 当咱们计算完(初始化完) cachedPositions 以后因为咱们计算了每个元素的top和bottom，因此phantom 的高度就是cachedPositions 中最后一个元素的bottom值
this.phantomHeight = this.cachedPositions[cachedPositionsLen - 1].bottom;
复制代码
  • 当咱们根据estimateHeight 渲染完用户视窗内的元素后，咱们须要对渲染出来的元素作实际高度更新，此时咱们能够利用componentDidUpdate 生命周期钩子来计算、判断和更新：
componentDidUpdate() {
  ......
  // actualContentRef必须存在current （已经渲染出来） + total 必须 > 0
  if (this.actualContentRef.current && this.total > 0) {
    this.updateCachedPositions();
  }
}

updateCachedPositions = () => {
  // update cached item height
  const nodes: NodeListOf<any> = this.actualContentRef.current.childNodes;
  const start = nodes[0];

  // calculate height diff for each visible node...
  nodes.forEach((node: HTMLDivElement) => {
    if (!node) {
      // scroll too fast?...
      return;
    }
    const rect = node.getBoundingClientRect();
    const { height } = rect;
    const index = Number(node.id.split('-')[1]);
    const oldHeight = this.cachedPositions[index].height;
    const dValue = oldHeight - height;

    if (dValue) {
      this.cachedPositions[index].bottom -= dValue;
      this.cachedPositions[index].height = height;
      this.cachedPositions[index].dValue = dValue;
    }
  });

  // perform one time height update...
  let startIdx = 0;
  
  if (start) {
    startIdx = Number(start.id.split('-')[1]);
  }
  
  const cachedPositionsLen = this.cachedPositions.length;
  let cumulativeDiffHeight = this.cachedPositions[startIdx].dValue;
  this.cachedPositions[startIdx].dValue = 0;

  for (let i = startIdx + 1; i < cachedPositionsLen; ++i) {
    const item = this.cachedPositions[i];
    // update height
    this.cachedPositions[i].top = this.cachedPositions[i - 1].bottom;
    this.cachedPositions[i].bottom = this.cachedPositions[i].bottom - cumulativeDiffHeight;

    if (item.dValue !== 0) {
      cumulativeDiffHeight += item.dValue;
      item.dValue = 0;
    }
  }

  // update our phantom div height
  const height = this.cachedPositions[cachedPositionsLen - 1].bottom;
  this.phantomHeight = height;
  this.phantomContentRef.current.style.height = `${height}px`;
};
复制代码

  • 当咱们如今有了全部元素的准确高度和位置值时，咱们获取当前scrollTop (Offset)所对应的开始元素的方法修改成经过 cachedPositions 获取：

    由于咱们的cachedPositions 是一个有序数组，因此咱们在搜索时能够利用二分查找来下降时间复杂度

getStartIndex = (scrollTop = 0) => {
  let idx = binarySearch<CachedPosition, number>(this.cachedPositions, scrollTop, 
    (currentValue: CachedPosition, targetValue: number) => {
      const currentCompareValue = currentValue.bottom;
      if (currentCompareValue === targetValue) {
        return CompareResult.eq;
      }

      if (currentCompareValue < targetValue) {
        return CompareResult.lt;
      }

      return CompareResult.gt;
    }
  );

  const targetItem = this.cachedPositions[idx];

  // Incase of binarySearch give us a not visible data(an idx of current visible - 1)...
  if (targetItem.bottom < scrollTop) {
    idx += 1;
  }

  return idx;
};

  

onScroll = (evt: any) => {
  if (evt.target === this.scrollingContainer.current) {
    ....
    const currentStartIndex = this.getStartIndex(scrollTop);
    ....
  }
};
复制代码
  • 二分查找实现：
export enum CompareResult {
  eq = 1,
  lt,
  gt,
}



export function binarySearch<T, VT>(list: T[], value: VT, compareFunc: (current: T, value: VT) => CompareResult) {
  let start = 0;
  let end = list.length - 1;
  let tempIndex = null;

  while (start <= end) {
    tempIndex = Math.floor((start + end) / 2);
    const midValue = list[tempIndex];
    const compareRes: CompareResult = compareFunc(midValue, value);

    if (compareRes === CompareResult.eq) {
      return tempIndex;
    }
    
    if (compareRes === CompareResult.lt) {
      start = tempIndex + 1;
    } else if (compareRes === CompareResult.gt) {
      end = tempIndex - 1;
    }
  }

  return tempIndex;
}
复制代码
  • 最后，咱们滚动后获取transform的方法改形成以下:
getTransform = () =>
    `translate3d(0,${this.startIndex >= 1 ? this.cachedPositions[this.startIndex - 1].bottom : 0}px,0)`;
复制代码

线上Demo:codesandbox.io/s/a-v-list-…

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程