JavaScript 后台处理（Web Worker）

来源：互联网发布：战舰世界烟雾数据编辑：程序博客网时间：2024/06/16 10:55

webWorker.html

<html>    <head>        <style>            body {                width: 100%;            }            table {                border-spacing: 0px;            }            table th, table td {                color: white;                background-color: black;                padding: 5px;                border-right: 1px solid red;                border-bottom: 1px solid red;            }            ul {                position: fixed;                right: 10px;                border-radius: 5px;                border: 1px solid gray;                box-shadow: 3px 3px 10px gray;                list-style: none;                /* 主要是取消掉左边的边距 */                padding: 0px;            }            ul li {                background: -webkit-linear-gradient(gray 90%, white 100%);                color: white;                padding: 5px 10px 5px 10px;            }            ul li:hover{                background: -webkit-linear-gradient(orange 90%, gray 100%);                color: black;                cursor: pointer;            }        </style>    </head>    <body>        <ul id="controlDiv">            <li onclick="normalCreate()">Normal Create</li>            <li onclick="webWorkerCreate()">Web Worker Create</li>            <li onclick="removeAllTable()">Clear All</li>        </ul>        <script>            if(typeof(Worker) != "undefined") {                // Yes! Web worker support!                //firefox可以正常执行                //chrome: Uncaught SecurityError: Failed to create a worker: script at '(path)/webWorker.js' cannot be accessed from origin 'null'.                //var worker = new Worker("./webWorker.js");                //解决方案如下：                function worker_function() {                    var columnCount = 10;                    //注意：onmessage因为是属性所以是小写的,postMessage因为是方法所以是大写的                    onmessage = function(event) {                        var num = parseInt(event.data);                        var rowCount = num / columnCount;                        var lastColumnCount = num % columnCount;                        for(var j=0; j<rowCount; j++) {                            var thisColumnCount = rowCount-j < 1 ? lastColumnCount : columnCount;                            for(var i=0; i<thisColumnCount; i++) {                                //postMessage这里不需要将变量赋值给event,它会自动赋值                                postMessage({"i":i, "j":j});                            }                        }                    }                }                //会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串,你可以像使用一个普通URL那样使用它,比如用在img.src上。                var url = URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'}));                var worker = new Worker(url);                //释放资源                URL.revokeObjectURL(url);                //注意：onmessage因为是属性所以是小写的,postMessage因为是方法所以是大写的                worker.onmessage = function(event) {                    var i = event.data.i;                    var j = event.data.j;                    var table = document.getElementById("table");                    if(!table) {                        table = createAndAddTable();                    }                    if(i === 0) {                        table.insertRow(j);                    }                    var cell = table.rows[j].insertCell();                    cell.innerHTML = "(" + i + "," + j + ")"                }                worker.onerror = function(e){                    //打印出错消息                    console.log(e.message);                    //中断与子线程的联系                    worker.terminate();                }                //创建并添加table                function createAndAddTable() {                    table = document.createElement("table");                    table.id = "table";                    document.body.appendChild(table);                    return table;                }                //删除body内的所有table                function removeAllTable() {                    var tables = document.getElementsByTagName("table");                    if(tables && tables.length > 0) {                        for(var i=tables.length-1; i>=0; i--) {                            document.body.removeChild(tables[i]);                        }                    }                }                //待创建的单元格数目                var cellCount = 1000000;                function normalCreate() {                    removeAllTable();                    var table = createAndAddTable();                    var columnCount = 10;                    var rowCount = cellCount / columnCount;                    var lastColumnCount = cellCount % columnCount;                    for(var j=0; j<rowCount; j++) {                        var thisColumnCount = rowCount-j < 1 ? lastColumnCount : columnCount;                        var row = table.insertRow();                        for(var i=0; i<thisColumnCount; i++) {                            var cell = row.insertCell();                            cell.textContent = "(" + i + "," + j + ")"                        }                    }                }                function webWorkerCreate() {                    removeAllTable();                    worker.postMessage(cellCount);                }            } else {                alert("Sorry! No Web Worker support...");            }        </script>    </body></html>

webWorker.js

var columnCount = 10;//注意：onmessage因为是属性所以是小写的,postMessage因为是方法所以是大写的onmessage = function(event) {    var num = parseInt(event.data);    var rowCount = num / columnCount;    var lastColumnCount = num % columnCount;    for(var j=0; j<rowCount; j++) {        var thisColumnCount = rowCount-j < 1 ? lastColumnCount : columnCount;        for(var i=0; i<thisColumnCount; i++) {            //postMessage这里不需要将变量赋值给event,它会自动赋值            postMessage({"i":i, "j":j});        }    }}

这里写图片描述

注意：在Chrome浏览器中常规的Web Worker会报如下错误。

这里写图片描述

解决方案已写在代码中了，需要借助var url = URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'}));来实现。

1 0