网络工人进行救援 - 如何与JSON字符串合作而不阻止用户互动-DEV365 开发者社区

网络工作人员已经存在一段时间了。但是您的使用方式取决于您拥有的应用程序类型。您可能使用网络工作人员的一种方法是提高应用程序的性能。

由于JavaScript是单线线，并且具有事件循环执行模型，因此您不想编写阻止代码。这样做会给最终用户带来糟糕的经历，因为应用程序可能会冻结并且不响应任何投入。

在本教程中，我们将开发一个涉及JSON字符串的应用程序，并了解处理大字符串计算所涉及的挑战。为了使用户体验更好，我们将使用网络工人来平滑事物，而不会阻止用户互动。

这是我们将要介绍的内容：

The JavaScript Event Loop
What are Web Workers?
JSON tool - the application that parsers and validates JSON
Exploring the limitation of JSON computation without web workers
Implementing JSON computation with web workers
Testing an application that uses web workers
Wrapping up and where go next

JavaScript事件循环

JavaScript是一种流行的Web开发编程语言，不仅在浏览器中，而且在后端。

javaScript是单线读取的，这意味着它在单个线程上运行。但是，使用事件循环作为执行模型，它也可能是异步的。您可以在此谈话中了解有关事件循环的更多信息。

事件循环允许程序员在等待未来值的同时不阻止其执行代码。无论执行JavaScript的环境如何，无论是在浏览器还是服务器中执行。

在客户端执行的应用程序中，浏览器仍然缺乏以不阻止或没有破坏用户体验的方式执行重型计算任务的方法。

例如，Demian Renzulli和Andrew Guan通过game PROXX描绘了这种情况。他们分享了游戏的作者如何使用网络工人来计算游戏逻辑和从用户互动的角度来计算性能。 Surma详细说明了Proxx是如何在case-study fashion中建造的。

什么是网络工人？

Web工作人员是在2009年创建的，根据Caniuse.com，他们得到了现代浏览器的广泛支持。在他们的早期，拟议的网络工作人员是由W3C支持的一个工作组开发的。

在提案中，作者将网络工作者分为两个类别：为特定任务运行的网络工人（或在MDN Web文档中称为他们，专门的工人）和共享工人，可以在页面和页面上获得不同的页面可以连接到它们。在本教程中，我们将专注于敬业的工人。

网络工作者和服务人员之间有几个相似之处，我们应该提到：

他们只能从服务器运行 - 尝试从文件系统访问它们。
不允许访问文档对象模型（DOM）。

服务工作者用于处理离线用例和拦截请求。网络工作人员本来是通用计算的替代方案，因此您不会超载浏览器的主线程。

Demian Renzulli和Andrew Guan还专门献给section of their work来解释这些差异。

作为一个简单的类比，网络工人充当线程将以Java等编程语言作用。主线程通过新操作员启动Web Worker，将创建它，并等待执行任务。从那里，创建了主脚本和工人之间的关系。

这并不意味着从这里浏览器将自动卸载所有重型计算。开发商仍然有责任决定应委派哪些工作。让我们看看它如何与示例一起工作。

首先，我们定义将成为工人的脚本。后来，我们调用工人将脚本传递为构造函数中的第一个参数，例如：

const myWorker = new Worker('src/script.js');

启动工人的另一种方式是通过带有源代码的原始字符串，然后将其作为斑点传递。使用这种方法，您无需在单独的文件中声明该工人。

除此之外，还可以将标签脚本与类型“ JavaScript/Worker”一起使用，但是这两种方法均未在整个Internet的教程中广泛共享。绿色称这种方法为"inline worker"。

const code = 'any javascript code here';const myWorker = new Worker(URL.createObjectURL(new Blob([code])));

通过创建的工人，我们可以开始与之交流。与网络工作者的通信通过事件发生，就像文档对象模型中可用的任何其他应用程序编程接口一样。要对主线程中的任何事件做出反应，我们会收听消息事件。要与创建工人的父母交流，我们使用后母语。

以下示例取自web worker specification。它描述了听取工人计算的简单示例。

请注意，在随后的代码示例中，我们使用OnMessage。这是由于其API。使用消息将要求我们改用AddEventListener。

var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
}

然后，在index.html文件中：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>The highest prime number discovered so far is: <output id="result"></output></p>
  <script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
  </script>
 </body>
</html>

您也可以终止工人。这释放了分配在浏览器中的资源。终止工人意味着杀死其执行，并删除主线程与工人之间的通信。要确定它，需要再次创建工人。

有两种终止工人的方法：首先，可以从主线程调用。在此示例中，它是index.html中的脚本。您还可以从工人内部终止它（Stackoverflow具有一个question，可以潜入此主题）。

从主线程中，终止工人将是这样的：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>The highest prime number discovered so far is: <output id="result"></output></p>
  <script>
   var worker = new Worker('worker.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
     worker.terminate();
   };
  </script>
 </body>
</html>

从工人中，您不需要工人。终止，您可以直接致电。给父母的消息将被发布，然后工人将立即终止：

var n = 1;
search while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
  self.close();
}