对于HTML5的Web Worker应用功略

日期:2021-02-24 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

Web Workers 是 HTML5 出示的1个javascript线程同步处理计划方案,大家能够将1些大测算量的编码交由web Worker运作而不冻洁客户页面。
1:怎样应用Worker

  Web Worker的基础基本原理便是在当今javascript的主进程中,应用Worker类载入1个javascript文档来开拓1个新的进程,起到互不堵塞实行的实际效果,而且出示主进程和新进程之间数据信息互换的插口:postMessage,onmessage。

  那末怎样应用呢,大家看1个事例:
 

JavaScript Code拷贝內容到剪贴板
  1. //worker.js   
  2. onmessage =function (evt){   
  3.   var d = evt.data;//根据evt.data得到推送来的数据信息   
  4.   postMessage( d );//将获得到的数据信息推送会主进程   
  5. }  

  HTML网页页面:test.html

 

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <<span style="width: auto; height: auto; float: none;" id="20_nwp"><a style="text-decoration: none;" mpid="20" 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=head&k0=head&kdi0=0&luki=6&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="20_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>>  
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf⑻"/>  
  5.  <script type="text/<span style="width: auto; height: auto; float: none;" id="21_nwp"><a style="text-decoration: none;" mpid="21" 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=javascript&k0=javascript&kdi0=0&luki=9&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="21_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">javascript</span></a></span>">  
  6. //WEB页主进程   
  7. var worker =new Worker("worker.js"); //建立1个Worker目标并向它传送将在新进程中实行的脚本制作的URL   
  8.  worker.postMessage("hello world");     //向worker推送数据信息   
  9.  worker.onmessage =function(evt){     //接受worker传过来的数据信息<span style="width: auto; height: auto; float: none;" id="22_nwp"><a style="text-decoration: none;" mpid="22" 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=%BA%AF%CA%FD&k0=%BA%AF%CA%FD&kdi0=0&luki=2&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="22_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">涵数</span></a></span>  
  10.    console.log(evt.<span style="width: auto; height: auto; float: none;" id="23_nwp"><a style="text-decoration: none;" mpid="23" 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="23_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data</span></a></span>);              //輸出worker推送来的数据信息   
  11.  }   
  12.  </script>  
  13.  </head>  
  14.  <body></body>  
  15. </html>  

  用Chrome访问器开启test.html后,操纵台輸出 ”hello world” 表明程序流程实行取得成功。

  根据这个事例大家能够看出应用web worker关键分成下列几一部分

  WEB主进程:

  1.根据 worker = new Worker( url ) 载入1个JS文档来建立1个worker,另外回到1个worker案例。

  2.根据worker.postMessage( data ) 方式来向worker推送数据信息。

  3.关联worker.onmessage方式来接受worker推送过来的数据信息。

  4.可使用 worker.terminate() 来停止1个worker的实行。

  worker新进程:

  1.根据postMessage( data ) 方式来向主进程推送数据信息。

  2.关联onmessage方式来接受主进程推送过来的数据信息。
  2:Worker能做甚么

  了解了怎样应用web worker ,那末它究竟有甚么用,能够帮大家处理那些难题呢。大家看来1个fibonacci数列的事例。

  大伙儿了解在数学课上,fibonacci数列被以递归的方式界定:F0=0,F1=1,Fn=F(n⑴)+F(n⑵)(n>=2,n∈N*),而javascript的常见完成为:

JavaScript Code拷贝內容到剪贴板
  1.     
  2. var fibonacci =function(n) {   
  3.     return n <2? n : arguments.callee(n ⑴) + arguments.callee(n ⑵);   
  4. };   
  5. //fibonacci(36)  

  在chrome选用该方式开展39的fibonacci数列实行時间为19097毫秒 ,而要测算40的情况下访问器立即提醒脚本制作忙了。

  因为javascript是单进程实行的,在求数列的全过程中访问器不可以实行其它javascript脚本制作,UI3D渲染进程也会被脱机,从而致使访问器进到僵死情况。应用web worker将数列的测算全过程放入1个新进程里去实行将防止这类状况的出現。实际看事例:
 

JavaScript Code拷贝內容到剪贴板
  1. //fibonacci.js   
  2. var fibonacci =function(n) {   
  3.     return n <2? n : arguments.callee(n ⑴) + arguments.callee(n ⑵);   
  4. };   
  5. onmessage =function(event) {   
  6.     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);   
  7.     postMessage(fibonacci(n));   
  8. };  

  HTML网页页面:fibonacci.html
 

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <<span style="width: auto; height: auto; float: none;" id="11_nwp"><a style="text-decoration: none;" mpid="11" 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=head&k0=head&kdi0=0&luki=6&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="11_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf⑻"/>  
  5. <title>web worker fibonacci</title>  
  6. <script type="text/<span style="width: auto; height: auto; float: none;" id="12_nwp"><a style="text-decoration: none;" mpid="12" 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=javascript&k0=javascript&kdi0=0&luki=9&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="12_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">javascript</span></a></span>">  
  7.   onload =function(){   
  8.       var worker =new Worker('fibonacci.js');     
  9.       worker.addEventListener('message', function(event) {   
  10.         var timer2 = (new Date()).valueOf();   
  11.            console.log( '結果:'+event.<span style="width: auto; height: auto; float: none;" id="13_nwp"><a style="text-decoration: none;" mpid="13" 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="13_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data</span></a></span>, '時间:'+ timer2, '用时:'+ ( timer2  - timer ) );   
  12.       }, false);   
  13.       var timer = (new Date()).valueOf();   
  14.       console.log('刚开始测算:40','時间:'+ timer );   
  15.       setTimeout(function(){   
  16.           console.log('定时执行器<span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" 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=%BA%AF%CA%FD&k0=%BA%AF%CA%FD&kdi0=0&luki=2&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="14_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">涵数</span></a></span>在测算数列时实行了', '時间:'+ (new Date()).valueOf() );   
  17.       },1000);   
  18.       worker.postMessage(40);   
  19.       console.log('我在测算数列的情况下实行了', '時间:'+ (new Date()).valueOf() );   
  20.   }     
  21.   </script>  
  22. </<span style="width: auto; height: auto; float: none;" id="15_nwp"><a style="text-decoration: none;" mpid="15" 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=head&k0=head&kdi0=0&luki=6&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="15_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>>  
  23. <body>  
  24. </body>  
  25. </html>  

  在Chrome中开启fibonacci.html,操纵台获得以下輸出:
 
刚开始测算:40 時间:05
我在测算数列的情况下实行了 時间:34
定时执行器

XML/HTML Code拷贝內容到剪贴板
  1. <span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" 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=%BA%AF%CA%FD&k0=%BA%AF%CA%FD&kdi0=0&luki=2&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="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">涵数</span></a></span>  

在测算数列时实行了 時间:35
結果:102334155 時间:20 用时:50115

  这个事例表明在worker中实行的fibonacci数列的测算其实不会危害到主进程的编码实行,彻底在自身单独的进程中测算,只是在测算进行以后将結果送回主进程。

  运用web worker大家能够在前端开发实行1些繁杂的很多运算而不容易危害网页页面的展现,而且不容易弹出恶心想吐的脚本制作正忙提醒。

  下面这个事例应用了web worker来测算情景中的像素,情景开启时是1片1片开展绘图的,1个worker只测算1块像素值。

  http://nerget.com/rayjs-mt/rayjs.html
  3:Worker的别的尝试

  大家早已了解Worker根据接受1个URL来建立1个worker,那末大家是不是能够运用web worker来做1些相近jsonp的恳求呢,大伙儿了解jsonp是根据插进script标识来载入json数据信息的,而script元素在载入和实行全过程中全是堵塞式的,假如能运用web worker完成多线程载入可能十分非常好。

  下面这个事例将根据 web worker、jsonp、ajax3种不一样的方法来载入1个169.42KB尺寸的JSON数据信息

 

JavaScript Code拷贝內容到剪贴板
  1. // /aj/webWorker/core.js   
  2. function $E(id) {   
  3.     return document.getElementById(id);   
  4. }   
  5. onload =function() {   
  6.     //根据web worker载入   
  7.     $E('workerLoad').onclick =function() {   
  8.         var url ='http://js.wcdn.cn/aj/mblog/face2';   
  9.         var d = (new Date()).valueOf();   
  10.         var worker =new Worker(url);   
  11.         worker.onmessage =function(obj) {   
  12.             console.log('web worker: '+ ((new Date()).valueOf() - d));   
  13.         };   
  14.     };   
  15.     //根据jsonp载入   
  16.     $E('jsonpLoad').onclick =function() {   
  17.         var url ='http://js.wcdn.cn/aj/mblog/face1';   
  18.         var d = (new Date()).valueOf();   
  19.         STK.core.io.scriptLoader({   
  20.             method:'post',   
  21.             url : url,   
  22.             onComplete : function() {   
  23.                 console.log('jsonp: '+ ((new Date()).valueOf() - d));   
  24.             }   
  25.         });   
  26.     };   
  27.     //根据<span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" 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=ajax&k0=ajax&kdi0=0&luki=8&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="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">ajax</span></a></span>载入   
  28.     $E('ajaxLoad').onclick =function() {   
  29.         var url ='http://js.wcdn.cn/aj/mblog/face';   
  30.         var d = (new Date()).valueOf();   
  31.         STK.core.io.ajax({   
  32.             url : url,   
  33.             onComplete : function(json) {   
  34.                 console.log('ajax: '+ ((new Date()).valueOf() - d));   
  35.             }   
  36.         });   
  37.     };   
  38. };  

  HTML网页页面:/aj/webWorker/worker.html

 

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <<span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" 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=head&k0=head&kdi0=0&luki=6&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="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf⑻"/>  
  5. <title>Worker example: load <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" 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="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">data</span></a></span></title>  
  6. <script src="http://js.t.sinajs.cn/STK/js/gaea.1.14.js" type="text/<span style="width: auto; height: auto; float: none;" id="6_nwp"><a style="text-decoration: none;" mpid="6" 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=javascript&k0=javascript&kdi0=0&luki=9&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="6_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">javascript</span></a></span>"></script>  
  7. <script type="text/javascript" src="http://js.wcdn.cn/aj/webWorker/core.js"></script>  
  8. </head>  
  9. <body>  
  10.     <input type="button" id="workerLoad" value="web worker载入"></input>  
  11.     <input type="button" id="jsonpLoad" value="jsonp载入"></input>  
  12.     <input type="button" id="<span style="width: auto; height: auto; float: none;" id="7_nwp"><a style="text-decoration: none;" mpid="7" 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=ajax&k0=ajax&kdi0=0&luki=8&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="7_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">ajax</span></a></span>Load" value="ajax载入"></input>  
  13. </body>  
  14. </html>  

  设定HOST
 

拷贝编码
编码以下:
127.0.0.1 js.wcdn.cn 

  根据 http://js.wcdn.cn/aj/webWorker/worker.html 浏览网页页面随后各自根据3种方法载入数据信息,获得操纵台輸出:
 

拷贝编码
编码以下:
web worker: 174
jsonp: 25
ajax: 38

  多试几回发现根据jsonp和ajax载入数据信息的時间相差不大,而web worker的载入時间1直处在高位,因此用web worker来载入数据信息還是较为慢的,就算是绝大多数据量状况下也没任何优点,将会是Worker原始化新起进程较为耗時间。除在载入全过程中是畅通无阻塞的以外沒有任何优点。

  那末web worker是不是能适用跨域js载入呢,这次大家根据http://127.0.0.1/aj/webWorker/worker.html 来浏览网页页面,当点一下 ”web worker载入” 载入按钮时Chrome下无任何反应,FF6下提醒不正确。由此大家能够了解web worker是不适用跨域载入JS的,这针对将静态数据文档布署到独立的静态数据服务器的网站来讲是个坏信息。

因此web worker只能用来载入同域下的json数据信息,而这层面ajax早已能够保证了,并且高效率更高更通用性。還是让Worker做它自身善于的事吧。
  4:总结

  web worker看起来很幸福,但随处是魔鬼。

  大家能够做甚么:

  1.能够载入1个JS开展很多的繁杂测算而不脱机主过程,并根据postMessage,onmessage开展通讯

  2.能够在worker中根据importScripts(url)载入此外的脚本制作文档

  3.可使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

  4.可使用XMLHttpRequest来推送恳求

  5.能够浏览navigator的一部分特性

  有那些局限性:

  1.不可以跨域载入JS

  2.worker内编码不可以浏览DOM

  3.各个访问器对Worker的完成不大1致,比如FF里容许worker中建立新的worker,而Chrome中就不好

  4.并不是每一个访问器都适用这个新特点

上一篇:canvas与html5完成视頻截图作用示例 返回下一篇:没有了