创建嵌套的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的作用:
确保数据可序列化:将复杂对象转为字符串
避免引用问题:传递的是数据的副本,不是引用
兼容性:某些浏览器对直接传递数组有更好的支持
数据传递过程
// 原始数据
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的特点
独立线程:在后台运行,不阻塞UI
消息驱动:通过
onmessage和postMessage通信数据复制:传递的数据会被复制,不是共享
受限环境:不能访问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?
任务分工:
script.js:负责生成数据和协调
worker.js:负责具体的筛选计算
并行处理:两个线程可以同时工作
职责分离:每个文件专注于单一任务
可复用性:worker.js的筛选逻辑可以独立使用
这种嵌套Worker的设计模式在处理复杂计算时非常有用,可以充分利用多核CPU的优势,同时保持代码的模块化和可维护性。