SharedArrayBuffer 是 HTML5 中实现主线程与 Worker 线程真正共享内存的核心机制，需配合 Atomics 同步、满足跨域隔离策略，并通过 transfer list 传递，用于高效无拷贝通信。
SharedArrayBuffer 是 HTML5 中实现主线程与 Worker 线程间**真正共享内存**的核心机制，它让多个线程能直接读写同一块底层内存（ArrayBuffer），从而避免数据拷贝、提升性能。但需注意：它不能单独使用，必须配合 Atomics 进行同步，且受严格的跨域安全策略限制。
SharedArrayBuffer 的创建与传递
SharedArrayBuffer 本身不可直接读写，需通过 Int32Array、Float64Array 等视图操作。主线程创建后，必须用 postMessage 以转移方式（transfer list）传给 Worker，否则会报错：
- 主线程中：
const sab = new SharedArrayBuffer(1024); const ia = new Int32Array(sab); - 传递时：
worker.postMessage({data: ia}, [sab]);—— sab 必须出现在 transfer list 中 - Worker 中：
onmessage = ({data: {data}}) => { const ia = data; };，此时 ia 指向同一块共享内存
必须使用 Atomics 进行线程安全访问
普通数组操作（如 ia[0] = 1）在多线程下是非原子的，可能引发竞态。所有读写和同步操作都应通过 Atomics API：
- 写入：
Atomics.store(ia, 0, 42) - 读取：
Atomics.load(ia, 0) - 条件等待：
Atomics.wait(ia, 0, 0)（阻塞直到位置 0 值变为非 0） - 唤醒等待：
Atomics.notify(ia, 0, 1)（唤醒最多 1 个在位置 0 等待的线程） - 加法并返回原值：
Atomics.add(ia, 0, 1)
启用 SharedArrayBuffer 的必要条件
现代浏览器默认禁用 SharedArrayBuffer，防止 Spectre 类攻击。启用需满足跨域隔离（Cross-Origin Isolation）：
- 服务器必须返回两个响应头：
Cross-Origin-Embedder-Policy: require-corp和Cross-Origin-Opener-Policy: same-origin - 页面内所有资源（脚本、iframe、图片等）需同源或明确声明
crossorigin - 可通过
self.crossOriginIsolated在控制台检查是否生效，为true才可创建 SharedArrayBuffer
典型协作模式：生产者-消费者循环
一个常见场景是主线程控制节奏，Worker 持续计算并写入结果，主线程按需读取：
- 共享内存布局：前 4 字节存状态标志（0=空闲，1=就绪，2=处理中），后续存数据
- Worker 计算完调用
Atomics.store(sab, 0, 1)，再Atomics.notify(sab, 0) - 主线程用
Atomics.wait(sab, 0, 0)阻塞等待，收到通知后Atomics.load读数据，再store(..., 0)重置为 0 - 全程避免轮询，降低 CPU 占用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
