HTML5 Web Workers

时间 2019-11-24

标签 html5 html web workers 栏目 HTML5 繁體版

原文原文链接

Web workers 是什么javascript

Web workers 是HTML5标准的一部分，这一规范定义了一套API，它容许一段JavaScript程序运行在主线程之外的另一个线程中。Web Workers 规范中定义了两类工做线程，分别是专用线程Dediacted worker 和共享线程 Shared Worker，其中, Dedicated Woker 只能为一个页面所使用，而Shared Worker 则能够被多个页面所共享，本文示例为专用线程Dedicated Worker.css

一个小例子html

下载地址：https://github.com/mdn/simple-web-workerhtml5

index.html
java

<!DOCTYPE html>
<html>
  <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>
  </body>
  <script src="main.js"></script>
</html>

main.jsgit

var first = document.querySelector('#number1');
var second = document.querySelector('#number2');

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

if (window.Worker) { // Check if Browser supports the Worker api.
    // Requries script name as input
    var myWorker = new Worker("worker.js");

// onkeyup could be used instead of onchange if you wanted to update the answer every time
// an entered value is changed, and you don't want to have to unfocus the field to update its .value

    first.onchange = function() {
      myWorker.postMessage([first.value,second.value]); // Sending message as an array to the worker
      console.log('Message posted to worker');
    };

    second.onchange = function() {
      myWorker.postMessage([first.value,second.value]);
      console.log('Message posted to worker');
    };

    myWorker.onmessage = function(e) {
        result.textContent = e.data;
        console.log('Message received from worker');
    };
}

worker.jsgithub

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

简单小结：web

Web主线程：ajax

1.经过 var worker = new worker(url)加载一个js文件来建立一个worker, 同时返回一个worker实例。chrome

2. 经过 worker.postMessage(data) 方法来向worker发送数据。

3. 绑定 worker.onmessage方法来接收worker发送过来的数据。

4. 能够使用 worker.terminate()来终止一个worker的执行。

worker新线程：

1. 绑定onmessage方法来接收主线程发送过来的数据。

2.经过postMessage(data)方法来向主线程发送数据。

3.能够使用self.close()来终止一个worker的执行。

API 进阶

关于 web workers，最重要的是要知道它执行的javascript代码彻底在另外一个做用域中，与当前网页中的代码不共享做用域。在web workers中，一样有一个全局对象(woker对象自己，this和self 引用的都是worker对象自己)和其余对象以及方法。

Web worker中的代码不能访问Dom.

在worker线程中，能够得到下列对象

1 .navigator对象

2. location对象，只读

3. XMLhtttpRequest独享

4. setTimeout/setInterval方法

5. Application Cache

6. 经过importScripts()方法加载其余脚本

7. 建立新的Web Worker

worker线程不能得到下列对象:

1. DOM对象

2. window对象

3. document对象

4. parent对象

上述的规范，限制了在worker线程中得到主线程页面相关对象的能力，因此在worker线程中，不能进行dom元素的更新。

Web workers带来了什么

1. Web workers 带来后台计算能力

Web workers 自身是由webkit多线程实现，但他并无为javascript语言带来多线程编程特性，咱们如今仍然不能在javascript代码中建立并管理一个线程，或者主动控制线程间的同步与锁等特性。

Web workers典型应用场景

既然Web workers 为浏览器端javascript带来了后台计算能力，咱们能够利用这一能力，将更新数据和对象状态的耗时部分交由Web workers执行，提高页面性能。

部分典型的应用场景以下：

1. 使用专用线程进行数学运算

Web workers 最简单的应用就是用来作后台计算，而这种计算并不会中断前台用户的操做。

2. 图像处理

经过使用<canvas>或者<video>元素中获取的数据，能够把图像分割成几个不一样的区域而且把它们推送给并行的不一样workers来作计算。

3. 大量数据的检索

但须要在调用ajax后处理大量的数据，若是处理这些数据所需的时间长短很是重要，能够在Web workers中来作这些，避免冻结UI线程。

4. 背景数据分析

因为在使用 Web Workers的时候，咱们有更多潜在的CPU可用时间，咱们如今能够考虑一下javascript中的新应用场景。

例如, 咱们能够想象在不影响UI体验的状况下实时处理用户输入。利用这样一种可能，咱们能够想象一个像word同样的应用：当用户打字时，后台在词典中进行查找，帮助用户自动纠错等等。

参考文章：

https://developer.mozilla.org/en-US/docs/Web/API/Worker

http://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/index.html

http://www.tools138.com/create/article/20151111/020119942.html