SharedArrayBuffer
SharedArrayBuffer
对象用来表示一个通用的、固定长度的原始二进制数据缓冲区,类似于 ArrayBuffer
对象,它们都可以用来在共享内存(shared memory)上创建视图。与 ArrayBuffer
不同的是,SharedArrayBuffer
不能被转移。
描述
分配及共享内存
为了将一个 SharedArrayBuffer
对象从一个用户代理共享到另一个用户代理(另一个页面的主进程或者当前页面的一个 worker
)从而实现共享内存,我们需要运用 postMessage
和结构化克隆算法。
结构化克隆算法接收 SharedArrayBuffers
对象,或被映射到一个新的 SharedArrayBuffers
对象上的 TypedArrays
对象。在这两种情况下,这个新的 SharedArrayBuffer
对象会被传递到目标用户代理的接收函数上,从而在目标用户代理产生一个新的私有 SharedArrayBuffer
对象(正如 ArrayBuffer
一样)。但是,这两个 SharedArrayBuffer
对象指向的共享数据块其实是同一个,所以某一代理对数据块的修改在另一个代理中可见。
js
var sab = new SharedArrayBuffer(1024);
worker.postMessage(sab);
通过原子操作更新及同步共享内存
共享内存能被同时创建和更新于 worker
线程或主线程。依赖于系统(CPU、操作系统、浏览器),变化传递给所有上下文环境需要一段时间。因此需要通过原子操作来进行同步。
接受 SharedArrayBuffer 对象的 API
安全需求
为应对幽灵漏洞,所有主流浏览器均默认于 2018 年 1 月 5 日禁用 SharedArrayBuffer。在 2020 年,一种新的、安全的方法已经标准化,以重新启用 SharedArrayBuffer
。通过一些安全措施,postMessage()
将不再抛出有关 SharedArrayBuffer
对象的异常,跨线程共享内存也变得可用:
作为基准需求,你的文档需处于安全上下文中。
对于顶级文档,需要设置两个 HTTP 消息头以跨域隔离你的站点:
Cross-Origin-Opener-Policy
(en-US) 设置为same-origin
(保护源站免受攻击)Cross-Origin-Embedder-Policy
设置为require-corp
(保护源站免受侵害)
Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp
为检查跨域隔离是否生效,你可以检查 crossOriginIsolated
属性在窗口和 worker
上下文中是否可用:
js
if (crossOriginIsolated) {
// Post SharedArrayBuffer
} else {
// Do something else
}
参阅 Planned changes to shared memory (en-US),以了解共享内存在浏览器中的变更计划(例如,Firefox 79)。
始终使用 new 运算符来构造 SharedArrayBuffer
构造函数
-
创建一个
SharedArrayBuffer
对象。
实例属性
-
数组的大小(以字节为单位)。这是在构造数组时建立的,不能更改(只读)。
实例方法
-
返回一个新的
SharedArrayBuffer
,其为源数组从begin
字节到end
字节(不含end
字节)的拷贝。若begin
或end
为负数,则表示从数组末尾开始的索引。
示例
创建一个新的 SharedArrayBuffer
js
var sab = new SharedArrayBuffer(1024);
截取 SharedArrayBuffer
js
sab.slice(); // SharedArrayBuffer { byteLength: 1024 }
sab.slice(2); // SharedArrayBuffer { byteLength: 1022 }
sab.slice(-2); // SharedArrayBuffer { byteLength: 2 }
sab.slice(0, 1); // SharedArrayBuffer { byteLength: 1 }
在 WebGL buffer 中使用
js
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, sab, gl.STATIC_DRAW);
规范
Specification |
---|
ECMAScript Language Specification # sec-sharedarraybuffer-objects |
浏览器兼容性
BCD tables only load in the browser