HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
View in English Always switch to English
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2017.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La méthode statique WebAssembly.instantiate() permet de compiler et d'instancier du code WebAssembly. Cette fonction possède deux formes :
WebAssembly.instantiate()
ArrayBuffer
WebAssembly.Module
WebAssembly.Instance
Attention : Tant que faire se peut, utiliser la méthode WebAssembly.instantiateStreaming(), car elle est plus efficace et récupère, compile et instancie un module en une seule étape à partir du bytecode et il n'est pas nécessaire de passer par une conversion en ArrayBuffer.
WebAssembly.instantiateStreaming()
WebAssembly.instantiate(bufferSource, importObject);
bufferSource
Un tableau typé ou un ArrayBuffer qui contient le bytecode du module WebAssembly qu'on souhaite compiler ou un objet WebAssembly.Module.
importObject
Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets WebAssembly.Memory. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception WebAssembly.LinkError sera levée.
WebAssembly.Memory
WebAssembly.LinkError
Une promesse qui est résolue en un objet qui contient deux champs :
module
Un objet WebAssembly.Module qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à postMessage() ou via un cache.
postMessage()
instance
Un objet WebAssembly.Instance qui contient l'ensemble des fonctions WebAssembly exportées.
TypeError
WebAssembly.CompileError
WebAssembly.RuntimeError
WebAssembly.instantiate(module, importObject);
L'objet WebAssembly.Module qui doit être instancié.
Une promesse qui est résolue en un objet WebAssembly.Instance.
Note : Dans la plupart des cas, on utilisera plus vraisemblablement WebAssembly.instantiateStreaming() qui est plus efficace que instantiate().
instantiate()
Après avoir récupéré le code binaire WebAssembly grâce à fetch(), on compile et on instancie le module grâce à la fonction WebAssembly.instantiate() et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque une fonction WebAssembly exportée via l'instance.
fetch()
const importObject = { imports: { imported_func(arg) { console.log(arg); }, }, }; fetch("simple.wasm") .then((response) => response.arrayBuffer()) .then((bytes) => WebAssembly.instantiate(bytes, importObject)) .then((result) => result.instance.exports.exported_func());
Note : Voir le fichier index.html sur GitHub (ainsi que la démonstration associée).
index.html
Dans l'exemple qui suit (tiré du fichier index-compile.html sur GitHub et qui dispose d'une démonstration), on compile le bytecode du module chargé simple.wasm grâce à la fonction WebAssembly.compileStreaming() puis on envoie le résultat à un worker grâce à la méthode postMessage().
index-compile.html
simple.wasm
WebAssembly.compileStreaming()
const worker = new Worker("wasm_worker.js"); WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) => worker.postMessage(mod), );
Dans le worker (cf. wasm_worker.js), on définit un objet d'import qui sera utilisé par le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le thread principal. Lorsqu'on reçoit le module, on en crée une instance grâce à la méthode WebAssembly.instantiate() puis on appelle une fonction exportée depuis le module.
wasm_worker.js
const importObject = { imports: { imported_func(arg) { console.log(arg); }, }, }; onmessage = (e) => { console.log("module received from main thread"); const mod = e.data; WebAssembly.instantiate(mod, importObject).then((instance) => { instance.exports.exported_func(); }); };
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.