我要评论概述
javascript的执行环境是单线程的，也就是一次只能执行一个任务。如果遇到多个任务时，只能排队依次执行。
在html5中，可以使用web worker创建一个后台线程执行一个耗时任务，而不会影响页面响应。
简单使用
web worker技术基本原理就是：在当前javascript的主线程中，使用worker()构造函数新建一个worker实例，然后加载某一个javascript文件，发送给一个后台线程来处理（注意，这里是后台线程）。
worker.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//创建worker
var worker = new worker("worker.js");
//向后台线程发送数据
worker.postmessage("hello world");
//监听后台线程返回的数据
worker.onmessage = function(e) {
console.log("前台线程收到：" + e.data);
};
</script>
</head>
<body>
</body>
</html>
worker.js
onmessage = function(e) {
//接收前台发来的数据
var d = e.data;
console.log("后台线程收到：" + d);
var str = d.split("").reverse().join("");
postmessage(str);
};
处理复杂数据
worker.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var worker;
window.onload = function() {
var start = document.getelementbyid("start");
var stop = document.getelementbyid("stop");
start.onclick = function() {
worker = new worker("worker.js")
worker.onmessage = function(e) {
console.log("前台接收：" + e.data);
}
}
stop.onclick = function() {
worker.terminate();
}
}
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
</body>
</html>
worker.js
var i = 0;
function handletask() {
i++;
console.log("handle:" | i);
postmessage(i);
}
setinterval(handletask, 1000);
到此这篇关于html5 web worker(多线程处理)的文章就介绍到这了,更多相关html5 web worker内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论