使用 vuex 接收 web worker 处理的上传返回的信息，导致页面卡顿，未响应？
TomeWong · 2020-05-06 14:50:23 +08:00 · 2525 次点击这是一个创建于 1653 天前的主题，其中的信息可能已经有所发展或是发生改变。
在 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 文件中对象数组，数组查找数组的项，并对对应的项进行更改会不会很耗性能，导致渲染进程卡顿啊
 |
1
xiongotom 2020-05-06 16:26:21 +08:00
建议 performance 看一下，是不是 worker 触发 onmessage 的频率很高，导致渲染跟不上。
|
 |
3
lp4298707 2020-05-06 17:39:58 +08:00
听同事说过 好像 postmessage 数据量过大会导致通道阻塞...不知道是不是这个原因.
|
 |
4
redbuck 2020-05-06 17:48:19 +08:00
不要响应式的数据可以 Object.freeze 冻结,避免过度的 reactive.
|
 |
5
zhouyg 2020-05-06 17:50:03 +08:00
postmessage 在主线程接收的时候会被反序列化。数据量很大的情况下这个反序列化的开销是很大的
|
 |
7
TomeWong OP @lp4298707 postMeassge 只有第一次传的数据量很大，如果不将这部分数据渲染至页面中，是没有问题的，处理的还是挺快的
|
 |
8
ZZZZZZZZTC 2020-05-06 18:19:22 +08:00
@TomeWong 我是上 sqlite 了，做个分页，每次取一点。一下子几千上万条数据要渲染，页面很卡
|
 |
9
dinjufen 2020-05-06 18:48:09 +08:00
electron-vue 中 vuex 默认使用本地存储，如果数据更新频繁的话会产生大量磁盘读写，会卡住
|
 |
10
noe132 2020-05-06 19:05:11 +08:00
vuex 会对数据做双向绑定劫持
数据太大当然会卡 |
 |
11
jones2000 2020-05-07 00:43:39 +08:00
感觉设计有问题。 你 2 万个文件， 都是显示在传输列表中吗？ 1 屏放的下吗？ 界面只渲染当前屏的列表不就可以了，1 屏最多也就显示 200 条数据最多了， 渲染 200 多条数据是很快的， 不可能卡的。 不显示的数据不要渲染。
|
|
12
TomeWong OP @dinjufen 是的，vuex 在本地会生成一个 vuex.json，上传进度会频繁的在 vuex.json 中更新
|
Select Language