WebAssembly介紹
WebAssembly？
1，WebAssembly是由 Google、Microsoft、Mozilla、Apple 等幾家大公司合作發起的一個關於 面向Web的通用二進制和文本格式 的項目。WebAssembly 是除了 JavaScript 以外，另一種可以在網頁中運行的編程語言。
2，WebAssembly（縮寫WASM）是一種新的字節碼格式。並且被設計爲多種編程語言（如C、Rust）目標文件格式，以.wasm 爲文件名後綴。WASM通過LLVM（Low Level Virtual Machine、底層虛擬機）工具鏈支持多種編程語言。
3，WebAssembly初期目標是瀏覽器內應用程序的高性能執行引擎，隨着WASM 在開發者社區中越來越流行，WASM 也正在從客戶端遷移到服務端，成爲服務端技術的新銳。
WebAssembly 可以用 C 語言或者 Rust 開發，再編譯成 .was文件（WebAssembly文件），還可以利用TypeScript開發，再編譯成 .was文件。
簡單地說，WebAssembly 是一種可以使用非 JavaScript 編程語言編寫代碼並且能在瀏覽器上運行的技術方案。
WebAssembly（Wasm）官網
Emscripten編譯工具，可將其他的高級語言，編譯成WebAssembly。只要高級語言能轉換成 LLVM IR（LLVM Intermediate Representation：LLVM中間表示，LLVM——Low Level Virtual Machine——底層虛擬機），就能被編譯成 WebAssembly 字節碼。Emscripten官網：
https://emscripten.org/index.html
一般而言編譯需要安裝工具Emscripten，目前（2020年6月）Windows10中Emscripten 安裝比較容易出錯，網上文章大多語焉不詳，我在試用時飽受挫折，多次實驗，通過，特撰 “Windows10中Emscripten 安裝詳解”一文：
https://blog.csdn.net/cnds123/article/details/106742371
我們可以使用在線（“在線”意味不需要在本地安裝）工具，如WasmFiddle、WebAssembly Studio。
WasmFiddle
WasmFiddle界面簡陋，但是它不僅能夠查看編譯結果，還能夠加入js代碼，查看運行結果。
https://wasdk.github.io/WasmFiddle/?j1noa
WasmFiddle界面介紹
其中：1、此區域輸入代碼。2、 “Build”啓動編譯。3、下載Wasm模塊。
例子
打開WasmFiddle，輸入如下c代碼
int add (int x, int y) {
return x + y;
}
int square (int x) {
return x * x;
}
點擊“Build”啓動編譯，然後再下載Wasm模塊，可參見上圖。
可以在你的電腦的“用戶名”的“下載”中找到Wasm模塊，參見下圖。
編寫html代碼調用的它：
新建test2.html加入調用上面產生的program.wasm：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
/**
* @param {String} path wasm 文件路徑
* @param {Object} imports 傳遞到 wasm 代碼中的變量
*/
function loadWebAssembly (path, imports = {}) {
return fetch(path) // 加載文件
.then(response => response.arrayBuffer()) // 轉成 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)
})
}
// 加載wasm文件
loadWebAssembly('program.wasm')
.then(instance => {
//調用c裏面的方法
const toChar = instance.exports.toChar
const add = instance.exports.add
const square = instance.exports.square
console.log('return: ', toChar("12352324"))
console.log('10 + 20 =', add(10, 20))
console.log('3*3 =', square(3))
console.log('(2 + 5)*2 =', square(add(2 + 5)))
})
</script>
</body>
</html>
注意將test2.html和program.wasm放在同一目錄下，我這裏是D:\WebAssemblyTest
現在還不能瀏覽器查看，需要來個web服務器如http-serve。
http-serve就能實現在電腦的瀏覽器上輸入特定`url`，就可以訪問本機特定位置的文件，當測試服務器與客戶端的交互，啓動本地作爲一個服務器是相當方便而有必要的。
如果已安裝可以跳過這一步，
現在介紹如何使用Node.js的http-serve搭建本地服務器。
打開命令提示符（cmd窗口）：
【需要已安裝node
可用node -v驗證是否安裝
】
安裝http-server
在cmd 中
npm install -g http-server
留意一下安裝路徑。
打開test2.html
要先使用http-server將D:/WebAssemblyTest（此目錄根據你的情況而定，它包含你的網頁即.html文件和網頁調用的.wasm文件）設置爲服務器根目錄：
1）需要先運行命令cd /d D:/WebAssemblyTest切換目錄，2）再運行命令http-server ，參見下圖：
【可以通過ctrl+C使服務停止運行】
3）然後啓動瀏覽器如edge，在地址欄輸入 http://127.0.0.1:8080/test2.html 或http://localhost:8080/test2.html即可，參見下圖：
WebAssembly Studio
WebAssembly Studio 是WebAssembly 的在線 IDE（集成開發環境）開發工具。
具體使用參見：
https://blog.csdn.net/m0_46439030/article/details/106365076
對此就不說了。
AssemblyScript
AssemblyScript將TypeScript編譯成WebAssembly。這對於很多前端同學來說，入門的門檻還是很低的。要將TypeScript 編譯爲WebAssembly，就要用到AssemblyScript編譯器了。AssemblyScript官網
https://github.com/AssemblyScript
AssemblyScript實驗環境搭建
AssemblyScript使用Binaryen（Emscripten的WebAssembly後端）將嚴格類型化的TypeScript（基本的帶有類型的JavaScript）編譯爲WebAssembly，雖然它提供了幾種新的特定於WebAssembly的類型和內置函數，但它本身並不是一種真正的語言，而是一種編譯器變體。 它生成精簡的WebAssembly模塊，只需要一個npm安裝。
前提，需要 Node.js 的最低版本爲 8 才能得到 WebAssembly 的支持。
建立一個新的空目錄，轉到一個這個空目錄，創建一個 package.json 文件，安裝 AssemblyScript。
建立一個新的空目錄：
mkdir assemblyscript-demo
轉到一個這個空目錄：
cd assemblyscript-demo
創建一個 package.json 文件：
npm init
安裝 AssemblyScript
npm install --save-dev github:AssemblyScript/assemblyscript
AssemblyScript 入門指南
https://segmentfault.com/a/1190000021063091