请问 10 万条数据 使用 element-ui 的 transfer 展现 有什么比较好的办法不卡吗
muunala10221 · 2020-12-22 11:29:50 +08:00 · 1678 次点击这是一个创建于 1466 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前我使用了前端分页，10 万条数据 每页 20 条 分 5000 页，这样展现倒是可以了，但是搜索的话，要遍历 10 万条数据 还是很慢很慢
```
item.rawData.filter((obj) => {
obj.label.indexOf(val) > -1
})
```
这是我使用 transfer 的搜索方法，去 filter10 万条数据，页面会直接崩溃。请问不通过后端 前端可以解决这个问题吗
```
item.rawData.filter((obj) => {
obj.label.indexOf(val) > -1
})
```
这是我使用 transfer 的搜索方法，去 filter10 万条数据，页面会直接崩溃。请问不通过后端 前端可以解决这个问题吗
 |
1
codespots 2020-12-22 11:39:21 +08:00
什么场景下，需要看 5000 页这么多数据？什么场景下搜索需要在前端做？你确定这个搜索不应该在后端实现？
|
 |
2
muunala10221 OP @codespots 数据库下表的前端展现，后端当然可以实现 我就是想请教下前端用什么办法可以快速过滤筛选
|
 |
3
ferrum 2020-12-22 12:04:12 +08:00 via iPhone
这个情况下用 for 循环应该会快点。
|
 |
4
3dwelcome 2020-12-22 12:08:30 +08:00
正常情况应该后端处理，如果要前端处理，需要引入 webassembly 来做一些特定筛选算法的优化处理。10 万条数据对于 vue 还是太牵强了。换成汇编转义指令，说不定还能搞一下。
随着 vue.js 流行，让前端负担越来越重。你这种帖子都看到过好几个了，还有载入超大层级数据爆内存的，问怎么解决。 |
|
5
muunala10221 OP @3dwelcome 明白了 感谢
|
|
6
muunala10221 OP @ferrum 好的谢谢
|
 |
7
wisunny 2020-12-22 12:11:13 +08:00
之前看到过一个解决方案，用 webworker 多线程，分段搜索，效率还行
|
 |
8
jones2000 2020-12-22 12:36:22 +08:00
搜索肯定不能 for 遍历， 最起码也是关键子做 map 在搜索。如果你是 app 做壳， 或者是 CEF 壳， 直接在本地保存数据，通过文件交互搜索，起码内存不会爆，如果是 10 条新闻数据， 内存都不够读完的。
|
 |
9
dorothyREN 2020-12-22 15:47:03 +08:00
你这 万一哪个客户端机器 1G 内存不就直接爆了嘛
|
 |
10
iceneet 2020-12-22 15:55:57 +08:00
这种还是后端做吧 前端处理大概率会遇到客户端内存直接爆了的情况
|
 |
11
zszhere 2020-12-22 16:21:12 +08:00 via iPhone
楼主是内存厂家派来卧底的么 都这么干内存价格就拉上来了
|
 |
12
liuzhaowei55 2020-12-22 16:26:56 +08:00 via Android
我怀疑你和客户的采购有一手。
|
 |
13
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. 硬件越好，软件越慢。活生生的例子。 |
 |
14
maocat 2020-12-22 16:43:23 +08:00
1，分段搜索，2000 个分一组，利用 js 的异步特性
2，不用全跑玩，比如第一页，分到 20 个就直接结束（缺点是页码还是要计算，越精确搜索可能越慢） |
 |
15
gzf6 2020-12-22 16:48:59 +08:00
试试 SQLite
|
Select Language