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

  • 기본 오버로드는 typed array 또는 ArrayBuffer의 형태로 WebAssembly 바이너리 코드를 취하여 컴파일 및 인스턴스화를 한 번에 수행합니다. 반환 된 Promise는 컴파일 된 WebAssembly.Module 및 첫 번째 WebAssembly.Instance로 해석됩니다.
  • 두번째 오버로드는 이미 컴파일 된 WebAssembly.Module을 취하여 해당 ModuleInstance로 해석되는 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를 호출합니다.

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

Note: 이 예제는 GitHub의 index.html에서도 찾을 수 있습니다 (라이브보기도 있음).

Second overload example

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

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

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

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

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

Specifications

Specification Status Comment
WebAssembly JavaScript Interface
The definition of 'instantiate()' in that specification.
Working Draft Initial draft definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support5716522 No4411
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5757 Yes1522 ?117.0

1. This feature is behind the Experimental JavaScript Features preference.

2. Disabled in the Firefox 52 Extended Support Release (ESR).

See also

문서 태그 및 공헌자

이 페이지의 공헌자: limkukhyun
최종 변경자: limkukhyun,