HTML5 Web Workers

2025年3月25日 | 阅读 4 分钟

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

什么是 Web Worker？

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

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

以下是 Web Workers 的一些主要特点：

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

提示：在开始使用 HTML Web Workers 之前，您必须了解 JavaScript，因为 Web Worker 依赖于 JavaScript。

Web Workers 的类型

HTML5 Web Workers 有两种类型：

专用 Web Workers

专用 Worker 只能被调用它的一个脚本访问。当其父线程结束时，专用 Worker 线程也随之结束。专用 Worker 仅由一个主线程使用。

共享 Web Workers

它可以被多个脚本共享，并可以使用端口进行通信。共享 Worker 可以被不同的窗口、iframe 或 Worker 访问。

注意：在本节中，我们将使用专用 Web Workers。

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 文件。

我们在这里创建了一个用于计算数字平方的 Web Worker 文件。并将其保存为“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 对象的语法：

在 Worker 线程和主线程之间发送消息

Worker 线程的所有通信都依赖于 **postMessage()** 方法和 **onmessage** 事件处理程序。

终止 Web Worker

如果您想在主线程中立即终止当前正在运行的 Worker，可以通过调用 Web Worker 的 terminate() 方法来终止。以下是 Web Worker 终止的语法。

Worker 线程也可以通过调用 **close()** 方法来终止 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 线程之间发送消息。
worker.postMessage(num); 这是用于在 Worker 线程和主线程之间通信的方法。使用此方法，Worker 线程将结果返回给主线程。