針對HTML5的Web Worker使用攻略_html5教學技巧

Web Workers 是 HTML5 提供的一個javascript多執行緒解決方案，我們可以將一些大計算量的程式碼交由web Worker運行而不凍結使用者介面。
一：如何使用Worker

　　Web Worker的基本原理就是在當前javascript的主線程中，使用Worker類加載一個javascript文件來開闢一個新的線程，起到互不阻塞執行的效果，並且提供主線程和新線程之間數據交換的介面：postMessage，onmessage。

　　那麼如何使用呢，我們看一個例子：
 

JavaScript Code複製內容到剪貼簿

1. //worker.js   
2. onmessage =function (evt){   
3.   var d = evt.data;//透過evt. 🎜>
  postMessage( d );
4. //將取得的資料傳送會主執行緒   
}  

　　HTML頁：test.html

 

XML/HTML Code

複製內容到剪貼簿

1. HTML>  
2. html>  
3. 跨度 樣式 樣式 樣式 >樣式「寬度：自動；高度：自動；浮動：無；」 id=「20_nwp=「20_nwp 🎜>>a 樣式=樣式="文字裝飾：無; " mpid="20" 目標 目標目標目標> "_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=100&k=head&k0=head&kdi0=0&luki=6&n=10&p id=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t= tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id id id >>🎜>> ">跨度 樣式=“顏色：#0000ff；字體大小：14px；寬度：自動；高度：自動；浮動：無；”
4. >頭 頭 頭 頭 頭 頭 頭
span>a>跨度跨度>>    元 http-equiv類型" 內容="text/html;  charset=utf-8"/   
5.  腳本 類型="text/類型="text/類型="text// 🎜>跨度 style="寬度： 自動； 高度：自動； 浮動：無；」idid =“21_nwp”> a 樣式 ="文字裝飾：無;" mpid="21" 目標="_blank" ref > >"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&java=kdf45&pscript=k000&p baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid=0&t =tpclicked3_hc&tu=u1922429&stid=0&t =tpclicked3_hc&tu=u1922429&stid=http://www.D.com   id="21_nwl">< ;跨度< ;跨度< ;跨度< ;跨度< ;跨度< ;跨度< ;
跨度
6. < ;
跨距>樣式
7. ="顏色:#0000ff;字體大小:14px;寬度:自動;高度：自動；浮動：無；「>javascript
跨度
8. >
aa 跨度>「> 🎜>> 🎜> //WEB頁面主執行緒    var worker =new Worker("worker.js"); /M它將在新線程中執行的腳本的URL     worker.postMessage(「你好世界」);     //傳送資料   
9.  worker.onmessage =function(evt){  跨度 樣式=「寬度：自動；高度：自動浮動：無； " id="22_nwp">> a 樣式=「文字裝飾：無;」 >="22" 目標="_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=����&k0=����&kdi0=0&luki=2&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_1006010000 tpclicked3_hc&tu=u1922429&u=http :// www.admin10000.com/document/1183.html&urlid=0" id="2="222_nwl 跨度 樣式="顏色:0000:000:000:000:000:000:000:000:000:000？ 14px;width:auto;height:auto;float:n;">函數跨度 >a>跨度
>
10.       console.log(evt.跨度 樣式= 「寬度：自動；高度：自動；浮動：無；」 id=「23_nwp >>a 樣式="文字裝飾：無; 🎜> mpid="23" 目標 "_blank" href="http://cpro.baidu.com/cpro/ ui/uijs. php?adclass=0&app_id=0&c=新聞&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=data&k0=data&kdi0=0&luki=4&n=10&k=data&k0=data&kdi0=0&luki=4&n=10&C &sid=45fdcf1cab219561&ssp2=1&stid= 0&t= tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id= "23_nwl ">跨度 樣式=樣式=樣式>數據跨度>a>
跨度
11. >）；              //輸出worker傳送來的資料    }  
12.  script>  
13.  head>  
14.  body>body>  
15. 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，n∈N* ），而javascript的常用實作為：

JavaScript Code複製內容到剪貼簿

1.     
2. var fibonacci =function(n).
    
3. return n };   
//fibonacci(36)
5.   
　　在chrome中用該方法進行39的fibonacci數列執行時間為19097毫秒 ，而要計算40的時候瀏覽器直接提示腳本忙了。

　　由於javascript是單執行緒執行的，在求數列的過程中瀏覽器不能執行其它javascript腳本，UI渲染執行緒也會被掛起，導致瀏覽器進入僵死狀態。使用web worker將數列的計算過程放入一個新執行緒裡去執行將避免這種情況的出現。詳情請見範例：

 

JavaScript Code

複製內容到剪貼簿

1. //fibonacci.js
2. var斐波那契 =函數(n) {
3. 回傳 n
4. }；   
5. onmessage =函數(事件) {
6. var n = parseInt(event."寬度：自動；高度：自動；浮動：無；" "寬度：自動；高度：自動；浮動：無；" id="16_nwp">"文字裝飾：無;""文字裝飾：無;" mpid="16" target="_blank" ref="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=4n?n&q &seller_id= 1&sid =45fdcf1cab219561&ssp2= 1&time=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&url=0" id="顏色:#0000ff;字體大小:14px;寬度:自動;高度:自動;浮動:無;"
7. >資料< ; /span , 10);   
8. postMessage(斐波那契(n));   

}；  

HTML 開啟：fibonacci.html

XML/HTML 程式碼

國際程式碼設定

1. HTML>  
2. html>  
3. 跨度 樣式 樣式 樣式 >樣式「寬度：自動；高度：自動；浮動：無；」 id=「11_nwp=「11_nwp「11_nwp「11_nwp 🎜>>a 樣式=樣式="文字裝飾：無; " mpid="11" 目標 目標目標目標"_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=100&k=head&k0=head&kdi0=0&luki=6&n=10&p id=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t= tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id id id id >> ">
跨度
4.  樣式=“顏色：#0000ff；字體大小：14px；寬度：自動；高度：自動；浮動：無；”>頭 頭 頭 頭
頭
5. 頭 頭 span>a>
跨度跨度>>   元 http-equiv=http-equiv==類型" 內容="text/html;  charset=utf-8"/    標題>網路工作者斐波那契網路工作者斐波那契> 標題>  
6. 腳本 類型="text/ 跨度 style="寬度： 自動； 高度：自動； 浮動：無；」idid =“12_nwp”> a 樣式 ="文字裝飾：無;" mpid="12" 目標="_blank" ref > >"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&java=kdf45&pscript=k000&p baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid=0&t =tpclicked3_hc&tu=u1922429&stid=0&t =tpclicked3_hc&tu=u1922429&stid=http://www.D.com   id="12_nwl">< ;跨度 樣式="顏色:#0000ff;字體大小:14px;寬度:自動;高度：自動；浮動：無；「>javascript跨度>aa
跨度
7. >「> 🎜>> 🎜>
8.   載入 =函數(){   
函數
9. (){   
10. (){   (){   
      var worker =new       worker.addEventListener('訊息', 函數(事件) {            var timer2 = (new Date()).valueOf();   
11.            con中。 「寬度：自動；高度：自動；浮動：無；」 id=「13_nwp” >a 樣式=樣式=樣式=樣式=樣式= mpid="13" ="_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=4000&lu _id=1&sid= 45fdcf1cab219561&ssp2=1&stid =0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id id >"13_nwl">跨度 樣式 樣式 樣式 樣式 樣式 「顏色：#0000ff；字體大小：14px；寬度：自動；高度：自動；浮動：無;」>資料
12. 跨度>a> > >>,'時間:'timer2,'用時：'(timer2-timer));          }， 錯誤的）;   
13.       var 計時器 = (new Date()).valueOf(); 🎜
      console.log('開始計算：40','時間:'  timer );   
      setTimeout(function(){   
          console.log('計時器
16. span可🎜> 「寬度：自動；高度：自動；浮動：無；」 id=「14_nwp 「14_nwp >a 樣式=樣式=樣式=花 mpid="14" 目標 "_blank" href="http://cpro.baidu.com/uicpro /ui/js .php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=����&k0=����&kdi0=0&luki=10&n seller_id=1&sid =45fdcf1cab219561&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id="14_nwl">跨度 樣式="顏色:#0000ff;字體大小:14px;寬度:自動;高度:自動;浮動:無;">函數>函數span>
a
17. >
18. >
19. span
>
20. 在計算數列時執行了', '時間:'  (new Date()).valueOf( ) );          },1000);          worker.postMessage(40);          console.log('我在計算數列的時候執行了', '時間:'  (new Date()).valueOf() );      }     
21.   腳本>  
22. 跨度 樣式= 「寬度：自動；高度：自動；浮動：無；」 id=「15_nwp”「15_nwp” >a 樣式=樣式="文字裝飾：無;「 mpid=「15」 目標="_blank" href="http://cpro.baidu.com /cpro /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>100&p _id=1&sid=45fdcf1cab219561&ssp2 =1&stid= 0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id id; "15_nwl">跨度 樣式= 「顏色：#0000ff；字體大小：14px；寬度：自動；高度：自動；浮動：無；」>頭頭跨度>
23. a>< ;/>< ;/
24. >>  
25. 身體>  

身體

>

  

html

>   在Chrome中開啟fibonacci.html，控制台得到以下輸出： 開始計算：40 時間:1316508212705我在計算數列的時候執行了時間:1316508212734 XML/HTML 程式碼將內容複製到剪貼簿

1. 跨度 樣式=樣式=樣式=「寬度：高度自動；自動; 浮動：無;" id="9_nwp">"9_nwp">>a 樣式="文字裝飾：無;""文字裝飾：無;" mpid="9" 目標=目標= href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id =0&c=新聞&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=619521ab1ccffd45&k=����&k0=����&kdi0=0&luki=2&n=10&p=baidu&q=060110=0&luki=2&n=10&p=baidu&q=06010=0&luki=2&n=10&p=baidu&q=06011078 b219561&ssp2=1&stid=0&t =tpclicked3_hc&tu =u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id=id= >跨度 樣式=樣式=樣式

=

樣式

=

>

函數

跨度>

a

>

跨度跨度

跨度跨度 >   在計算數列時執行了 時間:1316508213735結果：102334155 時間:1316508262820 使用時：50115 這個例子說明在worker中執行斐波那契數列的計算並不會影響到主執行緒的程式碼執行，完全在自己獨立的執行緒中計算，只是在計算完成之後將結果發回主執行緒。 利用網路工作者我們可以在前端執行一些複雜的大規模攻擊而不會影響頁面的顯示，並且不會彈出腳本正忙提示。 下面這個例子使用了web worker來計算場景中的像素，場景打開時是一片片進行稀疏的，一個worker只計算一個像素值。 http://nerget.com/rayjs-mt/rayjs.html三：工人的其他嘗試 我們已經知道Worker透過接收一個URL來創建一個worker，我們是否可以利用web worker來做一些類似jsonp的請求呢，大家jsonp是透過插入知道腳本標籤來那麼載入json資料的，而腳本在元素中載入和執行過程中都是阻塞方式的，如果能利用web worker實作異步載入將會非常好。   JavaScript 程式碼 將內容複製到剪切板

1. // /aj/webWorker/core.js   
2. 函數 $E(id) {   
3.     回傳 document.getElementById(id);   
4. }   
5. onload =函數() {   
6.     //透過web worker載入   
7.     $E('workerLoad').onclick =         
var
8.  url ='http://js.wcdn./jj/mwhoo. ;            var
 d = (
9. newnew        
var
10.  worker =new         worker.onmessage =函數
(obj) {   
11.             console.log('web worker: '
12.         }；       }；   
13.     //透過jsonp載入
14.   
15.     $E('jsonpLoad').onclick =函數
16. >         var url ='http://js.wcdn.cn/ajmblog/mblogface>'http://js.wcdn.cn/ajmblog/mblogface> ;   
17.         var d = (new
new
18.         STK.core.io.scriptLoader({                方法：'發表'
,   
            url : url,   
20.             onComplete : 函數
() { 
21. 函數() { 
22.                 console.log('jsonp: '
'jsonp: '
23. 'jsonp: ''jsonp: ''jsonp: '
24.             }   
25.         });   
26.     };   
27.     //透過ajax載入  
28.     $E('ajaxLoad').onclick =函數()>
        
29. var url ='http://js.wcdn./j/mwhoo. ;            
var
30.  d = (newnew
31.         STK.core.io.ajax({   
32.             url : url,   
33.             onComplete : 函數(json) {   
(json) {   
34.                 console.log('ajax: ''ajax: ''ajax: ' 含() - d））；   
35.             }   
36.         });   
37.     }；   
38. }；  

 

XML/HTML 程式碼將內容複製到剪貼簿

1. HTML>  
2. html>  
3. 跨度 樣式 樣式 樣式 >樣式「寬度：自動；高度：自動；浮動：無；」 id=「4_nwp」>a 樣式=樣式="文字裝飾：無; " mpid="4" 目標 "_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=100&k=head&k0=head&kdi0=0&luki=6&n=10&p id=1&sid=45fdcf1cab219561&ssp2= 1&stid=0&t= tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/1183.html&urlid=0" id="4_nwl ">跨度 樣式=“顏色：#0000ff；字體大小：14px；寬度：自動；高度：自動；浮動：無；”>頭 頭 頭
4. 頭 頭 頭 頭 span>a>
跨度跨度>>   元 http-equiv=http-equiv==類型" 內容="text/html;  charset=utf-8"/   
5. 標題>工作範例：載入工作範例：載入跨度 樣式=“寬度：自動；高度：自動；浮動：無；” id="5_nwp">aaa樣式="文本裝飾：無;" mpid= 「5」 目標=「_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 =619521ab1cc =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=u1922第429章&u=http://www.admin10000.com/document/1183.html&urlid=0 " id="5_nwl"> 樣式="顏色:#0000ff;字體大小:14px;寬度:自動;高度:自動浮動:無;">資料跨度>跨度>< ;>< ;>
< ; a>跨度> 標題>  
6. 腳本 src="http: / /js.t.sinajs.cn/STK/js/gaea.1.14.js" 類型="text/< ; 跨度 style="寬度： 自動； 高度：自動； 浮動：無；」idididididididididididid=“6_nwp”> a 樣式="文字裝飾：無;" mpid="6"="6""6"  目標="_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&nscript&sscript=4521ab1ccffd45&n =baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=45fdcf1cab219561&ssp2=1&stid=0&t =tpclicked3_hc&tu=u1922429&stid=0&t =tpclicked3_hc&tu=u1922429&stid=http://www.D.com > id="6_nwl">< ;跨度 樣式="顏色:#0000ff;字體大小:14px;寬度:自動;高度：自動；浮動：無；「> javascript跨度>a>跨度
>
7. “>腳本>   腳本 類型=類型 " src
=
8. "http://js.wcdn.cn/aj/webWorker/core.js" >腳本>
9.    頭>
10.    身體>       輸入 類型=“按鈕”  id="workerLoad" 值
11. ="web worker載入">輸入> 🎜>>      輸入 類型=“按鈕”  id="jsonpLoad" 
值 值>"jsonp載入">輸入>
12.     輸入 類型=“按鈕”  id="span style="寬：自動； 高度：自動； 浮動：無；」id=「7_nwp」 > a 樣式="文字裝飾：無; > mpid="7" 目標= "_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&pqb&k0=ajax&kdi0=0&luki=8&n=10&pqb&n=1000 =45fdcf1cab219561&ssp2=1&stid =0&t=tpclicked3_hc&tu=u1922429&u=http: //www.admin10000.com/document/ 1183.html&urlid=0" id=id="id="7_nwl">< ;跨度 樣式=樣式="ff🎜>樣式顏色;大小:14px;寬度:自動;高度：自動；浮動：無；“>ajax跨度>a>跨度> 加載”值=“ajax加載”>
13. 輸入>  
14. 身體>  

html

>

  

設定HOST 

複製程式碼


程式碼如下：

程式碼如下：1770. .wcdn.cn

透過http://js.wcdn.cn/aj/webWorker/worker.html存取頁面然後分別透過透明方式載入數據，得到控制台輸出：
 

複製程式碼程式碼如下：web worker: 174jsonp: 25ajax: 38jsonp: 25ajax: 38

After trying several times, I found that the time to load data through jsonp and ajax is not much different, and the loading time of web worker has always been at a high level, so using web worker to load data is still relatively slow, even with large amounts of data. There is no advantage. It may be that it takes time for Worker to initialize new threads. There is no advantage other than being non-blocking during loading.

So can web worker support cross-domain js loading? This time we access the page through http://127.0.0.1/aj/webWorker/worker.html. When clicking the "web worker loading" loading button, Chrome will download There is no response, and an error is prompted under FF6. From this we can know that web worker does not support cross-domain loading of JS, which is bad news for websites that deploy static files to a separate static server.

So web worker can only be used to load json data in the same domain, but ajax can already do this, and it is more efficient and versatile. Let the Worker do what it is good at.
Four: Summary

Web workers look nice, but they are full of devils.

What we can do:

1. You can load a JS to perform a large number of complex calculations without hanging the main process, and communicate through postMessage, onmessage

2. You can load additional script files in the worker through importScripts(url)

　3. You can use setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4. You can use XMLHttpRequest to send requests

5. Can access some properties of navigator

What are the limitations:

1. Cannot load JS across domains

　2. The code within the worker cannot access the DOM

3. The implementation of Worker in various browsers is not consistent. For example, FF allows the creation of new workers in workers, but Chrome does not allow it.

　4. Not every browser supports this new feature