介紹

• web workers是HTML5提供的一個(gè)JavaScript多線程解決方案
• 我們可以將一些大計(jì)算量的代碼交由web worker運(yùn)行而不凍結(jié)用戶界面
• 但是子線程完全受主線程控制，且不得操作dom。所以，這個(gè)新標(biāo)準(zhǔn)并沒有改變JavaScript單線程的本質(zhì)。

相關(guān)：

1.h5規(guī)范提供了js分線程的實(shí)現(xiàn)，取名為web workers
2.相關(guān)API

• woker：構(gòu)造函數(shù)，加載分線程執(zhí)行的js文件
• Woker.prototype.onmessage:用于接收另一個(gè)線程的回調(diào)函數(shù)
• Woker.prototype.postMessage:向另一個(gè)線程發(fā)送消息

3. 不足

• worker內(nèi)代碼不能操作DOM(更新UI)
• 不能跨域加載JS
• 不是每個(gè)瀏覽器都支持這個(gè)新特性

使用

• 創(chuàng)建在分線程執(zhí)行的js文件
• 在主線程中的js中發(fā)消息并設(shè)置回調(diào)

    <input type="text" id="number" value="30">
        <button id="btn1">主線程計(jì)算fibonacci值</button>
        <button id="btn2">分線程計(jì)算fibonacci值</button>

        <script type="text/javascript">
            var worker = new Worker("./worker·2.js");
            document.getElementById("btn2").onclick = function() {
                var inputVal = document.getElementById("number").value;
                worker.postMessage(inputVal);
                worker.onmessage = function(event) {
                    console.log(event.data);
                }
            }
        </script>

worker2.js:

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

var onmessage = function(event) {
    console.log(event);
    var n = parseInt(event.data, 10);
    postMessage(fibonacci(n));
};

貼上相關(guān)API
分線程接收

var onmessage =function (event){ //不能用函數(shù)聲明
    console.log('onMessage()22');
    var upper = event.data.toUpperCase();//通過event.data獲得發(fā)送來的數(shù)據(jù)
    postMessage( upper );//將獲取到的數(shù)據(jù)發(fā)送會(huì)主線程
}

在主線程設(shè)置

創(chuàng)建一個(gè)Worker對(duì)象并向它傳遞將在新線程中執(zhí)行的腳本的URL
var worker = new Worker("worker.js");  
//接收worker傳過來的數(shù)據(jù)函數(shù)
worker.onmessage = function (event) {     
    console.log(event.data);             
};
//向worker發(fā)送數(shù)據(jù)
worker.postMessage("hello world");    

相應(yīng)圖解：

image.png