JS Worker 多线程与实现

一位技术不高的猿人

已于 2024-02-26 15:26:21 修改

阅读量916

点赞数 6

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-02-19 22:10:02 首次发布

本文链接：https://blog.csdn.net/m0_74107471/article/details/136178295

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了JavaScriptWorker的工作原理，它如何在浏览器的单线程环境中开辟独立线程以优化界面交互和任务资源分配。还详细讲解了如何创建、使用和管理Worker，以及其间的通信机制。

摘要由CSDN通过智能技术生成

经典一套首先什么是Worker？

Worker 主要作用是开辟一条独立的线程，浏览器中的JS执行机制是单线程 - 详情请看上篇文章，往往在执行到一些耗时且和当下并不相关的任务时就体现到了 Worker 的重要性，当然像定时器 setTimeout 之类延迟函数也可以使用，不过这些是建立在单线程的基础上触发，深层意义上并不能算是多线程，所谓的多线程就是新建立一条隧道并且不受主线程上下文影响，并且两者之间可以进行通讯。

worker 优化了哪些？

界面交互层

某些耗时较长影响界面，

任务资源分配

合理利用 worker，将不同类型、时长的任务分配给不同子线程，实现 CPU 资源合理利用，代码执行时间得到很大提升，数据量过大过程逻辑过与复杂也能解决。

如何使用 Worker

terminate —— 主线程中关闭

close —— 子线程中关闭

onmessage —— 接收信息

postMessage —— 发送信息

例如：

index.js 主线程

worker.js 子线程

在使用中需要注意 worker url路径必须为三同（协议 IP 端口），并且本地路径不可是file类型引入

index.js

首先需要在主线程中创建 Worker 对象，传入需要执行的文件路径，使用postMessage发功数据源，并监听 onmessage 函数接收子线程返回的结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        let worker = new Worker('./worker.js');

        worker.postMessage({
            name:50,
            list:['运动','唱','跳','篮球'],
        })

        worker.onmessage((result) => {
            // result 为子线程返回数据
        })

    </script>
</body>
</html>

worker.js

使用 self 接收主线程传入的数据，并且在逻辑处理完成时发送给主线程。

注意：此处使用 self，是 window.self 缩写，作用是获取全局window中的 worker，因此也可以使用 window.worker1 或 window.worker2 来实现多个子线程分配任务，当然此处要在主线程中定义清楚。

self.onmessage((result) => {
     // 处理完数据并返回
     // 处理过程忽略 凭空想象吧
     self.postMessage(result)
})

一位技术不高的猿人

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
JS Worker 多线程与实现

Worker 主要作用是开辟一条独立的线程，浏览器中的JS执行机制是单线程 - 详情请看，往往在执行到一些耗时且和当下并不相关的任务时就体现到了 Worker 的重要性，当然像定时器 setTimeout 之类延迟函数也可以使用，不过这些是建立在单线程的基础上触发，深层意义上并不能算是多线程，所谓的多线程就是新建立一条隧道并且不受主线程上下文影响，并且两者之间可以进行通讯。
复制链接

扫一扫

专栏目录