非阻塞Javascript和并发

Question

我在网络工作者上有代码，并且因为我无法使用method（functions）向其发布对象，所以我不知道如何使用以下代码停止阻止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或更多的对象。 由于obj及其包含的所有方法都不能转让给我们工作者，因此，当数据长度为30k，40k或50k甚至更大时，UI会阻塞。 哪个是最好的方法？ 提前致谢。

Answer 1

您可以尝试将繁重的工作包装在异步功能（例如超时）中，以使引擎在有时间时就将整个逻辑排队并进行详细说明

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

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

遍历数组而不阻塞UI的最佳方法

Answer 2

更新：

可悲的是，ImmutableJS 目前无法在网络工作人员中使用。 您应该能够传输ArrayBuffer，因此您无需将其解析回数组。 另请阅读此文章。 如果您的工作量如此之大，最好一次实际从工人那里寄回一件物品。

先前：

该代码将所有数据转换为一个数组，这将立即造成高昂的成本。 如果可能，请尝试从Web Worker返回一个不变的数据结构。 这将确保在引用更改时它不会更改，您可以继续在批处理中缓慢地对其进行迭代。

您可以做的下一件事是使用requestIdleCallback安排要处理的小批量项目。

这样，您应该可以使UI呼吸一下。