Web Workers處理多線程

最新推荐文章于 2025-06-15 18:14:51 发布

原创最新推荐文章于 2025-06-15 18:14:51 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #function #table #html5 #api #button

HTML5 专栏收录该内容

9 篇文章

订阅专栏

本文介绍HTML5中Web Workers的使用方法及实战案例，包括创建后台线程、线程间的数据传递及线程嵌套等内容，展示了如何利用Web Workers进行高效计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主體頁面：

<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!--
        Web Workers：
        HTML5中新增，用來實現Web平臺上多線程處理功能
        Web Workers可創建一個不會影響前臺處理的後臺線程，並且在這個後臺線程中創建多個子線程
        將可能耗費較長時間的處理交給後臺去執行，對用戶前臺頁面中執行的操作就沒有影響啦

        Web Workers API：
        使用這個API用戶可以很容易的創建後臺線程(HTML5中被稱為worker)
        var worker = new Worker("worker.js");
        參數為需要在後臺線程中執行的腳本文件的URL地址
        注意：後臺線程中不能訪問頁面或窗口對象(document,window)

        可通過發送和接收消息與後臺線程互相傳遞數據，通過Worker對象的onmessage事件句柄的獲取，可接收消息
        worker.onmessage = function(event){
            //處理收到的消息
        };

        使用Worker對象的postMessage方法對後臺線程發送消息(可為文本數據，JSON對象(需用stringify方法轉換為文本))

        線程嵌套：
        線程中可以嵌套子線程
        -->

        <div>
            輸入值：<input type="text" id="num" />
            <button onclick="sum()">計算</button>
        </div>
        <script type="text/javascript">
            //如果用戶輸入較大值100億，將導致瀏覽器彈出提示腳本運行時間過長，不得不停止當前計算
//            function calculate() {
//                var num = parseInt(document.getElementById("num").value, 10);
//                var result = 0;
//                for (var i = 0; i <= num; i++) {
//                    result += i;
//                }

//                alert("合計值為：" + result);
//            };

            //創建執行運算的線程
            var worker = new Worker("calculate.js");
            //接收從線程中傳來的計算結果
            worker.onmessage = function (event) {
                alert("合計值為：" + event.data);
            };

            function sum() {
                var num = parseInt(document.getElementById("num").value, 10);
                //將數值傳給後臺線程計算
                worker.postMessage(num);
            };
        </script>

        <table id="table"></table>
        <script type="text/javascript">
            var intArray = new Array(100);
            var intStr = "";
            for (var i = 0; i < 100; i++) {
                intArray[i] = parseInt(Math.random() * 100);
                if (i != 0) {
                    intStr += ";";
                }

                intStr += intArray[i];
            }

            var worker2 = new Worker("script.js");
            worker2.postMessage(intStr);
            worker2.onmessage = function (event) {
                if (event.data != "") {
                    var j;
                    var k;
                    var tr;
                    var td;
                    var intArray = event.data.split(";");
                    var table = document.getElementById("table");
                    for (var i = 0; i < intArray.length; i++) {
                        j = parseInt(i / 10, 0);
                        k = i % 10;

                        if (k == 0) {
                            tr = document.createElement("tr");
                            tr.id = "tr" + j;
                            table.appendChild(tr);
                        }
                        else {
                            tr = document.getElementById("tr" + j);
                        }

                        td = document.createElement("td");
                        tr.appendChild(td);
                        td.innerHTML = intArray[j * 10 + k];
                        td.style.backgroundColor = "blue";
                        td.style.color = "white";
                        td.width = "30";
                    }
                }
            };
        </script>
    </body>
</html>

calculate.js

onmessage = function (event) {
    var num = event.data;
    var result = 0;
    for (var i = 0; i <= num; i++) {
        result += i;
    }

    //向線程創建源發送消息
    postMessage(result);
};

script.js

onmessage = function (event) {
    var data = event.data;
    var returnStr = "";
    var intArray = data.split(";");

    //篩選3的倍數
    for (var i = 0; i < intArray.length; i++) {
        if (parseInt(intArray[i]) % 3 == 0) {
            if (returnStr != "") {
                returnStr += ";";
            }

            returnStr += intArray[i];
        }
    }

    //向線程創建源發送消息
    postMessage(returnStr);
};