如何处理大数据(约50000个对象)的Vue 2内存使用情况

arrays Vue.js

Pro神无猴子

2020-03-14

我正在尝试为Vue 2上的大量半复杂对象实现一个表视图。基本上,这个想法是从数据库到JS缓存中收集5万到10万行之间的任意位置,然后对其进行动态分析以构建表-带有实时过滤器的视图(文本搜索)。表中的每一行都是可切换的,这意味着单击该行会将行更改为编辑模式,从而可以对该特定字段/单元格进行类似于Excel的编辑。

每个对象大约有100-150个字段/属性,但是在表中的任何给定时刻仅显示一定数量的'em(表列可以实时切换)。对于大型数据集,似乎DB正在推送约10-100mb的JSON数据,在这种情况下,这是可以接受的。从性能上讲,性能不是问题-过滤器的运行速度足够快,并且只有少量结果可以呈现给DOM。

一切都已经起作用了,过滤器已经在过滤器中列出了约100行(+“显示了100个以上”机制,等等),但是当我将大约8000个对象加载到数组时,我遇到了内存限制。这似乎保留了2 GB的RAM,在Chrome停止一起运行所有JS代码之后(尽管很奇怪,我没有得到任何警告/错误)。

我对行的内存使用情况进行了基准测试,似乎〜1000行保留了大约300mb的内存。这很可能是Vue反应性观察者保留的。

三个问题:

  1. 有没有一种方法可以切换特定数组列表对象的反应性(通过索引等),以使数组本身内的对象是不可观察的/不可改变的,除非明确调用该对象是可变的(即,当用户单击行时,这将启用编辑-模式)?
  2. How would you implement handling of large datasets for Vue, as reactivity seems to bottleneck the memory usage? Please do not suggest "limit the results within backend", because it's not the solution which I'm seeking here (even though I may need to create two-part filtering, one for fetching smaller initial dataset and one for realtime filtering). Basically I'm trying to push boundaries of "end of memory" from 8 000 -> 80 000 by re-thinking the data-architecture with Vue. Is the only problem having dataset storaged within Vue's data-variables as reactive?
  3. One idea I have is to turn that "items" -dataset to non-observable/non-reactive with Object.freeze or some similar approach and have table to render two datasets: one for non-reactive and one for those which are currently within edit-mode (which would be pushed to "editableItems" dataset when row is clicked)... any suggestions here (anything simpler, so that I'm able to handle everything within one array?)

I have done similar application on Angular 1, and it handled 50 000 rows quite well, so I'm sure it should be doable within Vue 2 as well... should be just a matter of finding a way on handling reactivity.

第1615篇《如何处理大数据(约50000个对象)的Vue 2内存使用情况》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android