阅读 153
用JavaScript Web Workers提升你的Web应用性能

用JavaScript Web Workers提升你的Web应用性能

用JavaScript网络工作者提升你的网络应用性能

使用Web Worker来进行并行编程,并同时执行多个操作。

[

Tara Prasad Routray

](medium.com/@tararoutra…)

Tara Prasad Routray

关注

10月26日- 4分钟阅读

通过这篇文章,我将向你介绍网络工作者的情况,以及如何将它们整合到你的网络应用中。

网络工作者简介

JavaScript网络工作者允许开发人员执行并行编程,以帮助应用程序获得同时运行多个计算的能力。

这些网络工作者可以在后台线程中运行脚本,这些线程与主线程完全分开。正因为如此,大量的工作负载从主线程中得到了减少。这种工作负载分离的主要好处是,你可以在一个孤立的线程中执行CPU密集型操作,这不会中断或影响主线程的反应能力和可用性。当后台线程完成其任务时,它会通过一个事件立即将结果通知主线程,这个事件是通过vanilla JavaScript事件处理来管理的。

但是,这些网络工作者有一些限制,比如不能访问DOM,不能访问网络工作者的父页面(创建它的页面)。记住这一点,你现在可以继续学习如何创建网络工作者。

验证 Web Worker 支持

为了有更多可控的错误处理和向后兼容性,建议将您的网络工作者的代码包裹在以下检查中。这将有助于检测您的浏览器是否支持网络工作者。

if (window.Worker){    // Your web worker's code goes here}
复制代码

如今,几乎所有的浏览器都支持网络工作者。

创建 Web Worker

您可以通过创建一个新的 Worker 实例来创建一个 Web Worker。您必须提供脚本的路径,作为其参数,您希望该工作者执行该脚本。

const worker = new Worker('./worker-script.js');
复制代码

在上面的代码中,变量worker 成为一个Worker 实例,它将在worker-script.js 上执行脚本。

这个网络工作者现在可以在消息的帮助下与主线程和其他网络工作者通信。消息可以由任何可以被序列化和非序列化的东西组成。函数或HTML元素不能在消息中发送。但是,由数字、字符串、普通对象和普通数组组成的消息可以被发送。

创建Web工作者将产生真正的操作系统级线程,这将消耗系统资源。如果使用不当,会影响用户整个计算机的性能,而不仅仅是网络浏览器。

从主线程向 Worker 线程发送消息

一旦你创建了网络工作者,你就可以使用postMessage() 方法将其启动。

worker.postMessage(message);
复制代码

参考下面的代码片段,了解如何在你的项目中实现上述内容。

您可以通过实现onmessage() 事件处理程序在 Web Worker 中捕获该消息。请参考下面的代码片段,了解如何处理该消息。

从工作线程向主线程发送消息

您可以通过调用 Worker 脚本内的postMessage() 方法从 Web Worker 发送消息。请参考以下代码片段,了解如何将响应或消息发送回主线程。

回到主线程中,您可以将onmessage() 方法与 Worker 对象绑定,以监听从 Web Worker 发回的消息。请参考下面的代码片段,了解如何监听工作者的响应。

当消息在主线程和 Web Worker 之间传输时,它只是被复制或转移(移动),而不是共享。

终止 Web Worker

您可以直接从主线程或从工作者线程终止 Web Worker。在主线程中,您可以通过调用 Web Worker 的 API 的方法terminate() 来终止。

worker.terminate();
复制代码

您还可以从工作线程本身使用其close() 方法终止 Web 工作者。

close();
复制代码

terminate() 被触发时,Web Worker 会立即被终止,没有任何机会完成正在进行的或未完成的操作。此外,它也没有时间进行清理。因此,突然终止Web工作者会导致内存泄漏。同样,当close() 在Web工作者内部被触发时,事件循环中存在的任何排队任务都会被拒绝,并且Web工作者的范围会被关闭。

建议负责任地使用网络工作者,并在他们完成执行任务后停止他们。这有助于为客户计算机上的其他应用程序释放系统资源。

夸奖!你已经学会了如何创建 Web Worker,如何在两个线程之间有效地发送消息,以及如何响应这些消息的基本知识。我很高兴听到你在自己的项目中是如何使用这些网络工作者的。请在评论区告诉我。

如果你喜欢读这篇文章,并且学到了新的东西,那么请鼓掌,与你的朋友分享,并关注我,以获得我未来文章的更新。你可以在LinkedIn上与我联系。

文章分类
前端
文章标签