Web Worker

什么是Web Worker？

• Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象，worker可以让他所包含的js代码运行在后台

• 特点

  • 充分利用多核CPU的优势
  • 对多线程支持非常好
  • 不会影响页面的性能
  • 不能访问web页面(BOM)和DOM API
  • 分为：BOM+DOM+ECMAScript
  • 所有的主流浏览器均支持web worker,除了Internet Explorer

• Worker提供API

  • 检测当前浏览器是否支持Worker
    typeof(Worker) !== "undefined"
  • 创建Worker文件
    创建普通的js文件，都可以用于Web Worer文件
  • 创建Web Worker对象
    var worker = new Worker("myTime.js");
    参数就是第二步创建的js文件的路径
  • worker事件
    • onmessage事件

用于监听 Web Worker 传递消息，通过回调函数接收传递的消息，通过回调函数的事件对象data 属性可以获取传递的消息

      - postMessage()事件

w.postMessage( “worker success.” );通过postMessage()方法传递消息内容

    -  w.terminate()事件

在HTML页面中，通过调用 Web Worker 对象的terminate( ) 方法终止 Web Worker。

##### 实例一
- 使用worker实现定时器
  - HTML文件


        
      
      
        
        
      
      
        
        开始计时
        结束计时
        
        

        
        

        
      
    
      
    
      


 - Worker文件

var time=0;
function timer () {
time++;
//4.从worker中发送数据,work对应js文件中的全局变量，是work对象
postMessage(time);
setTimeout(timer,1000);
console.log(time);
}
timer();

##### 实例二
- worker模拟售票系统
   - HTML文件

    
    


    
    
售票系统
    
售票窗口1
    
售票窗口2
    
售票窗口3
    
售票窗口4
    
售票窗口5
    
    抢票
    

 
  - Worker文件

var rand=Math.floor(Math.random()*100);
if(rand<10){
//返回数据
postMessage(1);
// console.log(1);
}else{
postMessage(0);
// console.log(0);
}