Atomics 是 HTML5 为 SharedArrayBuffer 提供的原子操作方法,用于多线程下安全读写共享内存、避免竞态;必须配合 SharedArrayBuffer 使用,不支持普通数组;提供 load/store/add/compareExchange/wait/notify 等操作,具备不可中断与内存屏障特性;需服务端启用跨域隔离策略方可使用。

Atomics 是 HTML5 中为 SharedArrayBuffer 提供的一组原子操作方法,用于在多线程(如 Web Worker)环境下安全读写共享内存,避免竞态条件,从而保证数据一致性。
SharedArrayBuffer 是原子操作的前提
Atomics 不能直接作用于普通数组(如 Array 或 TypedArray),必须配合 SharedArrayBuffer 使用。SharedArrayBuffer 允许多个线程(主线程与 Worker)共享同一块内存区域,但裸访问会引发数据竞争——Atomics 就是为此而生的同步工具。
- 创建共享内存:用 new SharedArrayBuffer(1024) 分配字节长度;
- 绑定视图:用 new Int32Array(sharedBuf) 等类型化视图读写;
- 切记:仅用 Atomics 方法(如 Atomics.load()、Atomics.store())访问该视图,普通赋值或读取仍不安全。
核心原子操作及其一致性保障机制
Atomics 提供的每个方法都具备“不可中断+内存序控制”特性,确保操作在硬件/JS引擎层面是原子的,并隐式包含内存屏障(memory barrier),防止指令重排导致的可见性问题。
- Atomics.load(ta, index):安全读取,等价于 volatile 读,保证看到最新写入值;
- Atomics.store(ta, index, value):安全写入,等价于 volatile 写,确保其他线程能及时观察到;
- Atomics.add(ta, index, delta) 和 Atomics.compareExchange(ta, index, oldVal, newVal):典型 CAS 操作,用于实现锁、计数器、无锁队列等;
- Atomics.wait() / Atomics.notify():配合 while 循环实现轻量级条件等待(类似 futex),避免忙等,需搭配 Atomics.load() 检查条件。
典型使用模式:自旋锁与条件同步
Web Workers 中无法使用 mutex 或 await lock,常用 Atomics 构建用户态同步原语:
立即学习“前端免费学习笔记(深入)”;
- 自定义锁:用 Int32Array(sharedBuf)[0] 表示锁状态(0=空闲,1=占用),通过 Atomics.compareExchange() 尝试获取;
- 生产者-消费者:用两个计数器(head/tail)加 Atomics.wait()/notify() 实现阻塞式队列;
- 注意:Atomics.wait() 只能在非主线程中调用(Worker),且必须在 while 循环中检查条件是否真正满足,防止虚假唤醒。
兼容性与启用限制
SharedArrayBuffer 和 Atomics 属于高危能力,现代浏览器默认禁用,需显式开启跨域隔离策略:
- 服务端响应头必须包含:Cross-Origin-Embedder-Policy: require-corp 与 Cross-Origin-Opener-Policy: same-origin;
- 页面内脚本需明确声明 crossorigin 属性(如 script 标签);
- 可通过 if (typeof SharedArrayBuffer !== 'undefined') 检测支持性,降级为 MessageChannel 通信。


















