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
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
View in English Always switch to English
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017년 10월.
* Some parts of this feature may have varying levels of support.
WebAssembly.instantiate() 함수를 사용하면 WebAssembly 코드를 컴파일하고 인스턴스화 할 수 있습니다. 이 함수에는 두개의 overloads가 있습니다.
WebAssembly.instantiate()
ArrayBuffer
WebAssembly.Module
WebAssembly.Instance
Module
Instance
Promise
경고 : 중요 : 이 방법은 wasm 모듈을 가져와 인스턴스화하는 가장 효율적인 방법은 아닙니다. 가능하다면 원시 바이트 코드에서 모듈을 모두 한 단계로 가져오고, 컴파일하고 인스턴스화하는 대신 최신 WebAssembly.instantiateStreaming () 메서드를 사용해야합니다. ArrayBuffer 로의 변환이 필요합니다.
WebAssembly.instantiateStreaming ()
Promise<ResultObject> WebAssembly.instantiate(bufferSource, importObject);
컴파일 할 .wasm 모듈의 이진 코드가 들어있는 typed array 또는 ArrayBuffer입니다.
함수 또는 WebAssembly.Memory 객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 컴파일 된 모듈의 각 선언 된 가져 오기에 대해 하나의 일치하는 속성이 있어야합니다. 그렇지 않으면 WebAssembly.LinkError가 발생합니다.
WebAssembly.Memory
인스턴스
WebAssembly.LinkError
두개의 필드를 포함하는 ResultObject를 가진 Promise를 반환:
ResultObject
module
postMessage()
instance
TypeError
WebAssembly.CompileError
WebAssembly.RuntimeError
Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject);
WebAssembly.Module 객체가 인스턴스화됩니다.
함수 또는 WebAssembly.Memory 객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 선언 된 각 module 가져 오기에 대해 일치하는 속성이 하나 있어야합니다. 그렇지 않으면 WebAssembly.LinkError 가 발생합니다.
A Promise that resolves to an WebAssembly.Instance object.
Note: 대부분의 경우 instantiate()보다 더 효율적이므로 WebAssembly.instantiateStreaming ()을 사용하는 것이 좋습니다.
instantiate()
fetch를 사용하여 일부 WebAssembly 바이트 코드를 가져온 후 우리는 WebAssembly.instantiate () 함수를 사용하여 모듈을 컴파일하고 인스턴스화하여 해당 프로세스에서 JavaScript 함수를 WebAssembly 모듈로 가져옵니다. 그런 다음 Instance에서 Exported WebAssembly function를 호출합니다.
WebAssembly.instantiate ()
var importObject = { imports: { imported_func: function (arg) { console.log(arg); }, }, }; fetch("simple.wasm") .then((response) => response.arrayBuffer()) .then((bytes) => WebAssembly.instantiate(bytes, importObject)) .then((result) => result.instance.exports.exported_func());
참고 : 이 예제는 GitHub의 index.html에서도 찾을 수 있습니다 (라이브보기도 있음).
다음 예제는 (GitHub의 index-compile.html 데모 혹은 라이브로 보기). WebAssembly.compileStreaming () 메서드를 사용하여 로드된 simple.wasm 바이트 코드를 컴파일 한 다음 postMessage()를 사용하여 worker에게 전달합니다.
WebAssembly.compileStreaming ()
var worker = new Worker("wasm_worker.js"); WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) => worker.postMessage(mod), );
작업자 (wasm_worker.js 참조)에서 모듈이 사용할 가져 오기 객체를 정의한 다음 주 스레드에서 모듈을 수신 할 이벤트 핸들러를 설정합니다. 모듈을 받으면 WebAssembly.instantiate () 메소드를 사용하여 인스턴스를 만들고 내부에서 내 보낸 함수를 호출합니다.
wasm_worker.js
var importObject = { imports: { imported_func: function (arg) { console.log(arg); }, }, }; onmessage = function (e) { console.log("module received from main thread"); var mod = e.data; WebAssembly.instantiate(mod, importObject).then(function (instance) { instance.exports.exported_func(); }); };
Enable JavaScript to view this browser compatibility table.