在Web開發(fā)的時(shí)候經(jīng)常會(huì)遇到瀏覽器不響應(yīng)事件進(jìn)入假死狀態(tài)，甚至彈出“腳本運(yùn)行時(shí)間過長“的提示框，如果出現(xiàn)這種情況說明你的腳本已經(jīng)失控了。
一個(gè)瀏覽器至少存在三個(gè)線程：js引擎線程(處理js)、GUI渲染線程(渲染頁面)、瀏覽器事件觸發(fā)線程(控制交互)。
JavaScript引擎是基于事件驅(qū)動(dòng)單線程執(zhí)行的，JS引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來然后加以處理，瀏覽器無論再什么時(shí)候都只有一個(gè)JS線程在運(yùn)行JS程序。
GUI 渲染線程負(fù)責(zé)渲染瀏覽器界面，當(dāng)界面需要重繪(Repaint)或由于某種操作引發(fā)回流(reflow)時(shí),該線程就會(huì)執(zhí)行。但需要注意 GUI渲染線程與JS引擎是互斥的，當(dāng)JS引擎執(zhí)行時(shí)GUI線程會(huì)被掛起，GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JS引擎空閑時(shí)立即被執(zhí)行。
事件觸發(fā)線程，當(dāng)一個(gè)事件被觸發(fā)時(shí)該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待JS引擎的處理。這些事件可來自JavaScript引擎當(dāng)前執(zhí)行的代碼塊如setTimeOut、也可來自瀏覽器內(nèi)核的其他線程如鼠標(biāo)點(diǎn)擊、AJAX異步請(qǐng)求等，但由于JS的單線程關(guān)系所有這些事件都得排隊(duì)等待JS引擎處理。
了解了瀏覽器的內(nèi)核處理方式就不難理解瀏覽器為什么會(huì)進(jìn)入假死狀態(tài)了，當(dāng)一段JS腳本長時(shí)間占用著處理機(jī)就會(huì)掛起瀏覽器的GUI更新，而后面的事件響應(yīng) 也被排在隊(duì)列中得不到處理，從而造成了瀏覽器被鎖定進(jìn)入假死狀態(tài)。另外JS腳本中進(jìn)行了DOM操作，一旦JS調(diào)用結(jié)束就會(huì)馬上進(jìn)行一次GUI渲染，然后才 開始執(zhí)行下一個(gè)任務(wù)，所以JS中大量的DOM操作也會(huì)導(dǎo)致事件響應(yīng)緩慢甚至真正卡死瀏覽器，如在IE6下一次插入大量的HTML。而如果真的彈出了“腳本 運(yùn)行時(shí)間過長“的提示框則說明你的JS腳本肯定有死循環(huán)或者進(jìn)行過深的遞歸操作了。
現(xiàn)在如果遇到了這種情況，我們可以做的不僅僅是優(yōu)化 代碼，html5的webWorkers提供了js的后臺(tái)處理線程的API，它允許將復(fù)雜耗時(shí)的單純js邏輯處理放在瀏覽器后臺(tái)線程中進(jìn)行處理，讓js線 程不阻塞UI線程的渲染。這個(gè)線程不能和頁面進(jìn)行交互，如獲取元素、alert等。多個(gè)線程間也是可以通過相同的方法進(jìn)行數(shù)據(jù)傳遞。
直接看代碼：
例子：用戶輸入一個(gè)數(shù)字，進(jìn)行加法運(yùn)算(+=)
以前的做法：
<!DOCTYPE HTML><html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>webworkers–calculate</title></head>
<body>
<input id=”num” name=”num” type=”text”/>
<button onclick = “calculate()”>計(jì)算</button><br />
<div id=”result” style=”color:red;”></div>
<div id=”time” style=”color:red;”></div>
<script type=”text/javascript” src=”calculate.js”></script>
<script type=”text/javascript”> function calculate(){
data1 = new Date().getTime();
var num = document.getElementById(“num”).value;
var val = parseInt(num,10);
var result =0;
for(var i =0; i<num;i++){
result += i;
}
data2 = new Date().getTime();
document.getElementById(“result”).innerHTML =”計(jì)算結(jié)果：”+result;
document.getElementById(“time”).innerHTML =”普通 耗時(shí)：”+ (data2 – data1)+”ms”;
}
</script>
</body>
</html>
使用webWorkers以后：
calculate.html
<!DOCTYPE HTML><html lang=”en”><head>
<meta charset=”UTF-8″>
<title>webworkers–calculate</title>
</head>
<body>
<input id=”num” name=”num” type=”text”/>
<button onclick = “calculate()”>計(jì)算</button><br />
<div id=”result” style=”color:red;”></div>
<div id=”time” style=”color:red;”></div>
<script type=”text/javascript” src=”calculate.js”></script>
<script type=”text/javascript”>
var worker = new Worker(“calculate.js”);
var data1 =0;
var data2 =0;
worker.onmessage = function(event){
var data = event.data;
data2 = new Date().getTime();
document.getElementById(“result”).innerHTML =”計(jì)算結(jié)果：”+data;
document.getElementById(“time”).innerHTML =”workers 耗時(shí)：”+ (data2 – data1)+”ms”;
};
function calculate(){
data1 = new Date().getTime();
var num = document.getElementById(“num”).value;
var val = parseInt(num,10);
worker.postMessage(val);
}
</script>
</body>
</html>
calculate.js
onmessage = function(event){var num = event.data;
var result = 0;
for(var i = 0; i<num;i++){
result += i;
}
postMessage(result);
};
webWorker需要將代碼放入web服務(wù)器中， 如果使用的是localhost請(qǐng)用高版本的chrome瀏覽器打開，firefox瀏覽器在處理localhost的時(shí)候會(huì)出現(xiàn)“Could not get domain!”的錯(cuò)誤，關(guān)于這個(gè)可以參考：https://bugzilla.mozilla.org/show_bug.cgi?id=682450 對(duì)比上面的兩種實(shí)現(xiàn)方式，當(dāng)計(jì)算值達(dá)到100億的時(shí)候，普通做法耗時(shí)已經(jīng)很長，且一般會(huì)卡死了。
▲webWorkers在Chrome15下的效果
更正：getTime()返回的應(yīng)該是毫秒(ms)，而不是秒(s)。
如下圖所示：
▲普通方法在Chrome15下的效果
可見webWorkers在未來的web應(yīng)用中還是非常有價(jià)值的。