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對象自己)和其餘對象以及方法。