你想要的WebAssembly入門與實踐

寫在開頭

• 不爲了追尋潮流而學習某個技術,本人僅作最基礎的入門與實踐講解
• 歡迎收藏前端生活社區:https://qianduan.life
• 想要加入資源羣和前端交流羣能夠看文末

WebAssembly是什麼，能夠吃嗎？

官網介紹：

• WebAssembly是由主流瀏覽器廠商組成的 W3C 社區團體 制定的一個新的規範
• WebAssembly/wasm WebAssembly 或者 wasm 是一個可移植、體積小、加載快而且兼容 Web 的全新格式

webAssembly的特色

高效

• WebAssembly 有一套完整的語義，實際上 wasm 是體積小且加載快的二進制格式， 其目標就是充分發揮硬件能力以達到原生執行效率

安全

• WebAssembly 運行在一個沙箱化的執行環境中，甚至能夠在現有的 JavaScript 虛擬機中實現。在web環境中，WebAssembly將會嚴格遵照同源策略以及瀏覽器安全策略。

開放

• WebAssembly 設計了一個很是規整的文本格式用來、調試、測試、實驗、優化、學習、教學或者編寫程序。能夠以這種文本格式在web頁面上查看wasm模塊的源碼。

標準

• WebAssembly 在 web 中被設計成無版本、特性可測試、向後兼容的。WebAssembly 能夠被 JavaScript 調用，進入 JavaScript 上下文，也能夠像 Web API 同樣調用瀏覽器的功能。固然，WebAssembly 不只能夠運行在瀏覽器上，也能夠運行在非web環境下。

正式開始(要湊字數,理解)

• Node.js有C++插件，Addon模塊，還能調用C#插件，go插件,還能跟他們通訊
• 我show一段我以前寫的代碼吧.用子進程調起c#插件,而後通訊.(其實這個是我寫的當時windows平臺的截圖插入到自研的文本編輯器中,桌面軟件)

`// Node.js主進程中調起子進程
 await screen_window();
 
//function screen_window
import { execFile } from 'child_process';
import path from 'path';
import ipcSend from '../main/utils/ipcSender';
function screen_window() {
  return new Promise((resolve, reject) => {
    const screen_window = execFile(path.resolve($dirname, '../screenshot/PrintScr.exe'));
    screen_window.on('exit', function(code) {
      if (code === 1) {
        ipcSend.insertImage();
      }
      resolve();
    });
  });
}

export default screen_window;`

既然Node.js有拓展能力，那麼瀏覽器環境呢？必然也須要

• 當時爲了處理一個speex格式的音頻在H5中實現動態播放，我封裝了一個7000行的庫，裏面大量的8進制...淚
• 不過最後幫助到了不少人,但願對你有用https://github.com/JinJieTan/speex-in-h5
• 處理音視頻的時候，多考慮下各類插件，webAssembly...

什麼狀況須要考慮到使用webAssembly?

• 首先給你們一個連接,https://www.wasm.com.cn/demo/Tanks/，這是坦克!,Unity 教程中的一個遊戲 導出成WebAssembly 的遊戲.
• 很流程，絲滑般順暢

怎麼理解webAssembly這個技術?

• 寫到這裏，仍是不少人不理解，到底什麼是webAssembly啊！
• Node.js能夠直接運行C# C++代碼嗎？ 固然不能夠，只能調用操做系統能力，或者+中間層或者其餘方式調用。
• 瀏覽器能夠運行 C++代碼，rust嗎？固然也不能夠（若是能夠的話，你告訴我，我把這裏改了）
• 那麼，webAssembly模塊必然是要被編譯成瀏覽器能夠識別的語言，而後被JS調用，能夠當作C++ ADDON同樣的形式吧，我我的理解

在這裏，我要強調一件事

• Electron中，雖然分主進程和渲染進程，可是主進程阻塞，一樣會阻塞渲染進程，GC也是會阻塞的。回收300MB，須要1S仍是多久，忘記了，去年作過實驗
• 那麼瀏覽器中，這種調用webAssembly模塊的狀況下，理論上若是webAssembly模塊被阻塞了，那麼JS主解析線程也是會阻塞的。但是我在國外網站上看到的內容是說： 每一個WebAssembly線程都在Web Worker中運行，至關於跟JS主解析線程是分開的，不會阻塞JS主線程的解析
• 最近看到又新引入的 SharedArrayBuffer 和原子操做使開發人員能跨多個線程使用共享的內存了。這樣以來就能實現更細粒度的併發算法，避免過於硬核引起不適，能夠自行跳轉https://hacks.mozilla.org/2017/06/a-crash-course-in-memory-management/

如何編寫webAssembly模塊

• 將下面這段代碼複製到瀏覽器控制檯 就能夠運行了

WebAssembly.compile(new Uint8Array(`
  00 61 73 6d  01 00 00 00  01 0c 02 60  02 7f 7f 01
  7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61
  64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02
  08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c
  0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
)).then(module => {
  const instance = new WebAssembly.Instance(module)
  const { add, square } = instance.exports

  console.log('2 + 4 =', add(2, 4))
  console.log('3^2 =', square(3))
  console.log('(2 + 5)^2 =', square(add(2 + 5)))

})``

• 輸出結果：

這裏應該你們能看出來,webAssembly模塊，其實就是二進制文件

• 你編寫的webAssembly模塊，不管是什麼語言，他最終應該是一段二進制文件，而後被前端經過ajax獲取
• 如何編譯:https://www.wasm.com.cn/getting-started/developers-guide/

如何加載/運行webAssembly模塊?

• 在將來計劃中，WebAssembly 模塊可使用 ES6 模塊(使用<script type="module">)加載，WebAssembly 目前只能經過 JavaScript 來加載和編譯。基礎的加載，只須要3步：

  • 獲取 .wasm 二進制文件，將它轉換成類型數組或者 ArrayBuffer
  • 將二進制數據編譯成一個 WebAssembly.Module
  • 使用 imports 實例化這個 WebAssembly.Module，獲取 exports。

使用webAssembly模塊示例:

• 首先定義加載webAssembly的功能函數:

`/**
 * @param {String} path wasm 文件路徑
 * @param {Object} imports 傳遞到 wasm 代碼中的變量
 */
function loadWebAssembly (path, imports = {}) {
  return fetch(path)
    .then(response => response.arrayBuffer())
    .then(buffer => WebAssembly.compile(buffer))
    .then(module => {
      imports.env = imports.env || {}

      // 開闢內存空間
      imports.env.memoryBase = imports.env.memoryBase || 0
      if (!imports.env.memory) {
        imports.env.memory = new WebAssembly.Memory({ initial: 256 })
      }

      // 建立變量映射表
      imports.env.tableBase = imports.env.tableBase || 0
      if (!imports.env.table) {
        // 在 MVP 版本中 element 只能是 "anyfunc"
        imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' })
      }

      // 建立 WebAssembly 實例
      return new WebAssembly.Instance(module, imports)
    })
}`

• 而後外部調用,傳入存放這個WebAssembly模塊的資源接口

`loadWebAssembly('path/to/math.wasm')
  .then(instance => {
    const { add, square } = instance.exports
    // ...
  })`

• 只要經過請求獲取到了它，而後處理後，就能夠獲取到exports出來的內容了

想要更深刻了解的，能夠參考下webAssembly和ffmpeg實現前端轉碼

• 導出一個入口函數到上層js
• 傳入函數參數來控制ffmpeg命令行參數
• 經過虛擬文件系統傳入輸入文件以及獲取輸出文件
• https://zhuanlan.zhihu.com/p/27910351 使用方法:

`self.importScripts('ffmpeg.js');
onmessage = function(e) {
  console.log('ffmpeg_run', ffmpeg_run);
  var files = e.data;
  console.log(files);
  ffmpeg_run({
    arguments: ['-i', '/input/' + files[0].name, '-b:v', '64k', '-bufsize', '64k', '-vf', 'showinfo', '-strict', '-2', 'out.mp4'],
    files: files,
  }, function(results) {
    console.log('result',results);
    self.postMessage(results[0].data, [results[0].data]);
  });
}`

• 涉及到轉碼，壓縮這些事情的時候，就要多考慮webAssembly了，固然node.js自己命令傳參調用ffmpeg也能夠，像圖片壓縮這種事情，Node.js也作很差的，就算上了C++插件也不行，CPU吃得很，併發稍微上去點,CPU就打到百分百.

歡迎關注個人公衆號:前端巔峯