HTML5 Web Worker(多线程处理)

五花肉向上 · 发表于 2024-4-20 08:07:40

概述

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);<font face="Tahoma"><span style="white-space: normal;"> </span></font>

复制代码

到此这篇关于HTML5 Web Worker(多线程处理)的文章就介绍到这了,更多相关HTML5 Web Worker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

邓桑旦 · 发表于 2024-5-23 19:59:53

我不太确定，可能需要再确认一下。

甄姬14 · 发表于 2024-6-8 10:35:50

这个话题真是有趣，我也对它感兴趣。

z半夏匸 · 发表于 2024-6-15 01:50:14

看了LZ的帖子，我只想说一句很好很强大！

烈酒醉人. · 发表于 2024-7-6 09:14:06

我不太确定，可能需要再确认一下。

就连这个了 · 发表于 2024-7-31 17:02:12

感谢分享，受益匪浅！

MC_MCisBEST · 发表于 2024-8-1 22:01:45

确实牛逼

夏博年 · 发表于 2024-8-6 06:10:08

谢谢你分享这个信息

bai766204303 · 发表于 2024-8-11 02:52:30

确实牛逼

不可以那里脏 · 发表于 2024-8-21 01:12:04

太棒了！感谢分享这个信息！

		自动登录	找回密码
密码			立即注册

HTML5 Web Worker(多线程处理)

本帖子中包含更多资源

热心会员

付费会员