V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
muunala10221
V2EX  ›  程序员

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

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

    硬件越好,软件越慢。活生生的例子。
    maocat
        14
    maocat  
       2020-12-22 16:43:23 +08:00
    1,分段搜索,2000 个分一组,利用 js 的异步特性
    2,不用全跑玩,比如第一页,分到 20 个就直接结束(缺点是页码还是要计算,越精确搜索可能越慢)
    gzf6
        15
    gzf6  
       2020-12-22 16:48:59 +08:00
    试试 SQLite
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5502 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 06:57 · PVG 14:57 · LAX 22:57 · JFK 01:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.