WebAssembly 是什么？

WebAssembly/wasm WebAssembly 或者 wasm 是一個可移植、體積小、加載快并且兼容 Web 的全新格式

WebAssembly（簡稱 Wasm）是一種二進制指令格式，設計用于在現代 Web 瀏覽器中高效運行程序。它可以被認為是一種低級的、接近硬件的編程語言，是一種介于字節碼和機器碼之間的跨平臺中間語言(.net，java虛擬機)。

官方目標：讓 Web 能運行接近原生性能的代碼。
核心功能：提供一種安全、跨平臺、高性能的沙盒執行環境。

WebAssembly 的工作原理

• 編譯階段：使用支持的語言（如 Rust、C++）編寫代碼，并通過工具鏈編譯為 WebAssembly 字節碼（.wasm 文件）。
• 加載階段：瀏覽器或運行時通過字節碼加載 WebAssembly 模塊。
• 執行階段：使用底層的 JIT 或 AOT（Ahead-of-Time Compilation）技術，生成與平臺相關的機器碼并執行。

WebAssembly 和 Java 的 JIT（即時編譯）對比

什么是 JIT？

Java 的 JIT（Just-In-Time Compilation）是一種將字節碼（Java 編譯器生成的中間代碼）字節碼是一種中間表示形式，它不是直接由CPU執行的指令集，而是設計為可以在虛擬機（Virtual Machine, VM）中解釋或進一步編譯成機器碼來執行。

核心理念：動態優化，提升運行時性能。
特點：

• 在運行時完成字節碼到機器碼的轉換。
• 利用實時的代碼分析和優化技術，改善程序執行效率。

WebAssembly 和 Java JIT 的相似之處

字節碼的本質：
兩者都使用字節碼作為中間表示：Java 使用 .class 文件，而 WebAssembly 使用 .wasm 文件。
字節碼本身與底層硬件無關。

即時編譯：
WebAssembly 和 Java JIT 都依賴即時編譯，將中間代碼翻譯為平臺相關的機器碼。

跨平臺性：
兩者都通過字節碼和運行時實現了跨平臺支持，運行時根據目標設備環境生成對應的機器碼。

WebAssembly 和 Java JIT 的區別

特性	WebAssembly	Java JIT
初始目標	優化瀏覽器中的高性能應用（如游戲、音視頻處理）。	提供跨平臺的企業級應用開發與運行支持。
運行時依賴	需要 WebAssembly 支持的運行時（如瀏覽器或 Wasm 引擎）	。 依賴 JVM（Java Virtual Machine）。
優化策略	偏向輕量、快速加載和運行，注重啟動速度。	動態優化運行代碼，注重長期運行的高性能（如方法內聯等）。
安全性	沙盒隔離，確保與宿主環境完全分離。	依賴 JVM 的內存管理和安全機制。
語言支持	多語言（C/C++、Rust、Go 等）。	主要支持 Java 和兼容語言（如 Kotlin、Scala）。
使用場景	高性能 Web 應用、邊緣計算、嵌入式開發。	企業級應用、復雜的分布式系統和服務器端應用。

性能對比
啟動速度：
WebAssembly：加載速度快，設計時考慮到 Web 場景，注重低延遲
Java JIT：啟動速度稍慢，JIT 需要運行時收集分析信息再進行優化。

長期運行性能：
WebAssembly：運行性能接近原生，但不具備長期優化能力。
Java JIT：通過持續的動態分析和優化（如熱點方法優化、分支預測等），在長期運行下性能可能更優。

內存消耗：
WebAssembly：運行時非常輕量級，適合嵌入式和資源受限場景。
Java JIT：運行時依賴 JVM，占用的內存相對更大。

WebAssembly 和 Java JIT 的實際應用場景

WebAssembly 的應用場景

• 高性能 Web 應用： 游戲（如 Unity 的 Web 部署）。 視頻/圖像處理（如 Figma 部分功能通過 Wasm 實現）。
• 跨語言模塊： 使用 Rust/C++ 編寫高性能邏輯，并將其編譯為 Wasm，嵌入到 JS 項目中。
• 邊緣計算和嵌入式開發： Wasm 的沙盒和輕量特性適合邊緣設備和微服務。

WebAssembly 專注于高性能和跨平臺的 Web/嵌入式開發，其輕量特性和沙盒安全性使其在瀏覽器和邊緣計算領域獨具優勢。

Java JIT 的應用場景

• 企業級應用： Java 的穩定性和成熟的生態使其成為銀行、保險等企業系統的首選。

• 大數據處理： Hadoop 和 Spark 等大數據工具廣泛依賴 Java。

• 分布式系統： 如 Spring Cloud 微服務架構，依賴 Java 的開發效率和 JVM 的性能優化。

Java JIT 則強調動態優化和長期性能，更適合復雜的企業級系統和服務器端開發。

JavaScript 調用 WebAssembly (Wasm) 通常涉及到幾個步驟。

步驟 1: 編譯 C/C++ 或 Rust 等代碼為 WebAssembly
首先，你需要將你想要在瀏覽器中運行的 C/C++ 或 Rust 等代碼編譯成 WebAssembly (.wasm) 文件。這通常使用工具鏈如 Emscripten、wasm-pack（針對 Rust）等來完成。

步驟 2: 準備 WebAssembly 模塊
確保你的 WebAssembly 模塊被正確地托管在一個可以由你的網頁訪問的位置。如果你正在開發本地項目，你可能需要設置一個簡單的 HTTP 服務器來提供 .wasm 文件，因為瀏覽器安全策略不允許直接從文件系統加載 WebAssembly 模塊。

步驟 3: 使用 JavaScript 加載并實例化 WebAssembly 模塊
在 HTML 頁面中，你可以使用 WebAssembly.instantiateStreaming 方法或 fetch API 來加載 WebAssembly 模塊。以下是一個使用 instantiateStreaming 的例子，它更高效，因為它可以在下載的同時解析模塊。

// 假設 wasm 模塊位于 'myModule.wasm'
async function loadWasm() {try {const response = await fetch('myModule.wasm');if (!response.ok) throw new Error('Network response was not ok');// Instantiate the WebAssembly module.const { instance } = await WebAssembly.instantiateStreaming(response, {});// Now you can call functions from the WebAssembly instanceconsole.log(instance.exports.myExportedFunction());} catch (err) {console.error('Failed to load wasm module:', err);}
}loadWasm();

步驟 4: 調用 WebAssembly 導出的函數
一旦 WebAssembly 實例創建完成，你就可以像調用普通 JavaScript 函數一樣調用導出的 WebAssembly 函數。例如，如果 WebAssembly 模塊導出了名為 myExportedFunction 的函數，你可以直接在 JavaScript 中調用 instance.exports.myExportedFunction()。

注意事項

內存管理：WebAssembly 和 JavaScript 共享線性內存（Linear Memory）。這意味著你可以通過共享同一段內存來傳遞數據，但是需要注意手動管理內存，尤其是在處理大型數據集時。

類型轉換：WebAssembly 只支持整數和浮點數類型的參數和返回值。如果你有更復雜的結構（如對象或字符串），你需要在兩者之間進行適當的序列化和反序列化。

異常處理：WebAssembly 本身并不支持異常傳播到 JavaScript。如果你的 WebAssembly 代碼拋出異常，那么這個異常會被截獲并且會終止模塊的執行，除非你在 WebAssembly 代碼中顯式處理了這些異常。

隨著 WebAssembly 技術的發展，更多的高級功能和優化將會被引入，使得 JavaScript 和 WebAssembly 的集成更加無縫和強大。