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

我看到了Jason Teplitz在Angular 2中写的关于使用web workers的两篇文章。Angular 4 CLI现在支持在工作线程中运行应用程序。这是一个很好的例子。或者这是一步一步的

使用平台工作者可以保证所有长时间的计算操作都在web工作者中运行吗？或者我应该创建另一个angular module（不是应用程序模块），它使用平台工作程序来运行长时间的计算操作？因此将有两个模块，一个用于应用程序，另一个用于长时间运行

我是否应该像这样创建单独的

工作线程来创建工作线程

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

---

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

是的，平台工作者将您的代码从UI线程中移除

更长的解释 使用平台工作者可以确保代码在web工作者中运行。Angular仍然需要在UI线程的“这边”运行一些代码，但是平台工作线程基本上将所有代码和逻辑移动到工作线程中，计算所有DOM调用，当时机成熟时，它会神奇地调用DOM。但这不是全景，所以让我们再考虑一下。

独立工人：取决于，但TL；医生：是的

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

如果你有繁重的应用程序（比如有许多绑定的巨大表，或者运行大量CPU繁重任务的许多组件），那可能会被认为是繁重的应用程序。把它卸给工人肯定是值得的。但是如果你的应用程序不是那么复杂，而且只有特定的工作，你可以考虑分开你的应用程序和你的工作。即使你将你的应用程序卸载给一个工作人员，如果有一个任务会让整个工作人员在一段时间内死亡，那么你的整个应用程序、UI和所有应用程序都会在一段时间内失去响应。当然，您可以滚动并单击，但由于它与长期运行的繁重同步任务位于同一线程上，因此没有机会做出响应。因此，它几乎与在UI线程上运行的情况相同

这就是为什么我相信你仍然可以为你繁重的工作创造一个独立的工人。你也需要给自己一个呼吸的地方

你能做UI更新吗：视情况而定

更长的解释 您还担心如何在for循环中更新内容。嗯，如果您有一个长期运行的同步任务，那么您需要在该作业运行器中循环运行之间提供更新

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

因此，如果您的整个应用程序都在web worker中（加上繁重的CPU逻辑），您可以（例如）每100次迭代，更新一些本地可观察或类似的内容，并将下一次循环运行设置为稍后在setTimeout中运行。它应该给Angular一个机会将这个可观察值的更新发送给DOM渲染器，而DOM渲染器反过来可以将更改通知UI线程

如果你的应用程序在一个单独的工作程序中，而不是在一个实际的CPU繁重的任务中，那么你仍然需要每100次迭代向你的应用程序发送一次更新

这样，您的Angular应用程序仍然能够响应，并且您仍然可以拥有一个服务，该服务可以侦听来自此工作人员的作业进度更新并更新UI。（同样，例如，每运行100次循环，就向工作线程的另一端发送一条消息）。例如，你只是在某个地方显示一个lil微调器，当用户单击时，它显示任务有多远，用户可以使用应用程序的其他部分

---

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

在JS中不必担心这一点。只需更新函数中的一个外部变量。我知道它很晚了，但其他人请遵循本文链接[。本文非常好，并解释了如何使用

平台webworkers

在worker线程中执行cpu密集型操作。有没有关于stackblitz的参考资料？