SharedArrayBuffer

agent web worker ShareArrayBuffer postMessage

SharedArrayBuffer SharedArrayBuffer SharedArrayBuffer SharedArrayBuffer ArrayBuffer SharedArrayBuffer

const sab = new SharedArrayBuffer(1024);
worker.postMessage(sab);

worker CPU

SharedArrayBuffer web API

• WebGLRenderingContext.bufferData()
• WebGLRenderingContext.bufferSubData()
• WebGL2RenderingContext.getBufferSubData()

2018 1 5 2020

• Cross-Origin-Opener-Policy same-origin
• Cross-Origin-Embedder-Policy require-corp credentialless

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

worker Window.crossOriginIsolated WorkerGlobalScope.crossOriginIsolated

const myWorker = new Worker("worker.js");

if (crossOriginIsolated) {
  const buffer = new SharedArrayBuffer(16);
  myWorker.postMessage(buffer);
} else {
  const buffer = new ArrayBuffer(16);
  myWorker.postMessage(buffer);
}

postMessage() SharedArrayBuffer

worker Cross-Origin-Embedder-Policy Cross-Origin-Resource-Policy same-site cross-origin Cross-Origin-Resource-Policy same-origin

Cross-Origin-Opener-Policy

API

API

• Atomics
• SharedArrayBuffer web WebAssembly.Memory
• postMessage() API SharedArrayBuffer Window worker postMessage()

WebAssembly

WebAssembly.Memory shared true Memory SharedArrayBuffer postMessage() worker Memory buffer SharedArrayBuffer worker SharedArrayBuffer WebAssembly.Memory

WebAssembly Thread SharedArrayBuffer WebAssembly

SharedArrayBuffer

SharedArrayBuffer SharedArrayBuffer() maxByteLength SharedArrayBuffer growable maxByteLength grow() SharedArrayBuffer 0

SharedArrayBuffer JavaScript WebAssembly Wasm WebAssembly.Memory.prototype.grow()

SharedArrayBuffer

SharedArrayBuffer()

SharedArrayBuffer

SharedArrayBuffer[Symbol.species]

SharedArrayBuffer

SharedArrayBuffer.prototype SharedArrayBuffer

SharedArrayBuffer.prototype.byteLength

SharedArrayBuffer SharedArrayBuffer.prototype.grow()

SharedArrayBuffer.prototype.constructor

SharedArrayBuffer SharedArrayBuffer

SharedArrayBuffer.prototype.growable

SharedArrayBuffer true false

SharedArrayBuffer.prototype.maxByteLength

SharedArrayBuffer

SharedArrayBuffer.prototype[Symbol.toStringTag]

[Symbol.toStringTag] "SharedArrayBuffer" Object.prototype.toString()

SharedArrayBuffer.prototype.grow()

SharedArrayBuffer

SharedArrayBuffer.prototype.slice()

SharedArrayBuffer SharedArrayBuffer begin end begin end

SharedArrayBuffer

const sab = new SharedArrayBuffer(1024);

SharedArrayBuffer

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

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);

• Atomics
• ArrayBuffer
• JavaScript
• Web Workers
• TC39 ecmascript-sharedmem
• JavaScript hacks.mozilla.org2016
• COOP COEP Chrome 2020
• Cross-Origin-Opener-Policy
• Cross-Origin-Embedder-Policy
• Cross-Origin-Resource-Policy
• Window.crossOriginIsolated WorkerGlobalScope.crossOriginIsolated
• Android Chrome 88 Chrome 92 SharedArrayBuffer developer.chrome.google.cn2021