HTML5网络工作者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);
}

示例说明:

在上面的HTML文件示例中, 我们使用了

  • var worker = new Worker(“ worker.js”);创建Web Worker对象。
  • worker.onmessage = function(event):用于在主线程和辅助线程之间发送消息。
  • worker.postMessage(num);这是用于在Worker线程和主线程之间进行通信的方法。使用此方法, 工作线程将结果返回到主线程。

浏览器支持

API Chrome IE Firefox Opera Safari
Web Workers Yes Yes Yes Yes Yes
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?