對H5新增多線程的理解與簡單使用

由於JavaScript的特性決定了JavaScript語言是一種單線程語言，但是有時候我們需要使用多線程比如進行大量的計算時。H5為此新增了多線程的方法。

在這里我是用JavaScript來實現著名的斐波拉且數列，當我在輸入框中輸入第一個數字時返回這個數字所在位置的數字值。

主線程與分線程之間的關系圖：

1、在不使用多線程時
HTML

<input type="text" placeholder="數值" id="number">
<button id="btn">計算</button>

JavaScript

// 1 1 2 3 5 8  ....   f(n) = f(n-1) + f(n-2)
    function fibonacci (n) {
        return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)  //遞歸調用
    }
    var input = document.getElementById('number')
    document.getElementById('btn').onclick = function () {
        var number = input.value
        var result = fibonacci(number)
        alert(result)
    }

在不使用多線程的情況下當我們輸入一個較大的數值時，由於是遞歸調用並且計算量大就會造成頁面處於無法操作狀態只能等待計算完成后用戶才可以操作界面

2、使用H5新增的多線程方法

var input = document.getElementById('number')
    document.getElementById('btn').onclick = function () {
        var number = input.value

        //創建一個worker對象
        var worker = new Worker('worker.js')
        //綁定接受消息的監聽
        worker.onmessage = function (event) {
            console.log('主線程接受分線程返回的數據：'+event.data)
            alert(event.data)
        }

        //向分線程worker.js發送消息
        worker.postMessage(number)
        console.log('主線程向分線程發送數據：'+number)
    }

分線程worker.js

function fibonacci(n) {
    return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2)
}

var onmessage = function (event) {
    var number = event.data
    console.log('分線程接收到了主線程發送的數據：'+number)
    //計算
    var result = fibonacci(number)
    postMessage(result)
    console.log('分線程向主線程返回數據：'+result)
}

通過分線程可以實現當用戶輸入一個較大的數值時，分線程進行計算主線程不受影響從而用戶可以對頁面進行操作（對輸入框進行更改操作）。

多線程的不足：

• 現在還沒有被所有瀏覽器支持。
• 分線程（worker.js）里面的代碼不能對DOM進行操作（因為分線程的全局對象不是Windows）。
• 不能跨域 加載js。
• 由於存在主線程與分線程之間的數據交換所以速度慢。

多線程在chorem瀏覽器本地運行時會報錯，所以測試時使用localhost形式的路徑訪問