Web Worker特点
1、利用多核CPU
2、对多线程支持较好
注意：
不能访问HTML页面，不能使用DOM
主流浏览器基本都支持，除了IE
如何使用Web Worker
 
1、创建Worker文件—就是js文件
 
2、判断当前浏览器是否支持Worker
 
if(typeof(Worker)!=="undefined"){
 
//说明当前浏览器支持Worker
 
}else{
 
//说明当前浏览器不支持Worker，可以给出说明提示
 
}
 
 
3、创建Worker对象—new Worker(worker文件路径)
 

 
小案例：使用worker实现计时器功能
 
HTML文件：
 
<!DOCTYPE html>
 <html>
  <head>
   <title>Worker的使用入门</title>
   <meta charset="utf-8"/>
  </head>
  <body>
   <button id="start">开始计时</button>
   <button id="stop">结束计时</button>
   <div id="showtime"></div>
   <script>
// 1. 判断当前浏览器是否支持Web Worker
if(typeof(Worker) !== "undefined"){
/*
* 2. 创建Worker对象
*  new Worker(Worker文件的路径)
*/
var worker = new Worker("worker1.js");
/*
* 3. 通过Worker对象绑定事件
*  onmessage事件 - 用于监听Worker文件
*  * 该事件的处理函数接收参数
*    * Worker文件通过postMessage()方法传递的消息,可以通过该事件的处理函数的参数进行接收
*/
worker.onmessage = function(message){
// 用于接收Worker文件传递的消息
console.log(message.data);
}
}else{
// 给出相关提示信息
}
/*
* 注意：chrome浏览器在新版本中不再允许读取本地文件
*/
   </script>
  </body>
 </html> 

 
worker文件：
 
var time = 0;
 function showTime(){
time++;
// Worker对象的postMessage()方法,传递消息
postMessage(time);
 }
 showTime(); 

 
4、worker的方法与事件
 
方法
 
postMessage()—用于向Worker对象传递消息
 
terminate()—用于终止Worker的运行
 
事件：
 
onMessage—监听Worker文件
 
当postMessage()方法被触发时，onMessage就被调用
 
同时，创建Worker对象时，必须同时绑定onMessage事件
 

 
小案例：使用worker模仿售票系统
 
<!DOCTYPE html>
 <html>
  <head>
   <title>使用Worker模拟售票系统</title>
   <meta charset="utf-8"/>
   <style>
div {
width : 150px;
height : 150px;
border : solid 1px black;
float : left;
margin-right : 10px;
}
   </style>
  </head>
  <body>
   <!-- 模拟售票窗口 -->
   <div id="window0"></div>
   <div id="window1"></div>
   <div id="window2"></div>
   <div id="window3"></div>
   <div id="window4"></div>
   <!--
需求 - 点击"开始抢票"按钮
* 有票 - 将对应的div的背景颜色改为绿色
* 无票 - 将对应的div的背景颜色改为红色
   -->
   <button id="start">开始抢票</button>
   <script>
var btn = document.getElementById("start");
var workers = [];//0-4
btn.onclick = function(){
// 开始抢票 - worker
if(typeof(Worker) !== "undefined"){
for(var i=0;i<5;i++){
// 创建worker对象
var worker = new Worker("worker.js");
// 绑定onmessage事件
worker.onmessage = myMessage;
// 将创建的worker对象放置在数组中
workers[workers.length] = worker;
}
}
}
/*
* onmessage事件的处理函数形参(event)
* * 通过形参获取postMessage()方法传递的消息
*/
function myMessage(e){
// 获取worker对象对应的角标
var index = workers.indexOf(e.target);
// 获取div对应worker对象 - div的i和worker的i
var div = document.getElementById("window"+index);
if(e.data == "1"){
// 有票
div.style.background = "green";
}else{
// 无票
div.style.background = "red";
}
}
/*
* 分析逻辑
* * 具有5个售票窗口
*   * 同时开始抢票 - 逻辑相同
* * 结果
*   * worker文件只需要创建一个
*     * 完成抢票逻辑
*   * 需要创建5个worker对象
*/
   </script>
  </body>
 </html> 

 
worker.js文件：
 
/*
  * Worker文件 - 完成抢票逻辑
  * * 10%概率可以抢到票
  */
 // 生成一个 0-100 之间的一个整数
 var rand = Math.floor(Math.random()*100);
 // 0-99之间,判断概率是10%
 if(rand < 50){
// 有票
postMessage(1);
 }else{
// 无票
postMessage(0);
 }