| //fibonacci.js var fibonacci =function(n) { return n <2? n : arguments.callee(n -1) + arguments.callee(n -2); }; onmessage =function(event) { var n = parseInt(event.data, 10); postMessage(fibonacci(n)); }; |
HTML页面：fibonacci.html
| <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>web worker fibonacci</title> <script type="text/javascript"> onload =function(){ var worker =new Worker('fibonacci.js'); worker.addEventListener('message', function(event) { var timer2 = (new Date()).valueOf(); console.log( '结果：'+event.data, '时间:'+ timer2, '用时：'+ ( timer2 - timer ) ); }, false); var timer = (new Date()).valueOf(); console.log('开始计算：40','时间:'+ timer ); setTimeout(function(){ console.log('定时器函数在计算数列时执行了', '时间:'+ (new Date()).valueOf() ); },1000); worker.postMessage(40); console.log('我在计算数列的时候执行了', '时间:'+ (new Date()).valueOf() ); } </script> </head> <body> </body> </html> |
在Chrome中打开fibonacci.html，控制台得到如下输出：
开始计算：40 时间:1316508212705
我在计算数列的时候执行了 时间:1316508212734
定时器函数在计算数列时执行了 时间:1316508213735
结果：102334155 时间:1316508262820 用时：50115
这个例子说明在worker中执行的fibonacci数列的计算并不会影响到主线程的代码执行，完全在自己独立的线程中计算，只是在计算完成之后将结果发回主线程。
利用web worker我们可以在前端执行一些复杂的大量运算而不会影响页面的展示，并且不会弹出恶心的脚本正忙提示。
下面这个例子使用了web worker来计算场景中的像素，场景打开时是一片一片进行绘制的，一个worker只计算一块像素值。
三：Worker的其他尝试
我们已经知道Worker通过接收一个URL来创建一个worker，那么我们是否可以利用web worker来做一些类似jsonp的请求呢，大家知道jsonp是通过插入script标签来加载json数据的，而script元素在加载和执行过程中都是阻塞式的，如果能利用web worker实现异步加载将会非常不错。
下面这个例子将通过 web worker、jsonp、ajax三种不同的方式来加载一个169.42KB大小的JSON数据
| // /aj/webWorker/core.js function $E(id) { return document.getElementById(id); } onload =function() { //通过web worker加载 $E('workerLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face2'; var d = (new Date()).valueOf(); var worker =new Worker(url); worker.onmessage =function(obj) { console.log('web worker: '+ ((new Date()).valueOf() - d)); }; }; //通过jsonp加载 $E('jsonpLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face1'; var d = (new Date()).valueOf(); STK.core.io.scriptLoader({ method:'post', url : url, onComplete : function() { console.log('jsonp: '+ ((new Date()).valueOf() - d)); } }); }; //通过ajax加载 $E('ajaxLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face'; var d = (new Date()).valueOf(); STK.core.io.ajax({ url : url, onComplete : function(json) { console.log('ajax: '+ ((new Date()).valueOf() - d)); } }); }; }; |
