web worker是html5 提供的一個JavaScript多線程的解決方案，worker用于處理一些大量復雜耗時的計算，免得頁面凍結、掛起、卡死。

比如：我們要運算一個復雜的數學計算：遞歸計算。

var fibonacci =function(n) {
return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
fibonacci(40)

當參數達到40或者以上的時候，頁面就會出現明顯的卡死現象。這個時候用戶就只能等待算計結束才可以做其他操作。這種情況下就適合使用worker開辟新線程來處理這個運算。

main.html頁面為主線程

<script>

//開辟一個新線程

var worker = new Worker('worker.js');

worker.postMessage(40) ;

worker.onmessage = function(ev){

console.log(ev);

worker.terminate() //終止一個worker線程

};

</script>

worker.js 開辟的新線程

//新線程

//定義遞歸函數

var fibonacci =function(n) {

return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);

};

onmessage = function(ev){

var param = parseInt(ev.data,10) ;

//把地柜函數的計算交給新線程，計算完之后用postMessage把結果傳回給主線程

postMessage(fibonacci(param))

}

這樣就可以實現主線程和新開辟的線程之間的信息交互。復雜的計算就交給了worker.js。頁面不用卡死。新線程會在處理完計算之后把數據傳回給主線程（有點異步請求的感覺）。

總結我們可以做什么：

1.可以加載一個JS進行大量的復雜計算而不掛起主進程，并通過postMessage，onmessage進行通信

2.可以在worker中通過importScripts(url)加載另外的腳本文件

3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

4.可以使用XMLHttpRequest來發送請求

5.可以訪問navigator的部分屬性

有那些局限性：

1.不能跨域加載JS

2.worker內代碼不能訪問DOM

3.各個瀏覽器對Worker的實現不大一致，例如FF里允許worker中創建新的worker,而Chrome中就不行

4.不是每個瀏覽器都支持這個新特性.

總結

以上是生活随笔為你收集整理的HTML5 API详解（8）:worker多线程教你如何避免页面卡死的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。