未分類
5 4 月 2020

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

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

資深大佬 : TomeWong 9

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

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

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

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

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

谢谢！！！

大佬有話說 (15)

  • 資深大佬 : xiongotom

    建议 performance 看一下，是不是 worker 触发 onmessage 的频率很高，导致渲染跟不上。

  • 主 資深大佬 : TomeWong

    @xiongotom 好的，我试下，谢谢啦

  • 資深大佬 : lp4298707

    听同事说过 好像 postmessage 数据量过大会导致通道阻塞…不知道是不是这个原因.

  • 資深大佬 : redbuck

    不要响应式的数据可以 Object.freeze 冻结,避免过度的 reactive.

  • 資深大佬 : zhouyg

    postmessage 在主线程接收的时候会被反序列化。数据量很大的情况下这个反序列化的开销是很大的

  • 主 資深大佬 : TomeWong

    @lp4298707 小数据量是非常快的，现在一下上传 2 万个文件，页面过个几分钟就卡死了

  • 主 資深大佬 : TomeWong

    @lp4298707 postMeassge 只有第一次传的数据量很大，如果不将这部分数据渲染至页面中，是没有问题的，处理的还是挺快的

  • 資深大佬 : ZZZZZZZZTC

    @TomeWong 我是上 sqlite 了，做个分页，每次取一点。一下子几千上万条数据要渲染，页面很卡

  • 資深大佬 : dinjufen

    electron-vue 中 vuex 默认使用本地存储，如果数据更新频繁的话会产生大量磁盘读写，会卡住

  • 資深大佬 : noe132

    vuex 会对数据做双向绑定劫持
    数据太大当然会卡

  • 資深大佬 : jones2000

    感觉设计有问题。 你 2 万个文件， 都是显示在传输列表中吗？ 1 屏放的下吗？ 界面只渲染当前屏的列表不就可以了，1 屏最多也就显示 200 条数据最多了， 渲染 200 多条数据是很快的， 不可能卡的。 不显示的数据不要渲染。

  • 主 資深大佬 : TomeWong

    @dinjufen 是的，vuex 在本地会生成一个 vuex.json，上传进度会频繁的在 vuex.json 中更新

  • 主 資深大佬 : TomeWong

    @jones2000 一次显示 20 条，往下拖动滚动条会往当前屏幕上累加显示，上传成功的会从当前屏中移除掉

  • 資深大佬 : jones2000

    @TomeWong 那只有在当前屏 20 条数据变动或上传成功才会触发渲染，其他情况不会触发渲染对吗？ 那应该不会卡的。

  • 主 資深大佬 : TomeWong

    @jones2000 但会一直往 vuex 中写入数据的