针对HTML5的Web Worker使用攻略

2019-01-28 16:02:02于丽

  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,n∈N*),而javascript的常用实现为:

JavaScript Code复制内容到剪贴板
  1.      var fibonacci =function(n) {   
  2.     return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);    };   
  3. //fibonacci(36)  

  在chrome中用该方法进行39的fibonacci数列执行时间为19097毫秒 ,而要计算40的时候浏览器直接提示脚本忙了。

  由于javascript是单线程执行的,在求数列的过程中浏览器不能执行其它javascript脚本,UI渲染线程也会被挂起,从而导致浏览器进入僵死状态。使用web worker将数列的计算过程放入一个新线程里去执行将避免这种情况的出现。具体看例子:
 

JavaScript Code复制内容到剪贴板
  1. //fibonacci.js    var fibonacci =function(n) {   
  2.     return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);    };   
  3. onmessage =function(event) {        var n = parseInt(event.<span style="width: auto; height: auto; float: none;" id="16_nwp"><a style="text-decoration: none;" mpid="16" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1183%2Ehtml&urlid=0" id="16_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data</span></a></span>, 10);   
  4.     postMessage(fibonacci(n));    };