Html5 Worker

Html5 Worker

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。

1. 如何使用Worker

   • 主页面

     1. 通过在主页面的js中创建 Worker实例来创建新线程.
     2. 通过postMessage(data)启动线程，并传递参数。
     3. 通过onmessage(data)回调函数接收数据，并在页面呈现。
     4. 可通过 terminate() 方法终止线程,被终止的Worker对象不能被重启或重用。

     //主页面
     var worker = new Worker("js/worker.js"); //创建实例同时必须传入需要在新线程中执行的代码路径
     worker.postMessage(num);    //传递参数并启动线程
     worker.onmessage = function(event){     //线程结束之后回调
             console.log(event.data);
             document.getElementById("sum").innerHTML = event.data;
         }

   • worker.js页面
     
     1. 通过onmessage(data) 等待响应主页面的调用。
     2. 实现运算
     3. 将运算结果通过postMessage(data)发送回主页面，触发主页面onmessage回调
        
onmessage = function(event){ //响应主页面调用，并通过参数接收主页面传递的数据
var sum = fibonacci(event.data);
console.log(event);
postMessage(sum); //将运算结果发送至主页面，并触发回调
};


2. 检测可用性

   检测浏览器是否支持Worker

   if(typeof(Worker)!=="undefined"){
       //浏览器支持Worker
   }else{
       //浏览器不支持支持Worker
   }

3. 限制与支持

   • 限制
     
     1. Web Worker无法访问DOM节点；
     2. Web Worker无法访问全局变量或是全局函数；
     3. Web Worker无法调用alert()或者confirm之类的函数；
     4. Web Worker无法访问window、document之类的浏览器全局变量；
   • 支持
     
     1. 可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信
     2. 可以在worker中通过importScripts(url)加载另外的脚本文件
     3. 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
     4. 可以使用XMLHttpRequest来发送请求
     5. 可以访问navigator的部分属性

4. 案例

   1. fibonacci 计算
   2. 仿抢票系统