一个web worker是在后台运行的JavaScript，不会影响页面的性能。
什么是Web Worker ？
当在HTML页面中执行脚本，直到脚本完成的页面不响应。
网络工作者，由万维网联盟（W3C）和Web超文本应用技术工作组（WHATWG）定义，是从在后台运行，独立于其他用户界面脚本，HTML页面中执行一个JavaScript脚本也可能是从同一个HTML页面执行。 网络工作者往往能够更有效地利用多核CPU。
概观
正如预想由WHATWG，网络工作者是比较重的重量。 他们预计寿命长，具有较高的启动性能成本，以及高每个实例存储成本。
网站工作人员并不打算或期望大量使用，因为他们可以养猪的系统资源。
网络工作者允许在后台运行更多的JavaScript线程浏览器线程的并发执行和一个或。 随后执行的单个线程的浏览器将不得不等待JavaScript程序来完成，然后再继续执行，这可能需要，程序员可能想从用户隐藏显著时间。
它允许浏览器继续正常操作在后台运行的脚本时。 所述网络工作者规格从HTML5规范作为单独的规范，并且可以与HTML5使用。
有两种类型的网络工作者的：专用和共享的工人。
当网络工作者在后台运行，他们没有对DOM的直接访问，但通过消息传递文档通信。 这使得JavaScript程序的多线程执行。
浏览器支持
在表中的数字指定第一个浏览器版本完全支持Web Workers 。
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4 | 10.0 | 3.5 | 4 | 11.5 |
HTML Web Workers实例
下面的例子创建了一个简单的web worker在后台计算的数字：
检查Web Worker支持
在创建之前web worker ，检查用户的浏览器是否支持它：
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
创建一个Web Worker文件
现在，让我们创造我们的web worker在一个外部JavaScript。
在这里，我们创建了一个计算脚本。 该脚本存储在"/html/demo_workers.js"文件：
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
上面的代码的重要的部分是postMessage()方法-它是用来发布消息返回到HTML页面。
Note:通常情况下web workers不用于这种简单的脚本，但对于更多的CPU密集型任务。
创建一个Web Worker对象
现在我们有了web worker文件，我们需要从一个HTML页面调用它。
下面的几行检查，如果web worker已经存在，如果没有-它会创建一个新的web worker的对象并运行代码"/html/demo_workers.js" ：
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
然后我们可以发送和接收消息的web worker 。
一个加入"onmessage"事件监听到web worker 。
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
当web worker发布消息，事件侦听器内的代码被执行。 从数据web worker存储在event.data。
终止Web Worker
当一个web worker对象被创建，它将继续侦听消息(even after the external script is finished) ，直到它被终止。
要终止web worker ，以及免费的浏览器/计算机资源，使用terminate()方法：
w.terminate();
重用Web Worker
如果您在设置web worker变量定义，它已经终止后，您可以重用的代码：
w = undefined;
全Web Worker示例代码
我们已经看到了Web Worker代码.js文件。 下面是HTML页面的代码：
例
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> 试一试» Web Workers和DOM
由于web workers是在外部文件中，他们没有访问的JavaScript对象：
- 窗口对象
- 文档对象
- 父对象