、win10 安裝 wasmer
powershell
iwr https://win.wasmer.io -useb | iex
2、在 wasmer「鏈接」 種創建一個賬戶，創建登錄token,完成本地命令行登錄wasmer login
3、初始化 JavaScript Service Worker Starter 模板
$ wasmer app create
App type:
Static website
HTTP server
Browser shell
> JS Worker (experimental)
Python Application
4、創建index.js
async function handler(request) {
const out = JSON.stringify({
success: true,
package: "wasmer/js-service-worker",
});
return new Response(out, {
headers: { "content-type": "application/json" },
});
}
addEventListener("fetch", handler); // Don't change this line
5、運行
$ wasmer run . --net
2023-10-05T09:46:19.513568Z INFO wasmer_winter: starting webserver
2023-10-05T09:46:19.514089Z INFO wasmer_winter::server: starting server on 0.0.0.0:8080 listen=0.0.0.0:8080
6、嘗試訪問服務
$ curl http://127.0.0.1:8080
"success":true,"package":"wasmer/js-service-worker"
7、部署 JavaScript Service Worker
$ wasmer deploy
Deploying app wasmer/js-service-worker...
? App wasmer/js-service-worker was successfully deployed!
> App URL: https://wasmer-js-service-worker-worker.wasmer.app
> Versioned URL: https://rkkh7ikcgv1r.id.wasmer.app
> Admin dashboard: https://wasmer.io/apps/wasmer/wasmer-js-service-worker-worker
大家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!
高級前端?進階
今天給大家帶來的主題是全網最火的WebAssembly運行時，話不多說，直接開始！
WebAssembly 是除了 JavaScript 以外，另一種可以在網頁中運行的編程語言。過去如果開發想在瀏覽器中運行代碼來對網頁中各種元素進行控制，只有 JavaScript 這一種選擇。
所以當人們談論 WebAssembly 的時候，往往會拿 JavaScript 來進行比較。但是它們其實并不是“二選一”的關系，即并不是只能用 WebAssembly 或者 JavaScript。
實際上，瀏覽器鼓勵開發者將這兩種語言一起使用，即使不親自實現 WebAssembly 模塊，也可以學習它現有的模塊，用它的優勢來實現功能。
圖片來自：https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/
WebAssembly 模塊定義的一些功能可以通過 JavaScript 來直接調用。所以就像開發者通過 npm 下載 lodash 模塊并通過 API 使用它一樣，現在開發者也可以直接下載 WebAssembly 模塊并且使用其提供的功能。
總之，WebAssembly 是一種偏底層、可移植的二進制格式，旨在由現代 Web 瀏覽器和其他運行時環境高效執行。 它旨在成為高級編程語言的編譯目標，用于構建在不同平臺和設備之間共享的應用程序和庫。
接下來，帶著大家一起來看看目前最火的幾個WebAssembly運行時。
WasmEdge 是一個輕量級、高性能和可擴展的 WebAssembly 運行時， 它是當今號稱最快的 Wasm VM。
WasmEdge 是由 CNCF 托管的官方沙箱項目，而CNCF 是一個開源的、供應商中立的云原生計算中心，托管 Kubernetes 和 Prometheus 等項目，使云原生具有普遍性和可持續性。
WasmEdge的用例包括現代 Web 應用程序架構（同構和 Jamstack 應用程序）、邊緣云上的微服務、無服務器 SaaS API、嵌入式功能、智能合約和智能設備等方方面面。
WasmEdge 是世界上第一個正式的 CNCF WebAssembly 運行時項目，可以設想它將作為邊緣云的關鍵任務輕量級運行時，在 CNCF 的開源云計算領域發揮重要作用。
WasmEdge 可以運行從 C/C++、Rust、Swift、AssemblyScript 或 Kotlin 源代碼編譯的標準 WebAssembly 字節碼程序。同時，它還受到標準語言和編譯器工具鏈的支持，例如 LLVM、Rustc 和 emscripten。
WasmEdge在安全、快速、輕量、可移植和容器化的沙箱中運行 JavaScript，包括第 3 方 ES6、CJS 和 NPM 模塊。 它還支持混合使用這些語言（例如，使用 Rust 實現 JavaScript API）、Fetch API 和邊緣服務器上的服務器端渲染 (SSR) 功能。
WasmEdge目前支持所有標準的 WebAssembly 功能和擴展提案，例如：WASI 規范、引用類型、批量內存操作和 SIMD，同時也在積極探索 wasi-socket 提案以支持 WebAssembly 程序中的網絡訪問。 它還支持許多為云原生和邊緣計算量身定制的擴展。例如，WasmEdge 網絡套接字和 WasmEdge Tensorflow 擴展。
WasmEdge還支持針對特定應用場景設計的非標準擴展。
WasmEdge由C++編寫，目前在Github上有5.6K的star、500+ fork、確實有一定的熱度。
Wasmer 是在非瀏覽器上下文中運行 Wasm 的一種方式，提供基于 WebAssembly 的超輕量級容器。專注于支持在任何平臺上運行 WASM 代碼，為其他跨平臺運行時（例如 Java）提供了潛在的替代方案。
Wasmer 在 GitHub 上將自己描述為“一個快速且安全的 WebAssembly 運行時，它使超輕量級容器可以在任何地方運行：從桌面到云、邊緣和物聯網IOT設備”。
Wasmer使用熟悉的工具和喜歡的語言，將所有內容編譯為 WebAssembly?？梢栽谌魏尾僮飨到y上運行它或將其嵌入到其他語言中。
Wasmer有以下明顯特點：
Emscripten 是一個 開源的編譯器，可以將 C/C++ 的代碼編譯成 JavaScript 膠水代碼或者WebAssembly 代碼
嘗試Wasmer可以從運行 QuickJS 開始，這是一個編譯為 WebAssembly 模塊 (qjs.wasm：查看文末資料下載) 的小型可嵌入 Javascript 引擎：
$ wasmer qjs.wasm
QuickJS - Type "\h" for help
qjs > const i = 1 + 2;
qjs > console.log("hello " + i);
hello 3Wasmer由Rust編寫，目前在Github上有14.6K的star、600+ fork、超過4.9K的項目使用它。
WAVM（WebAssembly 虛擬機）是 WebAssembly (WASM) 的高性能、可移植運行時，可以在獨立環境中或作為主機應用程序的一部分執行 WASM 模塊。 它的設計輕量、高效，可用于在各種上下文中執行 WASM 模塊，包括服務器、命令行工具和瀏覽器擴展。
WAVM 是可以執行 WASM 模塊的幾個運行時環境之一，并且以其對性能和靈活性的關注而著稱。
WAVM 在 C++ 中實現，并在 MIT 許可證下發布。 它是開源的并且積極開發，非常注重安全性、可移植性和與 WASM 規范的兼容性。 它可以用作獨立的運行時或集成到其他應用程序和環境中，適用于廣泛的用例，包括服務器端執行、命令行工具和瀏覽器擴展。
WAVM 使用 LLVM 將 WebAssembly 代碼編譯為機器代碼，性能接近原生。 在某些情況下，它甚至可以超越本機性能，這要歸功于生成特定CPU運行機器代碼的能力。
WAVM 還利用虛擬內存和信號處理程序來執行 WebAssembly 的邊界檢查內存訪問，其成本與本機未經檢查的內存訪問相同。
WAVM 阻止 WebAssembly 代碼訪問 WebAssembly 虛擬機之外的狀態，或調用您未明確鏈接到 WebAssembly 模塊的本機代碼。
WAVM 容易受到某些邊信道攻擊（Side-channel Attacks），例如 Spectre 變體 2。WAVM 可能會為特定的邊信道攻擊添加進一步的緩解措施，但要防范所有此類攻擊是不切實際的。
您應該使用另一種隔離形式，例如操作系統進程，以保護敏感數據免受不受信任的 WebAssembly 代碼的影響。
WAVM 是用可移植的 C/C++ 編寫的，帶有少量特定于體系結構的匯編和 LLVM IR 生成代碼。
WAVM 在 X86-64 Windows、MacOS 和 Linux 上經過測試并完全支持。 它旨在在任何 POSIX 兼容系統上運行，但并未在其他系統上進行例行測試。
對 AArch64 的支持正在進行中。 WAVM 主要在 AArch64 Linux 上運行，但在處理 WebAssembly 堆棧溢出和部分越界存儲方面存在一些已知錯誤。
WAVM 的運行時需要 64 位虛擬地址空間，因此不能移植到 32 位主機。 然而，WAVM 的匯編器和反匯編器在 32 位主機上工作。
WAVM 完全支持 WebAssembly 1.0，并加上許多擴展：
WAVM由C++編寫，目前在Github上有2.4K的star、200+ fork。
Wasmtime是一個字節碼聯盟項目，它是一個獨立的 wasm-only 優化運行時，用于 WebAssembly 和 WASI。 它可以在 Web 環境之外運行 WebAssembly 代碼，既可以用作命令行程序，也可以用于嵌入到更大應用程序中的庫。
Wasmtime 致力于成為一個高度可配置和可嵌入的運行時，以在任何規模的應用程序上運行，不過目前許多功能仍在開發中。
如果已經安裝了 Rust 編譯器，那么可以獲取一些 Rust 源代碼：
fn main() {
println!("Hello, world!");
}然后通過Wasmtime編譯和執行:
$ rustup target add wasm32-wasi
$ rustc hello.rs --target wasm32-wasi
$ wasmtime hello.wasm
Hello, world!Wasmtime由Rust編寫、目前在Github上有11.7K的star、900+ fork，超過16.5K的項目使用它。
快速的 WebAssembly 解釋器和最通用的 WASM 運行時。
A fast WebAssembly interpreter, and the most universal WASM runtime.
Wasm3 可以用作的庫包含： Python3、 Rust 、 C/C++ 、GoLang、Zig 、Perl Swift 、 .Net 、Nim 、 Arduino、 PlatformIO、Particle 、QuickJS等等
wasm3 通過了 WebAssembly 規范測試套件，能夠運行諸多 WASI 應用程序。最低系統要求：~64Kb 代碼和~10Kb RAM。wasm3 可在多種架構（x86、x86_64、ARM、RISC-V、PowerPC、MIPS、Xtensa、ARC32 等）和平臺上運行：
Wasm3由C語言編寫、目前在Github上有5.9K的star、360+ fork。
WebAssembly Micro Runtime (WAMR) 是一個輕量級的獨立 WebAssembly (WASM) 運行時，具有占用空間小、高性能和高度可配置的特性。適用于從嵌入式、物聯網、邊緣到可信執行環境 (TEE)、智能合約、云原生等應用程序 。 它包括以下幾個核心組成部分：
WebAssembly Micro Runtime由C語言編寫、目前在Github上有3.6K的star、450+ fork，代碼貢獻者超過100+。
本文主要和大家介紹前端最火的幾個WebAssembly運行時，包括：WasmEdge、Wasmer、WAVM、Wasmtime、Wasm3、WAMR等等以及它們的特點，其中Wasmtime和Wasmer由Rust編寫，而WasmEdge和WAVM由C++編寫，Wasm3、WAMR由C語言編寫。關于六個運行時到底哪個最好，文章并沒有給出答案，大家可以在實際項目中探索。
針對每一個運行時，后續都會單獨出文進行詳細介紹。如果有興趣，可以直接在我主頁繼續閱讀，但是文末的參考資料提供了大量優秀文檔以供學習。最后，歡迎大家點贊、評論、轉發、收藏！
https://github.com/wasmerio/wasmer
https://wasmer.io/
https://github.com/WAVM/WAVM
https://github.com/bytecodealliance/wasmtime
https://registry-cdn.wapm.io/contents/_/quickjs/0.0.3/build/qjs.wasm
https://github.com/wasm3/wasm3
https://github.com/bytecodealliance/wasm-micro-runtime
https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/