Web Workers

首先需要了解什么是线程：

线程：是程序执行流的最小单元，一个标准的线程，由线程ID，当前命令指针(PC)，寄存器和堆栈组成

什么是指针：

指针：指针是编程语言的一个对象，利用地址，他的值直接指向存在电脑存储器中另一个地方的值，由于通过地址能找到所需

的变量单元，可以说，地址指向该变量单元，因此，将地址形象化的成为指针

什么是堆栈：

堆栈：在计算机领域中，堆栈是一个不容忽视的概念，堆栈是两种数据结构，堆栈是一种数据项按序排列的数据结构，只能在

一段对数据项进行插入和删除

什么是I/O：

IO：输入/输出端口，每个设备都又一个专用的I/O接口，用来处理自己的输入信息

什么是Web Worker

当程序中有JS代码执行时间过长时，会影响UI的绘制，这个时候就可以创建一个新的线程帮助执行任务，而不影响UI的绘制，

以免导致用户的体验受到干扰。

Web Worker API

创建一个新的Worker对象，然后让该对象运行一个命名的JavaScript文件

注意：

Worker中不可以使用DOM，BOM

可以使用：

WebSockets,IndexedDB,FireFox OS专用Data Store API等数据存储机制

错误兼容

if(window.Worker){

文档内容..

}

创建一个Worker

var w = new Worker('worker.js');

Worker中的消息的发送和接收：

worker通过postMessage()和onmessage事件处理函数生效

主线程发送消息：

w.postMessage();

worker.js接收消息：

onmessage = function(e){   //消息本身为事件的data属性进行使用
var result = e.data * 2;
postMessage(result);      //使用postMessage()方法将结果传回给主线程 
}

主线程使用onmessage相应worker.js传回的消息

w.onmessage(e){
  result text = e.data;
  console.log("相应worker.js传回的消息");
}

实例：

实现累加和，通过Web Worker

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
   <input type="text" id="num">
   <button id="btn">计算累加和</button>
</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
var w = new Worker("worker.js");
var num = document.getElementById("num");
postMessage(num.value);
w.onmessage = function(e){
 var msg = document.getElementById("msg");
 msg.innerHTML = e.data;
}
}
</script>
</body>
</html>

worker.js

onmessage = function(e){
	var n = e.data;
	var sum = 0;
	n = parseInt(n);
	for(var i = 0 ; i <= n ; i++){
		sum += i;
	}
	postMessage(sum);
}

原理:使用worker使用多线程执行任务