Java教程

【JavaScript】Web Worker

本文主要是介绍【JavaScript】Web Worker，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。

创建 Worker 对象

let worker = new Worker(jsUrl, options);

第一个参数是一个 JavaScript文件URL —— 这个文件包含了将在 worker 线程中运行的代码。

第二个参数是配置对象，可选——它的一个作用是指定 Worker 的名称，用来区分多个 Worker 线程。

var myWorker = new Worker('worker.js', { name : 'myWorker' });

worker 将运行在与当前 window 不同的另一个全局上下文中，这个上下文由一个对象表示，标准情况下为DedicatedWorkerGlobalScope（标准 workers 由单个脚本使用; 共享workers使用 SharedWorkerGlobalScope）

注：你不能直接在 worker 线程中操纵 DOM 元素；或使用 window 对象中的某些方法和属性。大部分 window 对象的方法和属性是可以使用的。

数据通信

主线程和 worker 线程相互之间使用 postMessage() 方法来发送信息, 并且通过 onmessage 这个 event handler来接收信息（传递的信息包含在 Message 这个事件的data属性内) 。

数据的交互方式为传递副本，而不是直接共享数据。

终止 Worker 对象

当 web worker 对象被创建时，它会继续监听消息（即使在外部脚本完成之后）直到它被终止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

worker.terminate();

其他 API

主线程中 Worker 对象的属性和方法如下：

  • Worker.onerror：指定 error 事件的监听函数。
  • Worker.onmessage：指定 message 事件的监听函数，发送过来的数据在Event.data属性中。
  • Worker.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
  • Worker.postMessage()：向 Worker 线程发送消息。
  • Worker.terminate()：立即终止 Worker 线程。

Worker 线程中一些自己的全局属性和方法：

  • self.name： Worker 的名字。该属性只读，由构造函数指定。
  • self.onmessage：指定message事件的监听函数。
  • self.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
  • self.close()：关闭 Worker 线程。
  • self.postMessage()：向产生这个 Worker 线程发送消息。
  • self.importScripts()：加载 JS 脚本。

举例

以下例子来自 MDN

该举例为在后台执行两个数相乘。

注：通常 web worker 不用于这种简单的脚本，而是用于 CPU 密集型任务。例如轮询服务器状态、计算密集型任务等。

  1. 创建 worker 线程执行的 js

监听主线程，接收两个数，返回处理结果：

onmessage = function(e) {
  console.log('Worker: Message received from main script');
  const result = e.data[0] * e.data[1];
  if (isNaN(result)) {
    postMessage('Please write two numbers');
  } else {
    const workerResult = 'Result: ' + result;
    console.log('Worker: Posting message back to main script');
    postMessage(workerResult);
  }
}
  1. 主线程中创建 worker 对象并通信：
const first = document.querySelector('#number1');  
const second = document.querySelector('#number2'); 

const result = document.querySelector('.result'); 

if (window.Worker) { //检查用户的浏览器是否支持worker
  const myWorker = new Worker("worker.js"); //创建 worker 对象

  first.onchange = function() { 
    myWorker.postMessage([first.value, second.value]); //向 Worker 线程发送信息
    console.log('Message posted to worker');
  }

  second.onchange = function() {
    myWorker.postMessage([first.value, second.value]); //向 Worker 线程发送信息
    console.log('Message posted to worker');
  }

  myWorker.onmessage = function(e) { //监听 Worker 线程的信息
    result.textContent = e.data;
    console.log('Message received from worker');
  }
} else {
  console.log('Your browser doesn\'t support web workers.');
}

HTML 页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Web Workers basic example</title>

    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>Web<br>Workers<br>basic<br>example</h1>

    <div class="controls" tabindex="0">
      <form>
        <div>
          <label for="number1">Multiply number 1: </label>
          <input type="text" id="number1" value="0">
        </div>
        <div>
          <label for="number2">Multiply number 2: </label>
          <input type="text" id="number2" value="0">
        </div>
      </form>

      <p class="result">Result: 0</p>
    </div>
    <script src="main.js"></script>
  </body>
</html>
这篇关于【JavaScript】Web Worker的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航