Javascript 如何处理浏览器中显示数据的重载处理

上下文

• 我们有一个基于余烬的应用程序，可以处理大量结构化数据（业务流程模型）
• 重要！我们真的希望尽可能让我们的应用程序离线

需求

虽然我们只需要显示这些数据，编辑它们，等等，但在雷达中没有显示障碍

但现在，我们想在这些模型上应用处理：有效性检查、路径查找。。。以及几种耗时/内存消耗算法

问题

我们可以在服务器上处理算法，但这会扼杀应用程序的离线模式

我们曾考虑过web workers，以避免在后台冻结应用程序和处理算法，但我们面临一个主要问题：将数据传递给worker时会出现数据重复。 使用可转移对象将使应用程序至少在计算过程中失去所有权（和数据），因此它似乎不可行

---

你将如何处理这个问题？我们唯一的出路是使用算法的“类似于协同路由”的实现吗？有什么线索吗？

如果您主要关心的是在开发冗长的javascript处理过程中不冻结UI，您可以将循环体重构为连续的步骤，这样每个步骤都可以使用

window.setTimeout

调用下一步。此技术允许（单个）线程处理每个交互之间的UI事件：

var pr = function(x) {console.log(x)};
var COUNT=3;

// original regular javascript loop
for(var i=0; i<COUNT; i++) {
  var msg = "current index is (" + i + ")";
  pr(msg);
}

// step-by-step sequential calls
var body = function(i) {
  var msg = "non-blocking for: index is (" + i + ")";
  pr(msg);
}
nonBlockingFor(body, 4);

---

请注意，这是一个非常简化的函数，可以对其进行改进，以处理其他与多线程相关的问题，例如：等待线程完成（连接）。我希望这段代码对您有所帮助。如果您喜欢这种解决问题的方法，请告诉我，如果您喜欢，我可以花一些时间改进我的建议。

很长一段时间过去了，但是：解决方案可能是

Javascript本质上是单线程的，这是一种设计选择，因为多线程是一个难题，99%的随意Javascript开发人员不会正确处理

worker是获得另一个线程并且不阻塞UI的唯一方法，但是为了使它们在没有真正多线程的危险副作用的情况下可用，正如您所注意到的，它们在完全分离的上下文中运行。因此，它们更类似于调用传递命令行参数的外部命令，而不是生成另一个线程

因此，在“异步”模式下工作是目前唯一的解决方案，但由于您没有等待按钮的点击或远程连接的完成，因此您可以绑定到的唯一异步事件是计时器的滴答声，这导致了糟糕的代码样式，困扰着js中长期运行的操作

然而，我发现有一个非常有趣且未知的小库（尽管它的网站很差），它能够动态地将一个编写精美的过程代码“转换”为异步模型内在需要的大量计时器和函数：

与Windows3.1一样，您只需要在一段时间内将（$await（Jscex.Async.sleep（50））；）提交给浏览器，这样它就不会完全冻结。它实际上会在引擎盖下冻结，但如果你足够频繁地屈服，没有人会注意到：）（毕竟，这就是多任务处理在你的cpu的每一个单核中的工作方式，非常小的一段时间，在这段时间内，cpu 100%地处理一组指令。把这段时间延长到20毫秒，谁也说不出来）

---

我认为这可以帮助您“生成”一个类似JS的协同程序，而不需要实际“编写”这样的代码，而是将搞乱它的工作委托给“预编译器”

我认为重要的问题是你是否有能力不冻结这个应用程序。假设用户在算法运行时对数据进行更改。在后台运行的流程的结果是否仍然有效/相关？如果没有，最好向用户显示一个进度条，然后继续计算。重复数据有什么问题？太多东西无法序列化到worker？@SimoneGianni主要问题是UI上下文和worker之间的数据同步context@MikhailKozhevnikov即使使用进度条，也无法冻结UI…非常感谢您的回答。事实上，这与我所说的“类似协同程序”的方法非常接近。。。这种解决方案的问题是，当算法趋于复杂时，总体实现复杂度会急剧增加-（好的方面是，在您将库设置为运行非阻塞/并发javascript之后，您可以以一种简单、同质的方式开发业务库。顺便说一句，也许您已经知道了，但是这个库似乎是一个很好的候选库[]。感谢链接。我不知道这个库。听起来很有趣。

// function constructor
var nonBlockingFor = (function() {
  function _run(context) {
    if(context.idx > context.max) return;
    context.fnc(context.idx++);
    window.setTimeout((function(){ _run(context)}), 1);
  }
  return (function _start(ufn, uqt, runId) {
    _run({idx: 0, max: uqt -1, fnc: ufn || (function(){}), runId: runId});
  });
})();