HTML5 Web Worker(多线程处理)
发布时间：2023-01-12 16:23:18 作者：xiangxiongfly915 
我要评论
我要评论在HTML5中，可以使用Web Worker创建一个后台线程执行一个耗时任务，本文主要介绍了HTML5 Web Worker(多线程处理)，感兴趣的可以了解一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
概述
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内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
这篇文章主要介绍了HTML5之多线程(Web Worker)的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-02- 这篇文章主要介绍了浅谈Html5多线程开发之WebWorkers的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-02
- 这篇文章主要介绍了浅谈HTML5 Web Worker的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-05
HTML5之web workers_动力节点Java学院整理
专用 Web Worker (Dedicated Web Worker) 提供了一个简单的方法使得 web 内容能够在后台运行脚本。下面通过本文给大家分享HTML5之web workers的相关知识，需要的的朋友参考2017-07-17- 这篇文章主要介绍了针对HTML5的Web Worker使用攻略,特别是结合worker拿手的JS使用起来十分有效,需要的朋友可以参考下2015-07-12
- Web Workers 是在HTML5中新增的，用来在web应用程序中实现后台处理的一种技术2013-04-24
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
HTML5 中的 Web Worker 可以分为两种不同线程类型，一个是专用线程 Dedicated Worker，一个是共享线程 Shared Worker。两种类型的线程各有不同的用途,感兴趣的朋友可以了解2013-01-31
最新评论