WebAssembly（WASM）不是JavaScript的替代品，而是一種補充技術(shù)，可以在瀏覽器中實現(xiàn)高性能，低級代碼執(zhí)行。 1。 WASM是一種以近速度運行的二進制指令格式，設(shè)計為C，C，Rust或Python等語言的編譯目標，並在瀏覽器環(huán)境中與JavaScript一起安全地運行。 2。這對JavaScript開發(fā)人員很重要，因為它解決了諸如視頻處理，密碼學(xué)和仿真等計算較重的任務(wù)中的性能限制，在該任務(wù)中，JavaScript的動態(tài)鍵入和垃圾收集會導(dǎo)致放緩。 3。開發(fā)人員可以通過加載.wasm文件並通過JavaScript實例化將WASM模塊集成到JavaScript應(yīng)用程序中，從而允許兩者之間的無縫函數(shù)調(diào)用。 4.互操作性需要仔細處理數(shù)據(jù) - 臨時僅支持數(shù)字類型，因此字符串和對象通過共享內(nèi)存緩衝區(qū)進行交換。 5。實際用例包括利用FFMPEG.WASM或PDF-LIB等現(xiàn)有的WASM庫，卸載至關(guān)重要的性能 - 關(guān)鍵功能，或使用彙編進行類似於打字稿的開發(fā)體驗。 6.入門不需要學(xué)習(xí)生鏽； WebAssembly Studio，AsseblyScript，Emscripten和NPM軟件包等工具允許逐步採用。最終，WASM通過作為強化工作負載的性能逃生艙口來擴展JavaScript的功能，同時將其餘的應(yīng)用程序保留在熟悉的JavaScript中，從而成為現(xiàn)代Web開發(fā)的強大工具。

如果您是JavaScript開發(fā)人員，那麼您可能會聽到WebAssembly或Wasm的嗡嗡聲，但可能不確定它如何適合您的世界。好消息？您無需放棄JavaScript就可以從中受益。 WebAssembly旨在與JavaScript一起工作，而不是更換它。這是關(guān)於使您的應(yīng)用程序更快，尤其是當(dāng)您使用純JS達到性能限制時。

讓我們分解WebAssembly的真實含義，為什麼它對JavaScript開發(fā)人員重要，以及您今天如何開始使用它 - 而不會在一夜之間成為Rust Expert。

什麼是WebAssembly（不是什麼）？

WebAssembly是一種二進制指令格式，以近速度在現(xiàn)代Web瀏覽器中運行。可以將其視為一種類似於組裝的語言，它是緊湊，可以快速解析的，並且設(shè)計為C，C，C，Rust甚至Python等其他語言的編譯目標。

是什麼：

• 網(wǎng)絡(luò)上高性能代碼的便攜式編譯目標
• 設(shè)計用於在瀏覽器沙箱中安全運行，就像JavaScript一樣
• 與JavaScript一起運行，共享相同的環(huán)境（DOM，API等）
• 在沒有插件的所有主要瀏覽器中支持

不是什麼：

• 替換JavaScript
• 您通常手工寫的東西（儘管可以）
• 繞過瀏覽器安全的一種方法

您不會在WASM中重寫您的React組件，但是您可能會使用它來加快圖像處理，遊戲物理或音頻編碼。

JavaScript開發(fā)人員為什麼要關(guān)心？

由於V8等現(xiàn)代引擎，如今JavaScript很快，但仍然有限制：

• 解析和編譯大JS捆綁需要時間
• 動態(tài)打字和垃圾收集會導(dǎo)致性能打ic
• 一些計算重量的任務(wù)（例如，視頻編碼，3D渲染）的純JS太慢了

那就是Wasm閃耀的地方。這是可以預(yù)測的，並且是第一次跑步的快速 - 彙編JIT不需要熱身。這使其理想：

• 重數(shù)（數(shù)學(xué)，模擬）
• 運行現(xiàn)有的C/C庫（例如FFMPEG或Photoshop引擎）
• 遊戲和實時應(yīng)用程序
• 加密或壓縮算法

最好的部分？您可以像常規(guī)JavaScript函數(shù)一樣調(diào)用WASM函數(shù)。

如何在JavaScript應(yīng)用中使用WebAssembly

您無需學(xué)習(xí)新語言即可開始，但是最終您需要將代碼編譯到WASM。現(xiàn)在，讓我們看看它如何集成。

1。加載並運行一個WASM模塊

WASM模塊被加載為二進制.wasm文件，需要與JavaScript實例化。這是一個最小的例子：

異步函數(shù)loadwasm（）{
  const響應(yīng)=等待提?。?amp;#39;add.wasm'）;
  const bytes =等待響應(yīng)。 arraybuffer（）;
  const {instance} =等待webAssembly.instantiate（bytes）;
  返回instance.exports.add（5，3）; //返回8
}

add.wasm文件可能來自用Emscripten編譯的簡單C函數(shù)：

 // add.c
int add（int a，int b）{
  返回AB；
}

編譯：

 emcc add.c -o add.wasm -s standalone_wasm = 1

2。與JavaScript互操作

WASM和JS可以互相打電話：

• WASM可以導(dǎo)入JS功能
• JS可以將數(shù)據(jù)（數(shù)字，字符串，數(shù)組）傳遞給WASM

但是有一個陷阱：只有WASM本地支持i32 ， i64 ， f32和f64 。要使用字符串或?qū)ο?，您可以使用共享?nèi)存（線性數(shù)組緩衝區(qū)）：

 const asmemory = new webAssembly.memory（{ination：256}）;
const heap = new Uint8array（wasmememory.buffer）;

//將字符串複製到WASM內(nèi)存
功能PassStringTowasm（str）{
  const encoder = new textencoder（）;
  const data = encoder.encode（str）;
  HEAP.SET（數(shù)據(jù)，1000）; //在偏移時寫
  返回1000; //指針
}

WASI和諸如assemblyscript （wasm類打字稿的語法）之類的框架等工具使其更加容易。

JS開發(fā)人員的實際用例

您不需要全力以赴就可以受益。這是今天使用它的現(xiàn)實方法：

• 利用現(xiàn)有的WASM驅(qū)動圖書館：

  • ffmpeg.wasm - 視頻/音頻處理
  • pdf-lib （使用WASM進行PDF操縱）
  • WASI瀏覽器Polyfill - 在瀏覽器中運行CLI工具

• 加快關(guān)鍵績效功能：也許您的應(yīng)用程序進行實時數(shù)據(jù)分析。將數(shù)學(xué)卸載到WASM模塊。

• 使用grangyBript作為熟悉的語法：在打字稿子集中寫入WASM模塊：

   // add.ts（assemblyscript）
  導(dǎo)出函數(shù)add（a：i32，b：i32）：i32 {
    返回AB；
  }

  用asc add.ts -o add.wasm編譯為WASM

  ---

  入門：不需要生鏽

  您可以在不潛入低級語言的情況下進行實驗：

  1. 嘗試WebAssembly Studio - WASM的在線IDE
  2. 如果您知道打字稿，請使用彙編
  3. 通過NPM整合現(xiàn)有的WASM軟件包
  4. 如果您有遺產(chǎn)代碼，請使用emscripten編譯C/C

  一旦您舒適，請?zhí)剿鱎ust wasm-bindgen以獲取更先進的用例。

  ---

  WASM並不是要替換JavaScript，而是要擴展瀏覽器中的可能性。作為JS開發(fā)人員，您可以在有意義的地方集成WASM的好位置：加快重型零件，同時將其餘部分保持在熟悉的，靈活的JavaScript中。

  基本上，將WASM視為您的性能逃生艙口。在需要時使用它，在不需要時留下。

  以上是JavaScript開發(fā)人員的WebAssembly（WASM）簡介的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！