JavaScript 后台处理（Web Worker）

2024-04-27 15:14:33

字体：大中小

来源：转载

供稿：网友

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>