web workers_Web Workers JavaScript API简介

最新推荐文章于 2024-07-27 13:31:57 发布

cune1359

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量137

点赞数

文章标签： java js javascript python 小程序 ViewUI

Web Workers是一种JavaScript API，允许您在与主线程不同的线程中运行脚本 。当您不希望由于背景风格的脚本而妨碍主脚本的执行时，它可以派上用场。

几乎所有浏览器都支持 Web Workers API，有关更多详细信息，请参阅CanIUse docs 。在开始编写代码之前，让我们看一些可能要使用此API的场景，以便您可以了解我的背景风格脚本的含义。

假设有一个脚本可以提取和处理文件 。如果文件是相当大的，它会需要很长的时间来处理！这可能会使其他稍后执行的脚本停止执行。

但是，如果文件处理移至后台线程 （称为工作线程） ，则直到前一个线程结束后 ，其他事件才会被阻止。

再举一个例子，假设有一个大表格，排列在选项卡中 。它的脚本编写方式使一个选项卡中的控件更新会影响其他选项卡中的某些控件 。

如果其他选项卡的更新需要花费一些时间，则用户将无法不中断当前事件而继续使用当前选项卡 。这可能会使UI冻结，使用户感到沮丧。

由于用户在填写当前标签时不会看到其他标签，因此您可以在后台线程中更新其他标签的控件 。这样，用户可以继续使用他正在填写的当前选项卡，而不会因其他选项卡中控件的更新过程而阻止其任何脚本。

同样，如果您发现脚本可能阻止用户使用用户界面直到执行完毕的情况，则可以考虑将其移至工作线程，以便可以在后台执行。

Web Workers API可能是最简单的API之一。它具有非常简单的方法来创建工作线程并通过主脚本与其进行通信 。

工作线程的全局范围与主线程处于不同的上下文中。您无法在工作线程中访问window对象的方法和属性，例如alert() 。您也不能直接从工作线程更改DOM 。

但是，您可以在工作线程中使用window下的许多API，例如Promise和Fetch （请参阅完整列表）。

您还可以嵌套工作线程 ：从另一个工作线程创建的工作线程。由另一个人创造的工人称为子工人。

工人的种类也很多。主要的两个是敬业的和共享的工人 。

专用工作人员与他们的主线程所属的浏览上下文相同 。但是，共享工作器存在于与主脚本不同的浏览上下文中 （例如，在iframe中）。在这两种情况下，主脚本和工作线程必须位于同一域中 。

本教程中的示例将关于专用工作者 ，这是最常见的类型。

请参见下图，以快速概览构成Web Workers API 的所有主要方法 。

Worker()构造函数创建一个专用的工作线程并返回其引用对象 。然后，我们使用该对象与该特定工作人员进行通信。

在主脚本和工作脚本中都使用了postMessage()方法来相互发送数据 。然后， onmessage事件处理程序在另一侧接收已发送的数据。

terminate()方法终止主脚本中的工作线程 。此终止是立即的 ：任何当前执行的脚本和待处理的脚本都将被取消。 close()方法做同样的事情，但是由关闭自身的工作线程调用 。

现在，让我们看一些示例代码。 index.html页面将主脚本保存在<script>标记内，而工作脚本则保存在一个名为worker.jsJavaScript文件中。

<button>Click me</button>
<script>
<!-- main script goes here -->
</script>

我们首先从主脚本创建工作线程 。

w = new Worker('worker.js');

然后，为新创建的worker实例的onmessage事件添加一个事件处理程序，以从中接收数据 。 e事件的data属性将保存接收到的数据。

w = new Worker('worker.js');
w.onmessage = (e)=>{
  console.log(`Received from worker: ${e.data}`);
}

现在，我们使用postMessage()在单击按钮时将一些数据发送到工作线程 。 postMessage()方法可以接受两个参数。第一个可以是任何类型（字符串，数组等）。它是要发送到工作线程 （或当工作线程中存在该方法时， 发送到主脚本）的数据。

第二个可选参数是可以由工作线程使用的对象数组（但不能由主脚本使用，反之亦然）。这些对象称为可Transferable对象。

document.querySelector('button').onclick = ()=>{
  w.postMessage('john');
}

我只是向工作线程发送一个字符串值。

在工作线程中，我们需要添加一个onmessage事件处理程序，该事件处理程序将在单击按钮时接收由主脚本发送给它的数据 。在处理程序内部，我们将接收到的字符串与另一个字符串连接起来，然后将结果发送回主脚本。

console.info('worker created');
onmessage = (e)=>{
  postMessage(`Hi ${e.data}`);
}

与在主脚本中必须使用w引用对象来引用特定工作线程 （该脚本随后在其上使用onmessage和postMessage方法）不同， 在工作线程中无需在工作线程中使用引用对象指向主线程。

该代码的工作方式如下。当浏览器加载index.html ，一旦在主线程中执行worker()构造函数并创建一个新的worker，控制台就会显示"worker created"消息。

当你点击页面上的按钮，你会得到"Received from worker: Hi john"的消息在控制台中，这是被串联在发送给它的数据的工作线程 ，然后被送回串到主脚本 。

翻译自: https://www.hongkiat.com/blog/web-workers-javascript-api/

关注