小说阅读网,有声小说在线收听网,完美世界国际版下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

理解 Wasm 基礎(chǔ)概念，了解 Wasm 是如何被加載運(yùn)行的？

大家好，我是前端西瓜哥，這次帶大家來簡單系統(tǒng)學(xué)習(xí)一下 wasm（WebAssembly）。

成都創(chuàng)新互聯(lián)是專業(yè)的加查網(wǎng)站建設(shè)公司，加查接單;提供成都網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行加查網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

示例源碼在這個(gè) github 倉庫，可自行下載運(yùn)行：

https://github.com/F-star/wasm-demo。

wasm 是如何被加載運(yùn)行的？

wasm 文件本身并不能像 JavaScript 一樣，下載完成后就立即執(zhí)行。

它更類似于 webgl 編譯著色器代碼，需要調(diào)用 JavaScript 提供的 API 去編譯執(zhí)行。

wasm 被加載并執(zhí)行的過程一般為：

請求 wasm 文件。
轉(zhuǎn)換為 ArrayBuffer 格式（也就是字節(jié)數(shù)組）。
編譯并返回 Module 對象（異步的，可使用阻塞寫法）。
基于 Module 創(chuàng)建一個(gè) instance 實(shí)例（異步的，可使用阻塞寫法）。instance 的 exports 對象下為 wasm 暴露出來的方法和屬性。創(chuàng)建 instance 有時(shí)需要提供一個(gè)額外的 importObject 對象，后文再細(xì)說。
執(zhí)行 JavaScript 代碼，調(diào)用 wasm 的方法，進(jìn)行數(shù)據(jù)的交換。

代碼實(shí)例：

fetch('./add.wasm')
  .then(rep => rep.arrayBuffer()) // 轉(zhuǎn) ArrayBuffer
  .then(bytes => WebAssembly.compile(bytes)) // 編譯為 module 對象
  .then(module => WebAssembly.instantiate(module)) // 創(chuàng)建 instance 對象
  .then(instance => {
   // 拿到 wasm 文件暴露的 add 方法
    const { add } = instance.exports;
    console.log(add(12, 34));
  });

上面是為了讓大家理解所有步驟，所以寫得很繁瑣。

我們有簡單寫法，用一個(gè) API 把步驟 1、2、3、4 組合在一起：

WebAssembly.instantiateStreaming(fetch('./add.wasm')).then(res => {
  const { module, instance } = res;
  const { add } = instance.exports;
  console.log(add(12, 34));
});

WebAssembly.instantiateStreaming 支持流式編譯，在 wasm 文件下載過程中就開始編譯了，并最后會一次性返回編譯和實(shí)例化產(chǎn)生的 module 和 instance 對象。

wasm 目前現(xiàn)在無法像 ES Module 一樣，通過 import 的方式直接被引入（

新聞中心

wasm 是如何被加載運(yùn)行的？

wasm 是如何被加載運(yùn)行的？