1、針對html5的web worker使用攻略網絡工作者是html5提供的一個javascript的多線程解決計劃，我們可以將一些大計算量的代碼交由網絡工作者運行而不凍結用戶界面。一：如何用法工web worker的基本原理就是在當前javascript的主線程中，用法worker類加載一個javascript文件來開拓一個新的線程，互相互不執行執行的效果，并提供主線程和新線程之間的數據交換的接口：postmessage，onmessage。那么如何用法呢，我們看一個例子： javascript代碼將內容復制到/worker.jsonmessage =功能 （evt） var d = evt.d

2、ata; /通過evt.data獲得發送來的數據 postmessage（d）; /將獵取到的數據發送會主線程 html頁面：test.html xml / html代碼將內容復制到文本 頭 javascript / web頁主線程var worker = new worker（ worker.js）; /創建一個worker對象并向它傳遞將在新線程中執行的腳本的url worker.postmessage（ hello world）; /向worker發送數據 worker.onmessage = function （evt）/接收worker傳過來的數據 函數 console.log（ev

3、t。 數據 ）；/輸出worker發送來的數據 用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的執行。工人新

4、線程：1.通過postmessage（data）辦法來向主線程發送數據。2.綁定的onmessage辦法來接收主線程發送過來的數據。二：工作者能做什么知道了如何用法web worker，那么它到底有什么用，可以幫我們解決那些問題呢。我們來看一個fibonacci數列的例子。大家知道在數學上，fibonacci數列被以遞歸的辦法定義：f0 = 0，f1 = 1，fn = f（n-1）+ f（n-2）（n = 2，n∈n*），而javascript的常用實現為：javascript代碼將內容復制到 var fibonacci =函數（n） 返回 n 數據 ，10）； postmessag

5、e（fibonacci（n）; ;html頁面：fibonacci.html xml / html代碼將內容復制到文本 頭 網絡工作者斐波那契 javascript onload = function （） var worker = new worker（&39;fibonacci.js&39;）; worker.addeventlistener（&39;message&39;，function（event） var timer2 =（new date（）。valueof（）; console.log（&39;結果：&39;+ event。 數據 ，&39;時光：&39;+ timer2，&3

6、9;用時：&39;+（timer2-timer）; ，錯誤）； var timer =（new date（）。valueof（）; console.log（&39;開頭計算：40&39;，&39;時光：&39;+ timer）; settimeout（function（） console.log（&39;定時器 函數 在計算數列時執行了&39;，&39;時光：&39;+（new date（）。valueof（）; ，1000）； worker.postmessage（40）; console.log（&39;我在計算數列的時候執行了&39;，&39;時光：&39;+（new date（）。va

7、lueof（）; 頭 在chrome中打開fibonacci.html，控制臺得到如下輸出：開頭計算：40時光：1316508212705我在計算數列的時候執行了時光：1316508212734定時器 xml / html代碼將內容復制到文本 函數 在計算數列時執行了時光：1316508213735結果：102334155時光：1316508262820用時：50115這個例子解釋在worker中執行的fibonacci數列的計算并不會影響到主線程的代碼執行，徹低在自己自立的線程中計算，只是在計算完成之后將結果發回主線程。利用web worker我們可以在前端執行一些復雜的大量運算而不會影響頁

8、面的展示，并且不會拖動惡心的腳本正忙提醒。下面這個例子用法了網絡工作者來計算場景中的預定，場景打開時是一片一片舉行舉行的，一個工人只計算了一塊數值。三：worker的其他嘗試我們已經知道worker通過接收一個url來創建一個worker，那么我們是否可以利用web worker來做一些類似jsonp的哀求呢，大家知道jsonp是通過插入script標簽來加載json數據的，而script元素在加載和執行過程中都是雙向式的，假如能利用網絡工作者實現初步加載將會十分不錯。下面這個例子將通過web worker，jsonp，ajax三種不同的方式來加載一個169.42kb大小的json數據 jav

9、ascript代碼將內容復制到/ /aj/webworker/core.js函數 $ e（id） 返回 document.getelementbyid（id）; onload = function （） /通過網絡工作者加載 $ e（&39;workerload&39; ）.onclick = function （） var url = &39; ; var d =（new date（）。valueof（）; var worker = new worker（url）; worker.onmessage =函數（obj） console.log（&39;web worker：&39; +（new

10、 date（）。valueof（）-d）; ; ; /通過jsonp加載 $ e（&39;jsonpload&39; ）.onclick = function （） var url = &39; ; var d =（new date（）。valueof（）; stk.core.io.scriptloader（ 辦法：&39;post&39; ， 網址：網址， oncomplete： function （） console.log（&39;jsonp：&39; +（new date（）。valueof（）-d）; ）; ; /通過 ajax 加載 $ e（&39;ajaxload&39; ）.o

11、nclick = function （） var url = &39; ; var d =（new date（）。valueof（）; stk.core.io.ajax（ 網址：網址， oncomplete： 函數（json） console.log（&39;ajax：&39; +（new date（）。valueof（）-d）; ）; ; ;html頁面：/aj/webworker/worker.html xml / html代碼將內容復制到文本 頭 工人示例：負載 數據 javascript ajax 加載 設置主機 復制代碼代碼如下： 通過 復制代碼代碼如下：網絡工作者

12、：174 jsonp：25 ajax：38多試一次發覺通過jsonp和ajax加載數據的時光相差不大，而網絡工作者的加載時光向來處于高位，所以用網絡工作者來加載數據還是比較慢的，甚至是大數據量狀況下也也沒任何優勢，可能是worker初始化新起線程比較耗時。此外在加載過程中是無雙面的之外沒有任何優勢。那么web worker是否能支持跨域js加載呢，這次我們通過/aj/webworker/worker.html來拜訪頁面，當點擊 web worker加載加載按鈕時chrome下無任何反映，ff6下提醒錯誤。此類我們可以知道web worker是不支持跨域加載js的，這對于將靜態文件部署到單獨的靜態服務器的網站來說是一個壞消息。所以網絡工作者只能用來加載同域下的json數據，而這方面的ajax已經可以做到了，而且效率更高更通用還是讓工人做它自己善于的事吧。四：總結網絡工作者看起來很美妙，但到處是魔鬼。我們可以做什么：1.可以加載一個js舉行大量的復雜計算而不掛起主進程，并通過postmessage，onmessage舉行通信2.可以在worker中通過importscripts（url）加載其他的腳本文件3.可以用法settimeout（），cleartimeout