Web Worker 多线程

最新推荐文章于 2025-07-08 09:26:44 发布

蒲公英芽

最新推荐文章于 2025-07-08 09:26:44 发布

阅读量721

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/Charissa2017/article/details/104682062

html5 专栏收录该内容

10 篇文章

订阅专栏

本文介绍WebWorker如何为JavaScript提供多线程环境，通过子线程处理复杂任务，避免阻塞主线程，确保UI流畅。文章详细解释了如何在主线程与子线程间传递数据，并提供了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web Worker作用

Web Worker 的目的就是为了给 Javascript 创建多线程的环境，允许主线程创建多线程，将一些任务交给别的线程执行。在主线程运行的同时，其他多线程在后台运行，两者互不干扰。使用 postMessage() 可以将数据在主线程和子线程之间进行传输。这样的好处是，一些计算量大的任务，被子线程负担了，不会影响主线程（通常负责UI交互）的加载，页面就会很流畅，不会被阻塞。

子线程一旦创建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。导致子线程比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

Worker 使用

1、在主线程中，新建一个子线程

var work=new Worker("./a.js");

2、主线程可以使用postMessage()，将数据传递给子线程

work.postMessage("aaa");

3、主线程中添加子线程侦听事件message，用来接收子线程返回的数据

 work.addEventListener("message",messageHandler);
 function messageHandler(e){
 	console.log(e);//打印结果如下
 	work.terminate();//任务完成后，关闭子线程
 }

Web Worker
4、创建子线程文件，添加侦听事件message，用来接收主线程返回的数据

 this.addEventListener("message",messageHandler);
 function messageHandler(e){
 	console.log(e.data);
 }

5、子线程中使用postMessage()，将数据传递给主线程

var i=0;
getCount();
function getSum(){
    i++;
    postMessage(i);
    this.close();//执行完成后，关闭自身
}
setTimeout(getSum,2000);