JS多線程之Web Worker

本文轉載自查看原文 2019-10-17 10:34 319

什么是Web Worker

　　web worker 是運行在后台的 JavaScript，不會影響頁面的性能。

　　當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。

　　web worker 是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行。

怎么用

HTML頁面代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker</title>
</head>
<body>
<p>計數：<output id="result"></output></p>
<button onclick="startWorker()">開始計數</button>
<button onclick="endWorker()">結束計數</button>
<script>
    var w;  // 此時的w是undefined

    function startWorker() {
        // 判斷當前瀏覽器是否支持Worker
        if(window.Worker){
            // 判斷是否有w
            if(typeof(w) == 'undefined'){
                // 創建一個新的Worker對象，他會去執行demoWorkers.js這個文件下的JS代碼
                w = new Worker('demoWorkers.js');
            }
            // 給Worker添加一個事件監聽器，Worker子線程返回消息時被調用，返回的數據在data里
            w.onmessage = function (event) {
                console.log(event);
                console.log(event.data);
                document.getElementById('result').innerHTML = event.data;
            }
        }else{
            // 瀏覽器不支持Worker要做的事
            document.getElementById('result').innerHTML = '不支持Web Worker'
        }
    }
    function endWorker() {
        // 終止 web worker，並釋放瀏覽器/計算機資源
        w.terminate();
        w = undefined;
    }
</script>

</body>
</html>

子線程demoWorkers.js代碼

var i = 0;
function timeCount() {
    i = i+1;
    // postMessage()方法-它用於向HTML頁面傳回一段消息
    postMessage(i);
    setTimeout('timeCount()', 500)
}

timeCount();

效率對比

沒有使用WebWorker：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>100000000以內累加總和為：<output id="result"></output></p>
<button onclick="startSum()">開始計算</button>

<script>
    function startSum() {
        console.time('1');
        var sum = 0;
        for(var i = 0;i<100000000;i++){
            sum += i
        }
        document.getElementById('result').innerHTML=sum;
        console.timeEnd('1');
    }
</script>

</body>
</html>

然后是耗時如下：

使用Web Worker：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>100000000以內累加總和為：<output id="result"></output></p>
<button onclick="startSum()">開始計算</button>
<script>

// Web Worker
    function startSum() {
        console.time('1');
        var w;
        if(window.Worker){
            if(typeof(w) == 'undefined'){
                w = new Worker('sumWorker.js')
            }
            w.onmessage = function (event) {
                document.getElementById('result').innerHTML = event.data;
            };
            console.timeEnd('1');
        }else{
            document.getElementById('result').innerHTML = '該瀏覽器不支持Web Worker'
        }
    }
</script>

</body>
</html>

sumWorker.js

var sum = 0;
for(var i = 0;i<100000000;i++){
    sum += i
}
postMessage(sum);

耗時如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 web Worker使js實現‘多線程’？ JavaScript多線程之HTML5 Web Worker Web Worker 多線程（六） js多線程（worker） js多線程的實現-Worker 【worker】js中的多線程 Web Worker javascript多線程編程（一） Web Worker javascript多線程編程（二）深入 HTML5 Web Worker 應用實踐：多線程編程使用Actor模型管理Web Worker多線程