Web Worker API

Web Worker 是在后台运行的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

在 HTML 页面中执行脚本时，页面在脚本完成之前是无响应的。

Web Worker 是在后台运行的 JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续做任何你想做的事情：点击、选取内容等，同时 web worker 在后台运行。

浏览器支持

表中的数字注明了完全支持 Web Workers 的首个浏览器版本：

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
2010 年 1 月 2012 年 9 月 2009 年 6 月 2009 年 6 月 2011 年 6 月

Web Worker 实例

下面的例子创建了一个简单的 Web Worker，它在后台计算数字：

Example

计数：

Probeer het zelf

检查 Web Worker 浏览器

在创建 web worker 之前，请检查用户的浏览器是否支持它：

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

创建 Web Worker 文件

Now, let's create our Web Worker in the external JavaScript.

Here, we create an important script. This script is stored in the "demo_workers.js" file:

let i = 0;
function timedCount() {
  i ++;
  postMessage(i);
  setTimeout("timedCount()",500);
}
timedCount();

The important part of the above code is postMessage() Method - Used to send messages back to the HTML page.

Note:Web workers are usually not used for such simple scripts but for CPU-intensive tasks.

Create Web Worker object

Now that we have the web worker file, we need to call it from the HTML page.

The following code line checks if the worker exists, and if it does not, it creates a new web worker object and runs the code in "demo_workers.js":

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

Then we can send and receive messages from the web worker.

Add an "onmessage" event listener to the web worker.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

When the Web Worker publishes a message, the code in the event listener is executed. Data from the Web Worker is stored in event.data.

Terminate Web Worker

When the web worker object is created, it continues to listen for messages (even after the external script is completed) until it is terminated.

To terminate a web worker and release browser/computer resources, use terminate() Method:

w.terminate();

Reuse Web Worker

If the worker variable is set to undefined, you can reuse the following code after it terminates:

w = undefined;

Complete Web Worker example code

We have seen the Worker code in the .js file. Below is the code for the HTML page:

Example

<!DOCTYPE html>
<html>
<body>
<p>Tell numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Probeer het zelf

Web Worker en DOM

Omdat Web Worker zich bevindt in een extern bestand, kunnen ze de volgende JavaScript objecten niet bereiken:

  • window Object
  • document Object
  • parent Object