本文为稀土掘金技术社区首发签约文章。大数据列表的渲染是一个比较常见的问题，通常咱们都是使用虚拟滚动来进行优化，但目前的虚拟滚动基本都是定高的虚拟滚动。因此本文介绍了一种不定高的虚拟滚动方案。

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

1. 介绍 什么是虚拟滚动？虚拟滚动就是通过js控制大列表中的dom创建与销毁，只创建可视区域dom，非可视区域的dom不创建。这样在渲染大列表中的数据时，只创建少数的dom，提高性能。 2. 分类

作者：滴滴webapp架构组-付楠 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动…

一、使用背景 业务开发中存在长列表显示需求，一些用户的聊天列表会出现几千条数据的情况，也就意味着要一次性渲染几千条数据，造成明显的卡顿，这时就有必要对聊天列表进行性能优化来提升用户体验。 对于这种需求

前言 本文整理自：developers.google.cn 及 高性能JavaScript，再加上了一些个人对其中提到的知识点的理解与补充。前端性能优化涉及很多方面，本文仅针对高性能渲染进行分析。

在一些场景中，我们会遇到高频率大批量请求数据，密集型 CPU 运算。为了避免请求过于频繁导致资源不足情况。 需要保持并行请求的数量固定...

有一天被pm小姐姐反馈网站无法打开，一直是白屏； 我再本地打开了一下是正常的，而且展示速度也是正常的；查了下日志报错也没有啥问题；这个页面中只有一个展示二维码，扫码登录的功能； 收集了…

性能优化的文章相信同学们都看的很多，大部分的套路基本上都了解过。比如针对资源文件优化（webpack打包优化、gzip压缩、cdn加速、浏览器缓存、懒加载、http2等），页面渲染优化（SSR、