近期在某平台开发迭代的过程中遇到了超长List嵌套在antd Modal里加载慢，卡顿的情况。于是心血来潮决定从零自己实现一个虚拟滚动列表来优化一下整体的体验。 首先我们需要定义几个变量/名称。 vListContainer 为可视区域的容器，具有 overflow-y: au…

在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。 我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成…

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

虚拟列表主要解决大数据量数据一次渲染性能差的问题。 之前写过一篇关于虚拟列表实现的文章：造轮子之不同场景下虚拟列表实现，主要讲了定高（高度统一和高度不统一两种情况）虚拟列表的实现，本文着重研究……

关于虚拟滚动已经写过一篇文章，讲解了虚拟滚动实现原理和具体实现过程：虚拟滚动实现。关于不定高虚拟列表实现原理以及具体怎么实现也写过一篇文章：不定高虚拟列表的一种实现。 本文是将虚拟滚动与虚拟列表结合…

本篇文章致力于小白也能懂的虚拟滚动实现原理，一步一步深入比较以及优化实现方案，内容浅显易懂，但篇幅可能较长。 如果你只想了解实现思路，那么可以直接看图或者跳到文章最后。 话不多说，直接开始好吧。 想像一下，当你有10万数据需要展示的时候，咋办呢？我们来试一下将它全部加载出来。 …

如果打造一个高性能的高体验的无限滚动组件？虚拟滚动是一个很好的方案，使用固定个数元素来模拟滚动，减少大量的元素渲染对性能的消耗