WebAssembly.instantiate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

WebAssembly.instantiate() 함수를 사용하면 WebAssembly 코드를 컴파일하고 인스턴스화 할 수 있습니다. 이 함수에는 두개의 overloads가 있습니다.

  • 기본 오버로드는 typed array 또는 ArrayBuffer의 형태로 WebAssembly 바이너리 코드를 취해 컴파일 및 인스턴스화를 한 번에 수행합니다. 반환 된 Promise는 컴파일 된 WebAssembly.Module 및 첫 번째 WebAssembly.Instance로 해석됩니다.
  • 두번째 오버로드는 이미 컴파일 된 WebAssembly.Module을 취하여 해당 Module의 Instance로 해석되는 Promise을 반환합니다. 이 overload는 Module이 이미 컴파일된 경우 유용합니다.

경고: 중요 : 이 방법은 wasm 모듈을 가져와 인스턴스화하는 가장 효율적인 방법은 아닙니다. 가능하다면 원시 바이트 코드에서 모듈을 모두 한 단계로 가져오고, 컴파일하고 인스턴스화하는 대신 최신 WebAssembly.instantiateStreaming () 메서드를 사용해야합니다. ArrayBuffer 로의 변환이 필요합니다.

Syntax

Primary overload — taking wasm binary code

Promise<ResultObject> WebAssembly.instantiate(bufferSource, importObject);

Parameters

bufferSource

컴파일 할 .wasm 모듈의 이진 코드가 들어있는 typed array 또는 ArrayBuffer입니다.

importObject Optional

함수 또는 WebAssembly.Memory 객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 컴파일 된 모듈의 각 선언 된 가져 오기에 대해 하나의 일치하는 속성이 있어야합니다. 그렇지 않으면 WebAssembly.LinkError가 발생합니다.

Return value

두개의 필드를 포함하는 ResultObject를 가진 Promise를 반환:

Exceptions

Secondary overload — taking a module object instance

Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject);

Parameters

module

WebAssembly.Module 객체가 인스턴스화됩니다.

importObject Optional

함수 또는 WebAssembly.Memory 객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 선언 된 각 module 가져 오기에 대해 일치하는 속성이 하나 있어야합니다. 그렇지 않으면 WebAssembly.LinkError 가 발생합니다.

Return value

A Promise that resolves to an WebAssembly.Instance object.

Exceptions

Examples

Note: 대부분의 경우 instantiate()보다 더 효율적이므로 WebAssembly.instantiateStreaming ()을 사용하는 것이 좋습니다.

First overload example

fetch를 사용하여 일부 WebAssembly 바이트 코드를 가져온 후 우리는 WebAssembly.instantiate () 함수를 사용하여 모듈을 컴파일하고 인스턴스화하여 해당 프로세스에서 JavaScript 함수를 WebAssembly 모듈로 가져옵니다. 그런 다음 Instance에서 Exported WebAssembly function를 호출합니다.

js
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에서도 찾을 수 있습니다 (라이브보기도 있음).

Second overload example

다음 예제는 (GitHub의 index-compile.html 데모 혹은 라이브로 보기). WebAssembly.compileStreaming () 메서드를 사용하여 로드된 simple.wasm 바이트 코드를 컴파일 한 다음 postMessage()를 사용하여 worker에게 전달합니다.

js
var worker = new Worker("wasm_worker.js");

WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) =>
  worker.postMessage(mod),
);

작업자 (wasm_worker.js 참조)에서 모듈이 사용할 가져 오기 객체를 정의한 다음 주 스레드에서 모듈을 수신 할 이벤트 핸들러를 설정합니다. 모듈을 받으면 WebAssembly.instantiate () 메소드를 사용하여 인스턴스를 만들고 내부에서 내 보낸 함수를 호출합니다.

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

명세서

Specification
WebAssembly JavaScript Interface
# dom-webassembly-instantiate

브라우저 호환성

BCD tables only load in the browser

See also