html
>
在Chrome中開啟fibonacci.html，控制台得到以下輸出： 開始計算：40 時間:1316508212705我在計算數列的時候執行了時間:1316508212734
XML/HTML 程式碼將內容複製到剪貼簿
- 跨度 樣式=樣式=樣式=「寬度：高度自動；自動; 浮動：無;" 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= >跨度 樣式=樣式=樣式
=
跨度跨度
跨度跨度 >
在計算數列時執行了 時間: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 程式碼 將內容複製到剪切板
-
-
函數 $E(id) {
-
回傳 document.getElementById(id);
- }
-
onload =函數() {
-
-
$E('workerLoad').onclick =
var-
url ='http://js.wcdn./jj/mwhoo. ;
var
d = (-
newnew
var-
worker =new
worker.onmessage =函數
(obj) { -
console.log('web worker: '
-
}；
}；
- //透過jsonp載入
-
- $E('jsonpLoad').onclick =函數
- >
var url ='http://js.wcdn.cn/ajmblog/mblogface>'http://js.wcdn.cn/ajmblog/mblogface> ;
-
var d = (new
new- STK.core.io.scriptLoader({
方法：'發表'
, -
url : url, -
onComplete : 函數
() { - 函數() {
-
console.log('jsonp: '
'jsonp: '-
'jsonp: ''jsonp: ''jsonp: '
- }
- });
- };
-
-
$E('ajaxLoad').onclick =函數()>
-
var url ='http://js.wcdn./j/mwhoo. ;
var-
d = (newnew
- STK.core.io.ajax({
- url : url,
-
onComplete : 函數(json) {
(json) {
-
console.log('ajax: ''ajax: ''ajax: ' 含() - d））；
- }
- });
- }；
- }；
XML/HTML 程式碼
將內容複製到剪貼簿
- HTML>
-
html>
-
跨度 樣式 樣式 樣式 >樣式「寬度：自動；高度：自動；浮動：無；」 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；寬度：自動；高度：自動；浮動：無；”>頭 頭 頭
- 頭 頭 頭 頭 span>a>
跨度跨度>>
元 http-equiv=http-equiv==類型" 內容="text/html; charset=utf-8"/ -
標題>工作範例：載入工作範例：載入跨度 樣式=“寬度：自動；高度：自動；浮動：無；” 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>跨度> 標題> -
腳本 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>跨度
>-
“>腳本>
腳本 類型=類型 " src
=-
"http://js.wcdn.cn/aj/webWorker/core.js" >腳本>
-
頭>
-
身體>
輸入 類型=“按鈕” id="workerLoad" 值
- ="web worker載入">輸入> 🎜>>
輸入 類型=“按鈕” id="jsonpLoad"
值 值>"jsonp載入">輸入> -
輸入 類型=“按鈕” 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加載”>
-
輸入>
-
身體>
html
>
複製程式碼
程式碼如下：
透過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
