js 如何大数组如何改成多线程循环提升效率?

请问, 我现在页面上因为数据量大等待时间太长需要优化,
比如要循环5000条数据,一般的单线程循环太慢了,

                for (let item of res.data) {
                    if (!item.canEdit) {
                        $(".layui-table-body tbody tr[data-index='" + item.LAY_TABLE_INDEX + "'] td[data-field='orderQtyEdit']").removeAttr("data-edit");
                    } else {
                        $(".layui-table-body tbody tr[data-index='" + item.LAY_TABLE_INDEX + "'] td[data-field='orderQtyEdit']").css({'color': "#d7063b"})
                    }
                    editOrderQtyTableMap[item.itemNo] = item.orderQtyEdit;
                    editOrderQtyTableMap[item.itemNo + "_boxNum"] = item.boxNum;
                    totalBoxNum=totalBoxNum + Number(item.boxNum);
                }

比这样的代码,实际就是这样的代码,res.data 是个5000条作有的json数组,这样运行要将20秒,后端我通过Future已经优化了,前端查了搜了一圈没怎么理解那些处理方案的,比如Worker,比如我这种情况,如何用Worker 多线程提升这个数据处理的效率。

回复
阅读 826
4 个回答

能想到用 Worker 的也算是神人了。。
$(...) 优化一下就好了,你这样写法不慢才怪

Worker 线程不能操作 DOM ,考虑换成 React 或者 Vue 。
如果不担心 XSS 的话也可以拼接 HTML 然后直接修改 innerHTML,这样就可以用 Worker 了,但是不保证插入的过程比 jQuery 更快。

另外一种“现代化”的优化方案:
5000 条数据肯定不可能一屏幕显示完,那么你可以先把当前显示的部分+上下各一屏立即更新,其他的分批次 requestAnimationFrame更新。

Worker 多线程!操作DOM还用不到吧?

缓存加起来,如果是频繁操作,可把节点保存存在内存里面;
for of 也可直接替换成for循环,也会有提升;
阔以考虑加下,如果不满足条件,不操作DOM;

以上这些还是得根据你的业务来。

那么多数据量去一次性渲染?那必然很慢啊。为啥不搞成下拉加载那种的,下拉分页,虚拟列表等。

或者结合一下 document.createDocumentFragmentwindow.requestAnimationFrame 去做优化。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏