Web worker简介：

HTML5定义了一种作为后台线程的WebWorker。 web worker是一个用来执行计算密集任务而不冻结用户界面的后台线程。

Web worker无法访问window对象和document对象，和主线程之间的通信也只能通过异步消息传递机制来实现。

Web worker 本身不是轻量级的线程，因而常见一些worker去处理次要的操作是不划算的

 

创建新的Worker：

var worker= new Worker("/assets/demo.js");

传递参数：

worker.postMessage("file.text");

接收消息：

worker.onmessage = function(e){   var message = e.data;   ......    }

Worker当然也支持addEventListener()方法和removeEventListener()方法，如果需要管理多个事件时可以使用哒

异常处理：

worker.onerror = function(e){  console.log("Error at " + e.filename + ":" +e.lineno + e.message );}

结束Worker

worker.terminate();

 

载入类和工具函数：

importScripts("utils/base64.js","utils/Map.js"....);

注意：importScripts是同步的方法，一旦importScripts方法返回就可以开始使用载入的脚本，不需要回调函数

案例：

            
                                     点击一下    

 

用到的js：

demo_workers.js

var i = 0;function timedCount() {    var c = 0;    for (i = 0; i < 1000000000; i++) {        //计算的代码        c = 100 + i;    }    postMessage(c);    // setTimeout("timedCount()",500);//等候时间 (单位是千分之一秒, millisecond)}timedCount();

2.cal.js

onmessage = function(e) {     var data = e.data;     var c = 0;     for (i = 0; i < data; i++) {         //计算的代码         c = data + i;     }     postMessage(c + "---") }

 

 结果：使用Web worker

 

 没使用Web worker

 

 

参考地址：