【HTML5初探之WebWorkers】網頁也能多執行緒

範大腳腳發表於2017-11-09
HTMLWeb網頁執行緒
導航
【初探HTML5之使用新標籤佈局】用html5佈局我的部落格頁！
【HTML5初探之form標籤】解放表單驗證、增加檔案上傳、整合拖放
【HTML5初探之繪製影像（上）】看我canvas元素引領下一代web頁面
【HTML5初探之繪製影像（下）】看我canvas元素引領下一代web頁面
【HTML5初探之多媒體元素】視訊播放HTML5、Flash誰才是王道？
【HTML5初探之本地儲存】如果沒有資料庫。。。
【HTML5初探之離線應用】如何打造零請求、無流量的網站？
【HTML5初探之通訊API】跨域門檻不再高、資料推送不是夢
【HTML5初探之Web Workers】網頁也能多執行緒
【HTML5初探之Geolocation API】讓我們來回去地理資訊
 
前言
Web Workers 是在HTML5中新增的，用來在web應用程式中實現後臺處理的一種技術
在HTML4中，js建立的程式都是單執行緒的，如果花費時間比較長的話web介面就會長時間沒有響應，最惡劣的情況還會跳出一個指令碼提示框：
提示指令碼執行時間過長，是否繼續。。。。於是就引出了本文的主角：Web Workers API
使用這個API使用者可以非常容易的建立在後臺執行的執行緒，要建立後臺程式很簡單：
var worker = new Worker(`*.js`);
注意：後臺執行緒是不能訪問頁面或者視窗物件的
可以通過傳送訊息和接受訊息與後臺執行緒傳遞資料：
worker.onmessage = function (e) {};
worker.postMessage = function (e) {};
說一下求和：
複製程式碼
 1 <!DOCTYPE html>
 2 <html xmlns=”http://www.w3.org/1999/xhtml”>
 3 <head>
 4     <title></title>
 5     <script type=”text/javascript”>
 6         function calculate() {
 7             var num = 10000000000;
 8             var r = 0;
 9             for (var i = 1; i < num; i++) {
10                 r += i;
11             }
12             alert(r);
13         }
14         calculate();
15     </script>
16 </head>
17 <body>
18 </body>
19 </html>
複製程式碼
於是我美麗的框給出來了。。。但使用web worker便不會：
複製程式碼
 1 <!DOCTYPE html>
 2 <html xmlns=”http://www.w3.org/1999/xhtml”>
 3 <head>
 4     <title></title>
 5     <script type=”text/javascript”>
 6         var worker = new Worker(`c.js`);
 7         worker.onmessage = function (e) {
 8             alert(`和：` + e.data);
 9         };
10         function calculate() {
11             var num = 1000000;
12             worker.postMessage(num);
13         }
14         calculate();
15     </script>
16 </head>
17 <body>
18 </body>
19 </html>
複製程式碼
複製程式碼
onmessage = function (e) {
    var num = e.data;
    var r = 0;
    for (var i = 1; i < num; i++) {
        r += i;
    }
    postMessage(r);
}
複製程式碼
我有時候就在想，我沒事幹嘛計算那麼大的數字啊。。。。。當然這是無聊的坑爹，但我想有個場景可能需要用到這個。
在前面學習file api時，有個讀取本地檔案的操作，若是檔案過大會很慢，不知道這個可以應用上去嗎？二次學習時有必要試試。
與執行緒進行資料互動
 我們這裡完成一個功能，在前臺隨機生成陣列，然後在後臺計算能被3整出就返回前臺列印：
主程式
生成陣列的程式
判斷陣列所有資料是否被3整除
程式邏輯描述：
這裡用了個執行緒巢狀
首先執行前臺程式，這裡初始化了一個子執行緒“t1”用於將100個陣列初始化
然後子執行緒t1又初始化了子執行緒t2（用於遍歷陣列，取出能被3整除的數字，組成字串），t1將陣列資料傳給t2
t2 接收t1資料，計算後將將字串轉給t1，t1轉給前臺，前臺執行自己的邏輯
流程結束
結語
簡單來說，我這裡就是宣告子執行緒，然後傳送資料給子線postMessage，然後等待結果皆可。
這裡看來，結合上次的通訊API Web Sockets ，可以將2個結合做一個網頁聊天程式，甚至還可以將本地儲存/本地資料庫一些東西用到。
這個樣子可能是個不錯的東西。 
本文轉自葉小釵部落格園部落格，原文連結http://www.cnblogs.com/yexiaochai/archive/2013/04/20/3032765.html，如需轉載請自行聯絡原作者


相關文章