JavaScript 后台处理（Web Worker）
【摘要】
webWorker.html
<html>
<head>
<style>
body {
...
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
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});
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
注意：在Chrome浏览器中常规的Web Worker会报如下错误。
解决方案已写在代码中了，需要借助var url = URL.createObjectURL(new Blob(["("+worker_function.toString()+")()"], {type: 'text/javascript'}));来实现。
文章来源: blog.csdn.net，作者：福州-司马懿，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chy555chy/article/details/54927472
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）