您好!欢迎访问家园网-www.jy.wang!

家园网

创建嵌套的Worker线程并传递数据

网络 作者:本站 点击:

创建嵌套的Worker线程并传递数据:


    var worker;
    //创建子线程
    worker=new Worker("worker.js");
    //把随机数组提交给子线程进行挑选工作
    worker.postMessage(JSON.stringify(intArray));


这几行代码是在创建嵌套的Worker线程并传递数据。让我详细解释每一部分:

代码逐行解析

var worker;
  • 声明一个变量worker,用于存储Worker线程对象的引用

  • 先声明后赋值是JavaScript的常见写法

//创建子线程worker = new Worker("worker.js");
  • new Worker("worker.js") 创建一个新的Web Worker线程

  • 参数"worker.js"指定线程要执行的JavaScript文件

  • 这会加载并执行worker.js文件中的代码

  • 这是一个独立的后台线程,不会阻塞主页面


//把随机数组提交给子线程进行挑选工作
worker.postMessage(JSON.stringify(intArray));
  • worker.postMessage() 用于向Worker线程发送消息

  • JSON.stringify(intArray) 将数组转换为JSON字符串

  • 因为Web Workers通过消息传递通信,数据会被复制而不是共享

  • 只能传递可序列化的数据(不能传递函数、DOM元素等)

Worker通信机制

为什么需要JSON.stringify

Web Workers使用结构化克隆算法(Structured Clone Algorithm)复制数据,而不是共享内存。JSON.stringify的作用:

  1. 确保数据可序列化:将复杂对象转为字符串

  2. 避免引用问题:传递的是数据的副本,不是引用

  3. 兼容性:某些浏览器对直接传递数组有更好的支持

数据传递过程

// 原始数据
intArray = [45, 67, 23, 89, 12, 56, ...]
// JSON.stringify后
"[45,67,23,89,12,56,...]"
// 通过postMessage发送
worker.postMessage("[45,67,23,89,12,56,...]")
// 在worker.js中接收
onmessage = function(event) {
    var intArray = JSON.parse(event.data);  // 还原数组
}

完整的线程嵌套结构

主线程 (HTML页面)
    │
    ├── 创建worker1 → script.js
    │       │
    │       ├── 生成100个随机数
    │       ├── 创建worker2 → worker.js
    │       │       │
    │       │       ├── 接收随机数
    │       │       ├── 筛选5的倍数
    │       │       └── 返回结果
    │       │
    │       └── 接收结果并转发给主线程
    │
    └── 显示结果在表格中

Worker的特点

  1. 独立线程:在后台运行,不阻塞UI

  2. 消息驱动:通过onmessagepostMessage通信

  3. 数据复制:传递的数据会被复制,不是共享

  4. 受限环境:不能访问DOM、window、document等

实际执行流程

// script.js中
var intArray = [45, 23, 67, 89, 12, 34, 56, 78, 90, 11, ...];
// 创建Worker线程
var worker = new Worker("worker.js");
// 准备要传递的数据
var jsonData = JSON.stringify(intArray);
// jsonData = "[45,23,67,89,12,34,56,78,90,11,...]"
// 发送数据
worker.postMessage(jsonData);
// worker.js中接收
onmessage = function(event) {
    // event.data 就是 "[45,23,67,89,12,34,56,78,90,11,...]"
    var intArray = JSON.parse(event.data);
    // 恢复为真正的数组 [45,23,67,89,12,34,56,78,90,11,...]
    
    // 开始筛选5的倍数...
}

为什么使用嵌套Worker?

  1. 任务分工

    • script.js:负责生成数据和协调

    • worker.js:负责具体的筛选计算

  2. 并行处理:两个线程可以同时工作

  3. 职责分离:每个文件专注于单一任务

  4. 可复用性:worker.js的筛选逻辑可以独立使用

这种嵌套Worker的设计模式在处理复杂计算时非常有用,可以充分利用多核CPU的优势,同时保持代码的模块化和可维护性。

标签: