如何在Angular 4中的工作线程中运行CPU密集型操作并更新UI中的进度？

Question

我看到一对夫妇的例子是杰森特普利兹已经撰写了有关使用Web工人角2 角4 CLI现在支持平台工人运行在辅助线程的应用程序.该阶乘的例子就是一个很好的例子.或者这个循序渐进的例子.

1. 使用platform-worker保证所有长计算操作都在web worker中运行？或者我应该创建另一个使用platform-worker来运行长计算操作的角度模块(不是app模块)？因此,将有两个模块,一个用于应用程序,另一个用于长时间操作？

2. 我应该Worker像这个例子一样创建单独的创建工作线程吗？

3. 如何根据操作进度更新UI？我假设如果长操作是在for循环中完成的,那么在循环完成之前,它不会让UI知道进度吗？我应该将长操作分成多个小操作并更新UI吗？

Answer 1

我将尝试至少提供一个占位符答案，直到我们得到更详尽的答案：

1. 是的，平台工作人员将您的代码从 UI 线程中取出。

更长的解释

使用platform-worker可以保证您的代码在 Web Worker 中运行。Angular 仍然必须在 UI 线程上运行一些代码，但是platform-worker基本上将所有代码和逻辑移动到工作线程中，计算所有 DOM 调用，当时间合适时，它会调用你的 DOM 有它的魔力。但这还不是全部，所以让我们多考虑一下。

2. 单独的工人：取决于，但 TL;DR：是的。

更长的解释

你的问题意味着一些繁重的计算工作。不是繁重的 UI 工作，而是繁重的计算工作。这与仅仅卸载主线程上的所有 UI 工作不同。

如果您有重型应用程序（例如具有许多绑定的巨大表，或者许多组件运行大量 CPU 密集型任务），则可能会被视为重型应用程序。将其卸载给工人绝对是值得的。但是，如果您的应用程序不是那么复杂，并且只有某些工作是那么复杂，那么您可能会考虑将应用程序和工作分开。即使您将应用程序卸载给工作人员，如果有一个任务会杀死整个工作人员一段时间，您的整个应用程序、UI 和所有内容都会暂时无响应。当然，您可以滚动和单击，但角度，因为它与长时间运行的繁重同步任务位于同一线程上，所以没有机会响应。所以它几乎和都在 UI 线程上运行一样。

这就是为什么我相信您仍然可以为繁重的任务创建一个单独的 Worker。您还需要给 Angular 喘息的空间。

3. 您能否进行 UI 更新：取决于。

更长的解释

您还担心如何在 for 循环中更新内容。好吧，如果您有一个长时间运行的同步任务 - 那么您需要在该作业运行程序中的循环运行之间提供更新。

为什么？因为，如果您无法停止运行（同步内容），那么 Angular 将没有机会跳出您的代码（在 Web Worker 内）并向 UI 线程（以及 Angular 的 UI 部分）发布消息并更新 UI。或者，如果你有一个单独的工人工作，它根本不会告诉角度它已经走了多远。

因此，如果您的整个应用程序都在 Web Worker 中（与重载 CPU 逻辑一起），您可以例如每 100 次迭代，去更新一些本地可观察的或类似的，并将下一个循环运行设置为稍后在 setTimeout 中运行。它应该让 Angular 有机会将此可观察值的更新发送到 DOM 渲染器，而 DOM 渲染器又可以将更改通知给 UI 线程。

如果您的应用程序与实际的 CPU 密集型任务位于单独的工作线程中，那么您仍然需要每隔（例如 100 次迭代）向您的 Angular 应用程序发送此更新。

这样，您的 Angular 应用程序仍然具有响应能力，并且您仍然可以拥有一个服务来侦听来自该工作人员的作业进度更新并更新 UI。（同样，例如，每运行 100 个循环就会向工作线程的另一端发送一条消息）。例如，您只需在某处显示一个小旋转器，当用户单击时，它会显示任务的进度，并且用户可以使用应用程序的其他部分。

如果您提供有关密集型 CPU 任务的更多详细信息，也许有人可以提供更好的答案。我希望这至少能帮助澄清一点。