什麼是 Web Workers？

個人部落格上線歡迎來訪 http://www.zihanzy.com

引入

H5規範提供了js分執行緒的實現，取名為Web Workers他是HTML5提供的一個JavaScript多執行緒解決方案，我們可以將一些大計算量的程式碼交由web Worker執行而不凍結使用者介面
但是子執行緒完全受主執行緒控制，且不得操作DOM,所以這個新標準並沒有改變JavaScript單執行緒的本質

相關API
1.Worker:建構函式，載入分執行緒執行的js檔案
2.Worker.prototype.onmessage:用於接受另一個執行緒的回撥函式
3.WorKer.prototype.postMessage:向另一個執行緒傳送訊息

**不足
**
worker內程式碼不能操作DOM
不能跨域載入JS
不是每個瀏覽器都支援這個新特性

var input = document.getElementById('number')
function computed(n){
    return n<=2 ? 1:computed(n-1) + computed(n-2) //遞迴呼叫
}
document.getElementById('btn').onclick = function(){
    var number = input.value
    var result = computed(number)
    alert(result)
}

上面程式碼當按鈕被點選時根據使用者輸入的值進行斐波拉契數列的計算
當這個值較大時，由於遞迴導致頁面要很長時間才能響應，在等待響應的過程中由於js的單執行緒機制導致我們不能進行任何操作，頁面就像被卡死了一樣，如果要解決這個問題，可以用 web Wokers實現
將計算的邏輯交給分執行緒執行，這樣在計算的過程中我們可以正常操作頁面

//index.html
 var input = document.getElementById('number')
        
        document.getElementById('btn').onclick = function(){
            var number = input.value
            //建立一個worker物件
            var worker = new Worker('./js/worker.js')
            console.log(worker)
            //向分執行緒傳送訊息
            worker.postMessage(number)
            console.log('主執行緒向分執行緒傳送資料：'+number)
            //繫結接受訊息的監聽
            worker.onmessage = function(event){
                console.log('主執行緒接受分執行緒返回的資料：'+event.data)
            }
        }

//worker.js
function computed(n){
    return n<=2 ? 1:computed(n-1) + computed(n-2) //遞迴呼叫
}

var onmessage = function(event){
    var number = event.data
    console.log('分執行緒接受主執行緒傳送的資料：'+number)
    //計算
    var result = computed(number)
    postMessage(result)
    console.log('分執行緒向主執行緒返回資料：'+number)
}

個人部落格上線歡迎來訪 http://www.zihanzy.com