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

使用 vuex 接收 web worker 处理的上传返回的信息,导致页面卡顿,未响应?

  •  
  •   TomeWong · 2020-05-06 14:50:23 +08:00 · 2541 次点击
    这是一个创建于 1661 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在 Electron 中使用 web worker 子线程来处理上传万级的文件(没有问题),将返回的信息通过在 web worker

    主进程的 onmessage 接收,将接收的信息传递给 vuex, 然后在另外一个传输列表组件中使用 vue 的 watch 监听

    数据的变化,如果有变化,将数据更新至传输列表中。

    目前的问题是,通过 vuex 处理,然后 watch 监听,同布数据有问题,导致渲染进程卡顿,未反应。

    是不是 vuex 不适合处理数量级大的,现在正在尝试使用 sqlite3 来处理。

    谢谢!!!

    第 1 条附言  ·  2020-05-06 18:07:35 +08:00
    我看了下 vuex 生成的一个 json 数据文件,这个文件有 12MB,有 44 万行,在上传的过程中,要遍历这个 json 文件中对象数组,数组查找数组的项,并对对应的项进行更改会不会很耗性能,导致渲染进程卡顿啊
    15 条回复    2020-05-07 10:37:17 +08:00
    xiongotom
        1
    xiongotom  
       2020-05-06 16:26:21 +08:00
    建议 performance 看一下,是不是 worker 触发 onmessage 的频率很高,导致渲染跟不上。
    TomeWong
        2
    TomeWong  
    OP
       2020-05-06 16:32:08 +08:00
    @xiongotom 好的,我试下,谢谢啦
    lp4298707
        3
    lp4298707  
       2020-05-06 17:39:58 +08:00
    听同事说过 好像 postmessage 数据量过大会导致通道阻塞...不知道是不是这个原因.
    redbuck
        4
    redbuck  
       2020-05-06 17:48:19 +08:00
    不要响应式的数据可以 Object.freeze 冻结,避免过度的 reactive.
    zhouyg
        5
    zhouyg  
       2020-05-06 17:50:03 +08:00
    postmessage 在主线程接收的时候会被反序列化。数据量很大的情况下这个反序列化的开销是很大的
    TomeWong
        6
    TomeWong  
    OP
       2020-05-06 18:03:57 +08:00
    @lp4298707 小数据量是非常快的,现在一下上传 2 万个文件,页面过个几分钟就卡死了
    TomeWong
        7
    TomeWong  
    OP
       2020-05-06 18:09:41 +08:00
    @lp4298707 postMeassge 只有第一次传的数据量很大,如果不将这部分数据渲染至页面中,是没有问题的,处理的还是挺快的
    ZZZZZZZZTC
        8
    ZZZZZZZZTC  
       2020-05-06 18:19:22 +08:00
    @TomeWong 我是上 sqlite 了,做个分页,每次取一点。一下子几千上万条数据要渲染,页面很卡
    dinjufen
        9
    dinjufen  
       2020-05-06 18:48:09 +08:00
    electron-vue 中 vuex 默认使用本地存储,如果数据更新频繁的话会产生大量磁盘读写,会卡住
    noe132
        10
    noe132  
       2020-05-06 19:05:11 +08:00
    vuex 会对数据做双向绑定劫持
    数据太大当然会卡
    jones2000
        11
    jones2000  
       2020-05-07 00:43:39 +08:00
    感觉设计有问题。 你 2 万个文件, 都是显示在传输列表中吗? 1 屏放的下吗? 界面只渲染当前屏的列表不就可以了,1 屏最多也就显示 200 条数据最多了, 渲染 200 多条数据是很快的, 不可能卡的。 不显示的数据不要渲染。
    TomeWong
        12
    TomeWong  
    OP
       2020-05-07 09:23:56 +08:00
    @dinjufen 是的,vuex 在本地会生成一个 vuex.json,上传进度会频繁的在 vuex.json 中更新
    TomeWong
        13
    TomeWong  
    OP
       2020-05-07 09:27:59 +08:00
    @jones2000 一次显示 20 条,往下拖动滚动条会往当前屏幕上累加显示,上传成功的会从当前屏中移除掉
    jones2000
        14
    jones2000  
       2020-05-07 09:43:10 +08:00
    @TomeWong 那只有在当前屏 20 条数据变动或上传成功才会触发渲染,其他情况不会触发渲染对吗? 那应该不会卡的。
    TomeWong
        15
    TomeWong  
    OP
       2020-05-07 10:37:17 +08:00
    @jones2000 但会一直往 vuex 中写入数据的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1036 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 22:58 · PVG 06:58 · LAX 14:58 · JFK 17:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.