非阻塞Javascript和并发性

我有一个web worker上的代码，因为我无法向其发布带有方法（函数）的对象，我不知道如何停止使用此代码阻止UI：

        if (data != 'null') {
            obj['backupData'] = obj.tbl.data().toArray();
            obj['backupAllData'] = data[0];
        }
        obj.tbl.clear();
        obj.tbl.rows.add(obj['backupAllData']);
        var ext = config.extension.substring(1);
        $.fn.dataTable.ext.buttons[ext + 'Html5'].action(e, dt, button, config);
        obj.tbl.clear();
        obj.tbl.rows.add(obj['backupData'])

此代码从html表导出记录。数据是一个数组，从web worker返回，有时可能有50k或更多对象。 当数据长度为30k、40k或50k或甚至更大时，用户界面会阻塞，因为

obj

及其包含的所有方法都不能传递给我们的工作人员。 哪种方法最好？

---

提前感谢。

您可以尝试将繁重的工作包装在一个异步函数中，例如超时，以允许引擎对整个逻辑进行排队，并在有时间时对其进行详细说明

setTimeout(function(){
  if (data != 'null') {
        obj['backupData'] = obj.tbl.data().toArray();
        obj['backupAllData'] = data[0];
    }
  //heavy stuff
}, 0)

或者，如果代码非常长，您可以尝试找出一种策略，将代码拆分为操作块，并在单独的异步函数中执行每个块（超时）

更新：

不幸的是，ImmutableJS目前在webworkers中流行。您应该能够传输ArrayBuffer，这样就不需要将其解析回数组。还要读一篇文章。如果你的工作量那么大，最好一次从员工那里发回一个项目

以前：

这段代码将所有数据转换为一个数组，这将立即带来高昂的成本。如果可能，尝试从web worker返回不可变的数据结构。这将保证它在引用更改时不会更改，并且您可以继续批量缓慢地迭代它

接下来，您可以使用

requestIdleCallback

来安排要处理的小批量项目

---

这样你应该可以让UI呼吸一下。

setTimeout

如果你的函数包装在

setTimeout

中，并且执行长时间运行的操作，那么你就无法拯救你的屁股。

在不阻塞UI的情况下迭代数组的最佳方法。

过去是我最喜欢的答案。。。。ion top是worker file，然后是worker postMessage（dat）当前未运行时的代码

引用错误：未定义worker1

。