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

Question

请问， 我现在页面上因为数据量大等待时间太长需要优化，
比如要循环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 多线程提升这个数据处理的效率。

Answer 1

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

Answer 2

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

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

Answer 3

Worker 多线程！操作DOM还用不到吧？

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

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

Answer 4

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

或者结合一下 document.createDocumentFragment 和 window.requestAnimationFrame 去做优化。