之前接到一个数据分组需求，简单来说就是会返回一个长数组列表，用户可以基于这些数据进行自定义分组；如拖拽选中的数据到某个分组、重命名、移除分组等操作。
我的任务就是提供一个分组树，如下图红色框部分。首先请求一个全国城市列表，用户可以选中某些城市划分到一个“华北”的组、或者一个“华东”的组里面去。
image.png
按照设计稿来看，其实我就要提供一个树形组件就行了，里面支持一些拖拽、多选展开折叠等基本操作就行。很幸运，我们基础组件里面有个virtrualTree的组件，支持需求的所有功能，并且本身就是虚拟滚动。我基于它进行简单封装即可。
开发一切很顺利，直到提测测试测到一个测试用例，加载200w条数据的数据表时，浏览器奔溃了。
image.png
这。。。
我一开始不相信，不是已经是支持虚拟滚动了吗？怎么还会奔溃？
于是，我开始干活排查。打开performance录制。好家伙，一加载数据就直接奔溃了，还录个毛啊。。。怎么办？
如果是你，你会怎么做？欢迎留言。
（未完待续。。。）
背景 之前接到一个数据分组需求，简单来说就是会返回一个长数组列表，用户可以基于这些数据进行自定义分组；如拖拽选中的...
介绍崩溃的原因 当键盘吊起，开辟了子线程处理选择图片打开图片浏览器时崩溃。 崩溃的解决方法 将打开图片浏览器的处理...
FormData 数据 提交的数据通过FormData来进行设置 ， 新版的只有支持HTML 5 的浏览器才行 方...
突然, Google 浏览器打不开了, 崩溃了, 只好用 Ubuntu 自带的 Firefox 浏览器百度搜索解决...
Chrome浏览器所有页面崩溃 chrome浏览器79更新重启RendererCodeIntegrity导致所有页...
浏览器崩溃了，解决办法，添加 -no-sandbox这个参数 http://jingyan.baidu.com/...
一直在用友盟做崩溃统计，崩溃数据收集一直没有问题，很突然的某天它提供的解析工具解析不出对应的崩溃数据了。就自己找了...
在vue table中如果单页数据量太大的话，会很消耗内存，设置导致浏览器崩溃。优化方式：1.针对渲染效果进行改动...
今年你挣了20W，会发现有很多挣200W的人，当你挣了200W万，又会发现有很多2000W的人。 年入2万的农民，...
HTTP协议 请求部分 --- 说白了就是浏览器发送给服务器的数据格式请求行 --- 提交方式，HTTP版本号et...
本文标题：200w行的数据，浏览器崩溃了
本文链接：https://www.haomeiwen.com/subject/qsdlyltx.html
网友评论