HTML5网络工作者Web Worker

本文概述

什么是网络工作者？
网络工作者的类型
Web Workers浏览器支持
创建Web Worker文件
创建Web Worker对象
在辅助线程和主线程之间发送消息
终止Web Worker
浏览器支持

Web Workers是独立的JavaScript代码, 它们在网页的后台运行而不影响用户界面。

什么是网络工作者？

每个人都希望一个网站或应用程序能够快速运行, 并且可以在不影响页面性能的情况下同时执行多项操作。但是, 有时在执行一些大操作时会遇到一些延迟响应或页面性能下降。因此, 可以使用Web Workers解决此问题。

Web Worker是一个多线程对象, 可以并行执行多个JavaScript, 而不会影响应用程序或网页的性能。

以下是Web Workers的一些关键功能：

网络工作者是线程化的JavaScript。
网络工作者是内核级的线程。
网络工作者需要更多的空间和CPU时间。
网络工作者提高了网站的速度。
网络工作者在客户端（而不是服务器端）执行代码。
Web worker线程使用postMessage()回调方法相互通信

提示：使用HTML Web Worker之前, 你必须具有JavaScript知识, 因为Web Worker依赖JavaScript。

网络工作者的类型

在HTML5中, Web Workers有两种类型：

专用的网络工作者：

专用工作者只能通过一个调用它的脚本来访问。专用工作线程结束, 其父线程结束。专用工人仅由一个或单个主线程使用。

共享的网络工作者：

它可以由多个脚本共享, 并且可以使用端口进行通信。共享的工作程序可以通过不同的窗口, iframe或工作程序访问。

注意：在本节中, 我们将使用专用的Web Worker。

Web Workers浏览器支持

在首先学习Web Workers之前, 我们需要检查浏览器支持。因此, 以下是检查你的浏览器是否支持的代码。

例

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker API</title>
</head>
<body>
<h2>Example to check the browser support of Web Workers</h2>
<div id="supported"></div>
<div id="unsupported"></div>
<button onclick="worker();">click me</button>
<script type="text/javascript">
   function worker() 
   {
    if(typeof(Worker)!=="undefined"){
     document.getElementById("supported").innerHTML="Supporting the browser";
      }
     else
      {
      document.getElementById("unsupported").innerHTML="Not supporting";}
   }
</script>
</body>
</html>

立即测试

创建Web Worker文件

要创建Web Worker文件, 我们需要创建一个外部JavaScript文件。

在这里, 我们创建了一个用于计算数字平方的网络工作者文件。并将其保存为名称“ worker.js”。

以下是worker.js文件的代码。

onmessage =function(event){
var num= event.data;
var sqr=num*num;
var result="";
for(var i=1;i<=sqr; i++)
{
result= "Sqaure result is:"+ " "+i;
}
postMessage(result);
}

创建Web Worker对象

在上面的“ worker.js”文件中, 我们为Web Worker创建了JS文件, 现在它需要调用HTML文件。要创建Web Worker对象, 你需要调用Worker()构造函数。

以下是调用和创建Web Worker对象的语法：

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

在辅助线程和主线程之间发送消息

Worker线程的所有通信均取决于postMessage()方法和onmessage事件处理程序。

终止Web Worker

如果要立即终止主线程中当前正在运行的工作程序, 则可以通过调用Web Worker的Terminate()方法来终止它。以下是Web Worker终止的语法：

worker.terminate();

也可以通过调用close()方法在工作线程中终止Web Worker。

例

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1{
      margin-left: 350px;
    }
  </style>
</head>
<body>
<!-- Sqaure Output Result -->
<div class="div1">
  <h2>Example of Web Worker</h2>
<label>Enter the number to find the square</label>
<br><input type="text" name="num" id="num"><br>
<br><button id="submit">Submit</button>
<button id="other">Wait</button>
<div id="text"></div>
</div>
<script type="text/javascript">

document.getElementById("other").onclick=function() {
  alert("Hey! Web Worker is working, and you can wait for the result.");
}

//Web-worker Code.....
  var worker= new Worker("worker.js");
  worker.onmessage= function(event){
  document.getElementById("text").innerText= event.data;}
  document.getElementById("submit").onclick= function(){
  var num= document.getElementById("num").value;
  worker.postMessage(num);
 }
</script>
<p><b>Note:Try to enter a big number, and then click on other button. The page will respond properly</b></p>
</body>
</html>

立即测试

Worker.js文件：

onmessage=function(event){
var num= event.data;
var sqr=num*num;
var result="";
for(var i=1;i<=sqr; i++)
{
result= "Sqaure result is:"+ " "+i;
}
postMessage(result);
}