Question

我在网络工作者上有代码，因为我不能用方法（函数）发布一个对象，我不知道如何用这段代码阻止阻止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工作者返回，有时可以有50k或更多对象。由于obj及其包含的所有方法都不能转移给we-worker，当数据长度为30k，40k或50k甚至更多时，UI会阻塞。这是最好的方法吗？提前谢谢。

Answer 1

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

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

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

Best way to iterate over an array without blocking the UI

Answer 2

更新

可悲的是，ImmutableJS doesn't work目前正在跨网络工作者。您应该能够传输ArrayBuffer，因此您无需将其解析回数组。另请阅读this文章。如果您的工作量很大，最好实际上从工作人员一次发回一个项目。

此前：

代码将所有数据转换为数组，这非常昂贵。如果可能，尝试从Web worker返回不可变数据结构。这将保证它不会在引用发生变化时发生变化，您可以继续分批缓慢地迭代它。

您可以做的下一件事是使用requestIdleCallback来安排处理小批量的商品。

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

非阻塞Javascript和并发

2 个答案: