注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

创新改变世界

you changed the world

 
 
 

日志

 
 

js --- workers介绍(二)  

2011-11-16 10:47:34|  分类: win8 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Computing with JavaScript Web Workers

一点体会:

 

以前对于大计算量的应用为了使得界面不至于僵死,只有将任务分成子任务,用timeout 来分批运行 ,其根本原因是javascript本质是单线程的 ,集中时间大计算量的话会使得界面失去响应 ,更常用的是 将任务传到server端快速运行,利用xhr读取server端结果 。

 

09-09-01: 

setTimeout 方式只是相当于模拟了多线程,而不是真正的多线程,比如当今的多核处理器,真正的多线程可以利用运行在不同的core而真正并行执行加快运行效率,这种timeout模拟的方式就不行了哦,只能在一个core运行的。


如今最新的浏览器 firefox 3.5 为我们提供了新的计算方式:


Worker ,后台运行的一段javascript ,突破了javascript的单线程模式,但是worker不可以动用界面操作,同java swing类似,界面操作仍然要单线程,worker 通过消息传递,将结果传给主线程,只有主线程才能进行界面操作,实现UI和处理线程分离。


举个例子:

 

两个文件 : html ,javascript(worker.js) 。由html中javascript 传递消息给worker


调用端:

 

Html代码  收藏代码
  1. <h1>请用 firefox 3.5 运行</h1>  
  2.   
  3.   
  4. <p>由于 javascript 的单线程特性,以前计算量很大的话就要放在server端运行,利用xhr回调取的结果,  
  5.     <br/><br/>  
  6.     现在也可以在client 后台运行了 ,界面不会僵死,但是 worker 不能进行界面dom操作,界面操作单线程保证  
  7.     <br/>  
  8.     </p>  
  9.   
  10. <button id="test" > 后台worker运行 </button>  
  11.   
  12. <button id="test2" > 当前线程运行 </button>  
  13.   
  14. <div id="status" style="border:1px green solid;margin:10px;height:100px;color:red;">  
  15. </div>  
  16. <script type="text/javascript">  
  17.     //将要后台运行的一段代码  
  18. var worker = new Worker("worker.js");  
  19.   
  20. //后台worker返回的结果  
  21. worker.onmessage = function(ev){  
  22.       
  23.     document.getElementById("status").innerHTML="后台worker计算完毕:结果:<br />" +ev.data;  
  24. }  
  25.   
  26. document.getElementById("test").onclick=function(){  
  27.     alert("后台worker将要进行 1 ~ 1000000000 的遍历 ,但是界面不会僵死,点确定后等一会后台worker会返回信息");  
  28.     document.getElementById("status").innerHTML="后台worker计算中 .....";  
  29.     //将消息发给后台计算,主界面仍然可以操作,不会僵死  
  30.     worker.postMessage(1);  
  31. };  
  32.   
  33. document.getElementById("test2").onclick=function(){  
  34.     document.getElementById("status").innerHTML="";  
  35.     alert("当前线程运行将要进行 1 ~ 1000000000 的遍历 ,点确定后,界面将要僵死");  
  36.     for(var i=0;i<1000000000;i++);  
  37.     document.getElementById("status").innerHTML="当前线程 计算完毕:结果:<br /> 2";;  
  38. };  
  39. </script>  
 

后台 worker.js :

 

Js代码  收藏代码
  1. //得到主线程传过的消息  
  2. onmessage = function(ev){  
  3.   for(var i=0;i<1000000000;i++);  
  4.   //将结果传递给主线程,注意不可以进行界面操作,不可以访问主线程页面数据,只能访问消息数据  
  5.   postMessage( "来自 worker " + (parseInt(ev.data)+1) );  
  6. };  

 

 

 

09-09-01:

上面所说的 xhr 实际上就是 web worker ,只不过它具有不同的特定任务的socket API (from even faster websites)

  评论这张
 
阅读(84)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017