浅说虚拟列表的实现原理 about blog

[tenadolanter]

测试了下，css里面元素的最大高度大概为33554400px，所以当列表数据非常多的时候，比如一千万，这种虚拟列表的实现方法无法滚动到最底部，这个算是一个bug吧

[Bravo123]

发现两个问题
1.快速滚动或者直接拉到页面最下面，会直接白屏
2.this.cache会在来回滚动中越来越大

[blueYufisher]

请问一下当滑动过快的时候，页面会空白，这种如何解决

[jeffacode]

看了下感觉应该不用这么麻烦，而且用的cache真的会越来越大
我的想法是这样的：

<div className="container" ref={containerRef} style={{ height: 400, width: 200 }}>
  <div className="box" style={{ height: itemHeight * allData.length }}>
    <div className="viewBox" style={{ paddingTop: startOffset }}>
      {data.map((d) => (
        <div key={d} className="item" style={{ height: itemHeight }}>
          {d}
        </div>
      ))}
    </div>
  </div>
</div>

[1zumii]

@FAKER-A
excalidraw

[njleonzhang]

受教啦。有2点和你交流下啊：

1. estimatedItemHeight 这个值是一个平均值的话，运气不好的话是否会出现问题呢？比如，前面几个都特别短，然后出现 item 没有占满屏幕。取一个元素的最小高度来计算 estimatedItemHeight，看起来最为保险，但是这样就导致要多渲染很多元素了。考虑到有 bufferSize 这个缓冲, estimatedItemHeight 的方案通常应该不会出什么问题。我这样理解应该对吧。😂

2. 关于 bufferSize 这个值上一点提到了一个作用。另外一点，如果没有这个 bufferSize，那么用户往下滚动的时候，可能由于来不及渲染导致先看到一段空白，然后item才渲染出来吧。您文章提到的 bufferSize 是一个缓冲值，用来增加一定的缓存区域，让正常滑动速度的时候不会显得那么突兀。，应该是这个意思吧。

[dwqs]

@njleonzhang

1. 你说的情况是可能存在的。estimatedItemHeight 取平均值是一个建议，对于你说的这种情况，可以不按照这个建议，譬如直接把 estimatedItemHeight 设置成 30 这样子(react-virtualized 貌似就是这个默认值) ，另外如果按照取平均值的建议，那可以将 buffer 设置大一些，我觉得也能有效避免你说的这种情况。

2. 是的

[nanhupatar]

请问博客可以转载么，会注明出处和作者，没有看到文章共享协议，所以问一下

[dwqs]

@nanhupatar 可以

[ZhaZhengRefn]

看完之后实现了一份。不由得说，这个实现真的让人惊艳

[hkongm]

记得若干年前一届 QCon 天猫上去特地讲了这个主题
不止是列表 offset / height 这些
就连滚动贝塞尔函数都是经过精密计算出来的。。。因为要自己模拟滚动。。。

[haoxutong]

楼主没有发现自己动态滚动实现方案有bug吗

[snakeUni]

是否必须要设置可视区域的高度才可以啊。我尝试了 react-window，必须要设置高度

[Xekin97]

虚拟列表还有个很极端的问题，就是浏览器的 Top 值和 height 都有一个极限的值，react-virtualize 的实现中，滚动都会修改列表中所有元素的 top 值，然后实现一个类似于放大镜的效果，在元素渲染时销毁后不会堆叠高度，不知道怎么才能优化得那么顺畅。

[chillerxx]

我项目起来报错 require is not defined 我哭了

[nieshuangyan]

这是来自QQ邮箱的自动回复邮件。您好，您的邮箱我已经收到了，感谢您的来信！

[mjw-git]

cache会越来越大，可以按照索引存一份，不要每次都push进去.

[TopAlien]

cache会越来越大，可以按照索引存一份，不要每次都push进去.

LRUCache

[NoAlligator]

测试了下，css里面元素的最大高度大概为33554400px，所以当列表数据非常多的时候，比如一千万，这种虚拟列表的实现方法无法滚动到最底部，这个算是一个bug吧

这个不能算BUG吧？你原本那么多元素就支持不了这么长，这和加不加虚拟滚动没有关系吧？

[nieshuangyan]

这是来自QQ邮箱的自动回复邮件。您好，您的邮箱我已经收到了，感谢您的来信！

[Jetmet]

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[FAKER-A]

看了下感觉应该不用这么麻烦，而且用的cache真的会越来越大 我的想法是这样的：

<div className="container" ref={containerRef} style={{ height: 400, width: 200 }}>
  <div className="box" style={{ height: itemHeight * allData.length }}>
    <div className="viewBox" style={{ paddingTop: startOffset }}>
      {data.map((d) => (
        <div key={d} className="item" style={{ height: itemHeight }}>
          {d}
        </div>
      ))}
    </div>
  </div>
</div>

你好，想问下这图是用什么软件画的啊，很好看。

[dwqs]

您的邮件已经收到，我会尽快回复，谢谢！

[Jetmet]

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[nieshuangyan]

这是来自QQ邮箱的自动回复邮件。您好，您的邮箱我已经收到了，感谢您的来信！