背景

之前接到一个数据分组需求，简单来说就是会返回一个长数组列表，用户可以基于这些数据进行自定义分组；如拖拽选中的数据到某个分组、重命名、移除分组等操作。

任务

我的任务就是提供一个分组树，如下图红色框部分。首先请求一个全国城市列表，用户可以选中某些城市划分到一个“华北”的组、或者一个“华东”的组里面去。

image.png

分析

按照设计稿来看，其实我就要提供一个树形组件就行了，里面支持一些拖拽、多选展开折叠等基本操作就行。很幸运，我们基础组件里面有个virtrualTree的组件，支持需求的所有功能，并且本身就是虚拟滚动。我基于它进行简单封装即可。

结果 & 新的背景

开发一切很顺利，直到提测测试测到一个测试用例，加载200w条数据的数据表时，浏览器奔溃了。

image.png

这。。。

我一开始不相信，不是已经是支持虚拟滚动了吗？怎么还会奔溃？

于是，我开始干活排查。打开performance录制。好家伙，一加载数据就直接奔溃了，还录个毛啊。。。怎么办？

如果是你，你会怎么做？欢迎留言。
（未完待续。。。）