SharedArrayBuffer

Description

Allouer et partager la mmoire

Pour partager une zone mmoire entre plusieurs objets SharedArrayBuffer d'un agent un autre (ici un agent correspond au programme principal de la page web ou l'un de ses web workers), on utilisera postMessage() et le clonage structur.

L'algorithme de clonage structur permet d'envoyer des objets SharedArrayBuffers et TypedArrays vers des objets SharedArrayBuffer. Dans les deux cas, l'objet SharedArrayBuffer est transmis au rcepteur, ce qui cre un nouvel objet SharedArrayBuffer, priv, au sein de l'agent qui reoit (comme avec ArrayBuffer). Cependant, le bloc de mmoire rfrenc par les deux objets SharedArrayBuffer est bien le mme bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications.

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

Mettre jour et synchroniser la mmoire partage avec les oprations atomiques

La mmoire partage peut tre cre et mise jour de faon simultane entre les workers et le thread d'excution principal. Selon le systme (le processeur, le systme d'exploitation, le navigateur), cela peut prendre du temps avant que le changement soit propag sur l'ensemble des contextes. Pour que la synchronisation s'effectue, on doit utiliser des oprations atomiques.

Les API qui utilisent des objets SharedArrayBuffer

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

Contraintes de scurit

La mmoire partage et les chronomtres de haute prcision ont t dsactivs dbut 2018 suite la vulnrabilit Spectre. En 2020, une nouvelle approche, scurise, a t mise en place afin de ractiver la mmoire partage. En suivant quelques rgles de scurit, postMessage() ne lve plus d'exception pour les objets SharedArrayBuffer et une mmoire partage entre les threads est disponible.

Pour commencer, le document doit tre mis disposition dans un contexte scuris.

Pour les documents de plus haut niveau, deux en-ttes HTTP doivent tre utiliss pour isoler le site des origines tierces :

• Cross-Origin-Opener-Policy avec la valeur same-origin (ce qui protge l'origine des ventuels attaquants)
• Cross-Origin-Embedder-Policy avec la valeur require-corp (ce qui protge les ventuelles victimes de votre origine)

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

Pour vrifier si l'isolation envers les origines tierces a russi, vous pouvez vrifier la proprit crossOriginIsolated qui est disponible dans les contextes de la fentre et des workers :

if (crossOriginIsolated) {
  // on poste le SharedArrayBuffer
} else {
  // on fait autre chose
}

Voir aussi les changements prvus quant la mmoire partage pour les diffrents navigateurs.

Obligation d'utiliser l'oprateur new

Les constructeurs SharedArrayBuffer doivent tre utiliss avec l'oprateur new. Si on appelle un constructeur SharedArrayBuffer comme une fonction, sans new, cela lvera une exception TypeError.

var sab = SharedArrayBuffer(1024);
// TypeError: appeler le constructeur natif SharedArrayBuffer sans
// new est interdit

var sab = new SharedArrayBuffer(1024);

Constructeur

SharedArrayBuffer()

Cre un nouvel objet SharedArrayBuffer.

Proprits des instances

SharedArrayBuffer.prototype.byteLength

La taille du tableau, exprime en octets. Celle-ci est dtermine la construction du tableau et ne peut pas tre modifie par la suite, elle est accessible en lecture seule uniquement.

Mthodes des instances

SharedArrayBuffer.prototype.slice(debut, fin)

Renvoie un nouvel objet SharedArrayBuffer dont le contenu et une copie des octets de l'objet SharedArrayBuffer courant entre l'indice de dbut (inclus) et l'indice de fin (exclus). Si l'un des deux indices est ngatif, il est relatif la fin du tableau plutt qu'au dbut.

Exemples

Crer un nouvel objet SharedArrayBuffer

let sab = new SharedArrayBuffer(1024);

Dcouper un objet 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 }

Utiliser un tampon WebGL

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

Spcifications

Compatibilit des navigateurs

Voir aussi

• Atomics
• ArrayBuffer
• Les tableaux typs en JavaScript
• Les Web Workers
• parlib-simple une bibliothque qui fournit des abstractions pour synchroniser et distribuer des tches
• La mmoire partage un rapide tutoriel (en anglais)
• A Taste of JavaScript's New Parallel Primitives Mozilla Hacks (en anglais)