虚拟列表
文章平均质量分 51
黄金之剑
这个作者很懒,什么都没留下…
展开
-
如何实现一个可以加载10万+数据的长列表(二)
如何实现一个可以加载10万+数据的长列表(二)如何实现非固定高度的长列表在之前的基础上需要做一下改动设置两个容器,一个为真实的滚动区容器,另一个为显示容器。显示容器固定显示,通过更改滚动容器高度来适配结构如下: <div ref={this.domRef} className={`virtual-list-scroll ${className}`} style={style} onScroll={this.handleScroll}> <div cla原创 2022-01-19 19:13:52 · 436 阅读 · 0 评论 -
如何实现一个可以加载10万+数据的长列表(一)
普通的长列表就是直接生成对应的dom元素节点,但10万加的数据需要生成10万加个元素。我们先来看看渲染一万条数据的性能:从上图可以看到React渲染10000个节点数据使用了2秒时间。黄色段 生成数据节点使用了 1.3秒蓝色段 Layout计算 使用了0.7秒初始化加载表单就需要两秒 显然不可接受。在看一下优化后的长列表方案性能:黄色段 生成节点 使用57毫秒蓝色段 Layout计算 1.26毫秒为什么差异如此之大。实际上是因为节点过多对于浏览器而言是有额外的计算开销的。那么如何实现一原创 2022-01-17 12:11:41 · 969 阅读 · 0 评论