请问 10 万条数据 使用 element-ui 的 transfer 展现 有什么比较好的办法不卡吗

2020-12-22 11:29:50 +08:00
 muunala10221
目前我使用了前端分页,10 万条数据 每页 20 条 分 5000 页,这样展现倒是可以了,但是搜索的话,要遍历 10 万条数据 还是很慢很慢
```
item.rawData.filter((obj) => {
obj.label.indexOf(val) > -1
})
```
这是我使用 transfer 的搜索方法,去 filter10 万条数据,页面会直接崩溃。请问不通过后端 前端可以解决这个问题吗
1594 次点击
所在节点    程序员
15 条回复
codespots
2020-12-22 11:39:21 +08:00
什么场景下,需要看 5000 页这么多数据?什么场景下搜索需要在前端做?你确定这个搜索不应该在后端实现?
muunala10221
2020-12-22 12:02:31 +08:00
@codespots 数据库下表的前端展现,后端当然可以实现 我就是想请教下前端用什么办法可以快速过滤筛选
ferrum
2020-12-22 12:04:12 +08:00
这个情况下用 for 循环应该会快点。
3dwelcome
2020-12-22 12:08:30 +08:00
正常情况应该后端处理,如果要前端处理,需要引入 webassembly 来做一些特定筛选算法的优化处理。10 万条数据对于 vue 还是太牵强了。换成汇编转义指令,说不定还能搞一下。
随着 vue.js 流行,让前端负担越来越重。你这种帖子都看到过好几个了,还有载入超大层级数据爆内存的,问怎么解决。
muunala10221
2020-12-22 12:09:02 +08:00
@3dwelcome 明白了 感谢
muunala10221
2020-12-22 12:09:16 +08:00
@ferrum 好的谢谢
wisunny
2020-12-22 12:11:13 +08:00
之前看到过一个解决方案,用 webworker 多线程,分段搜索,效率还行
jones2000
2020-12-22 12:36:22 +08:00
搜索肯定不能 for 遍历, 最起码也是关键子做 map 在搜索。如果你是 app 做壳, 或者是 CEF 壳, 直接在本地保存数据,通过文件交互搜索,起码内存不会爆,如果是 10 条新闻数据, 内存都不够读完的。
dorothyREN
2020-12-22 15:47:03 +08:00
你这 万一哪个客户端机器 1G 内存不就直接爆了嘛
iceneet
2020-12-22 15:55:57 +08:00
这种还是后端做吧 前端处理大概率会遇到客户端内存直接爆了的情况
zszhere
2020-12-22 16:21:12 +08:00
楼主是内存厂家派来卧底的么 都这么干内存价格就拉上来了
liuzhaowei55
2020-12-22 16:26:56 +08:00
我怀疑你和客户的采购有一手。
echowuhao
2020-12-22 16:29:43 +08:00
https://en.wikipedia.org/wiki/Wirth%27s_law

Wirth's law is an adage on computer performance which states that software is getting slower more rapidly than hardware is becoming faster.

硬件越好,软件越慢。活生生的例子。
maocat
2020-12-22 16:43:23 +08:00
1,分段搜索,2000 个分一组,利用 js 的异步特性
2,不用全跑玩,比如第一页,分到 20 个就直接结束(缺点是页码还是要计算,越精确搜索可能越慢)
gzf6
2020-12-22 16:48:59 +08:00
试试 SQLite

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/737779

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX