HTML5WebWorker的使用.docVIP

　Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 　　一：如何使用Worker 　　Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。 　　那么如何使用呢，我们看一个例子： ? 1 2 3 4 5 //worker.js onmessage =function (evt){ ??var d = evt.data;//通过evt.data获得发送来的数据 ??postMessage( d );//将获取到的数据发送会主线程 } 　　HTML页面：test.html ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 !DOCTYPE HTML html head ?meta http-equiv=Content-Type content=text/html; charset=utf-8/ ?script type=text/javascript //WEB页主线程 var worker =new Worker(worker.js); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL ?worker.postMessage(hello world);???? //向worker发送数据 ?worker.onmessage =function(evt){???? //接收worker传过来的数据函数 ???console.log(evt.data);????????????? //输出worker发送来的数据 ?} ?/script ?/head ?body/body /html 　　用Chrome浏览器打开test.html后，控制台输出 ”hello world” 表示程序执行成功。 　　通过这个例子我们可以看出使用web worker主要分为以下几部分 　　WEB主线程: 　　1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。 　　2.通过worker.postMessage( data ) 方法来向worker发送数据。 　　3.绑定worker.onmessage方法来接收worker发送过来的数据。 　　4.可以使用 worker.terminate() 来终止一个worker的执行。 　　worker新线程： 　　1.通过postMessage( data ) 方法来向主线程发送数据。 　　2.绑定onmessage方法来接收主线程发送过来的数据。 　　二：Worker能做什么 　　知道了如何使用web worker ，那么它到底有什么用，可以帮我们解决那些问题呢。我们来看一个fibonacci数列的例子。 　　大家知道在数学上，fibonacci数列被以递归的方法定义：F0=0，F1=1，Fn=F(n-1)+F(n-2)（n=2，nN*），而javascript的常用实现为： ? 1 2 3 4 var fibonacci =function(n) { ????return n 2? n : arguments.callee(n -1) + arguments.callee(n -2); }; //fibonacci(36) 　　在chrome中用该方法进行39的fibonacci数列执行时间为19097毫秒 ，而要计算40的时候浏览器直接提示脚本忙了。 　　由于javascript是单线程执行的，在求数列的过程中浏览器不能执行其它javascript脚本，UI渲染线程也会被挂起，从而导致浏览器进入僵死状态。使用web worker将数列的计算过程放入一个新线程里去执行将避免这种情况的出现。具体看例子： ? 1 2 3 4 5 6 7 8 //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