主线程与 Worker 间结构化克隆算法 (Structured Clone) 原理

阿伟吖_6551

阿伟吖_6551

2026-07-14

1013人浏览

原创

结构化克隆通过序列化→ipc传输→反序列化三步实现“复制不共享”:发送方转为二进制流,跨线程传输后,接收方重建独立实例,内存与引用完全隔离。

主线程与 worker 间结构化克隆算法 (structured clone) 原理

主线程与 Worker 之间通过 postMessage 通信时,浏览器自动启用结构化克隆算法(Structured Clone Algorithm),它不是手动调用的函数,而是底层机制——每次传数据,都会生成一份独立、类型保真、无副作用的副本,双方内存完全隔离。

它怎么做到“复制但不共享”?

整个过程分三步,在不同线程中独立完成:

  • 序列化:发送方(如主线程)遍历对象图,识别可克隆类型(Object、Map、Date、ArrayBuffer 等),将其转为平台无关的内部二进制表示;不可克隆项(如函数、DOM 节点、Error)直接报 DataCloneError
  • 传输:该二进制流经内核级 IPC 通道(如 Chromium 的 Mojo)传递,不经过 JS 引擎,避免阻塞主线程
  • 反序列化:接收方(如 Worker)用相同逻辑重建对象——新 Date 实例、新 Map 实例、新 ArrayBuffer 内存块,所有引用关系还原,但与原对象物理地址不同

哪些类型能被正确克隆?

现代浏览器(Chrome 98+、Firefox 94+、Safari 15.4+)支持以下类型,且保持原始语义:

  • 基础值:null、boolean、number、string、bigint(部分需开启 flag)
  • 复合结构:Object、Array、Date、RegExp、Map、Set、TypedArray、DataView
  • 二进制与媒体:ArrayBuffer、Blob、File、ImageData、ImageBitmap

不支持的类型包括:function、Error、Promsie、Proxy、WeakMap、document、window、console,传入会报错或静默丢弃。

Zoom Workplace
Zoom Workplace

Zoom Workplace是一款AI办公效率工具,Zoom推出的AI办公协作和交流沟通平台。

下载

为什么它比 JSON 更可靠?

JSON 只是文本协议,天然丢失类型和行为:

  • Date 变成字符串,失去 .getTime() 方法
  • RegExp 变成空对象,正则逻辑彻底消失
  • Map/Set 变成普通 Object,键值对关系与迭代顺序全丢
  • 循环引用直接崩溃,无法处理

结构化克隆在引擎层直操作 JS 值内部表示,跳过字符串编码/解析,保留原型链、内部属性(如 RegExp 的 flags)、引用关系(Map 中对象 key 仍对应同一逻辑 key),并用映射表安全处理循环引用。

大数组怎么避免拷贝开销?

当传输大量二进制数据(如图像像素、音频缓冲)时,普通克隆会双倍占用内存并消耗 CPU。此时应使用 Transferable Objects:

  • 只适用于 ArrayBuffer、MessagePort、ImageBitmap 等可转移对象
  • 语法: worker.postMessage(buffer, [buffer])
  • 执行后,主线程的 buffer 立即 detached(byteLength === 0),Worker 收到的是同一内存块的所有权,零拷贝
  • 注意:这不是共享内存,而是单向移交;后续再访问原 buffer 会静默失败

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2463

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5303

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6350

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5938

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

843

5

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

265

5

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.04

406

5

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.24

375

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.7万人学习