最近了解了下前端開發，發現目前可以使用C#、C++等語言進行Web開發，無需額外學習JavaScript，這是因為有了WebAssembly。本文將JavaScript與WebAssembly進行簡單的介紹，為後續研究Blazor奠定基礎。

JavaScript簡介

1993年，NCSA發表了NCSA Mosaic，這是最早流行的圖形介面網頁瀏覽器。

1994年，Mosaic的主要開發人員創立了Netscape公司，目標是做世界第一的網頁瀏覽器，迅速佔據了瀏覽器市場。Netscape公司預見到網頁需要變得動態，創始人Mark Andreessen認為HTML需要一種膠水語言，可以很容易的使用它來組裝圖片和外掛之類的元件，且程式碼可以直接編寫在網頁標記中。

1995年，Netscape招募了Brendan Eich，他僅用了10天就把JavaScript的原型設計出來了。

隨著Web的快速發展，JavaScript迅速流行起來，Web開發幾乎只能通過JavaScript實現，JavaScript可謂是Web開發的官方語言。世界上的主流瀏覽器均支援JavaScript，它也是世界上大多數網站使用的語言。

JavaScript工作原理

JavaScript是一種指令碼語言，它是弱型別的，也是動態型別的。JavaScript是單執行緒的，為了處理併發，JavaScript使用事件迴圈與回撥函式。

JavaScript是一種高階的解釋型語言，程式碼不進行預編譯，只是將文字格式的程式碼傳送給瀏覽器，由瀏覽器中的JavaScript引擎解釋執行，因此它的效能是比不上編譯語言的。

當訪問網站時，使用HTTP協議請求JavaScript程式碼並將其流式傳輸到瀏覽器。JavaScript程式碼開始是儲存在記憶體中的一堆字元。首先根據語言的語法解析器將這些字元解析為抽象語法樹(AST)，然後直譯器將AST轉換為可解釋的位元組碼，編譯器再把位元組碼轉換成機器碼。

JavaScript效能優化

JavaScript是一種動態型別語言，變數型別不需要預先定義，也不需要提前編譯。這使得編寫起來既簡單又快速，但這也意味著JavaScript引擎需要做很多工作。當代碼在頁面上執行時，它必須解析、編譯和優化程式碼。

JavaScript的語法太靈活導致大型專案開發困難，且效能不能滿足一些場景的需要。如視訊遊戲、視訊編輯、3D渲染或音樂製作等，這些場景需要進行大量計算並且需要高度的效能。這種效能很難從JavaScript中獲得。

曾經許多公司希望通過瀏覽器外掛模型來建立替代方案來滿足建立複雜的互動式網頁或應用程式。這些外掛中最著名的是Adob​​e Flash，它在2000年代初期取得了巨大成功，以及微軟的Silverlight。

外掛技術在網路遊戲和商業應用中非常流行，但隨著移動端的發展，瀏覽器外掛效率低下，史蒂夫喬布斯的“關於Flash的想法”，一封明確指出iPhone和iPad永遠不會支援Adob​​e Flash的公開信，引發了外掛時代的終結。

各大JavaScript引擎均進行了優化以提升Web體驗，比如2008年穀歌開發的V8引擎，是使用C++編寫的開源的JavaScript引擎，用在Chrome和Node.js中。為了提升效能，V8將JavaScript程式碼直接編譯為更高效的機器碼，跳過使用直譯器生產位元組碼的過程。再加上隱藏類及內斂快取技術，V8比其它JavaScript引擎的效能提升了10倍。但JIT無法對一些程式碼進行優化，V8又進行了其它改進，不斷地優化效能。

WebAssembly的誕生

2015年，WebAssembly的工作開始了，來自谷歌、微軟、Mozilla和蘋果的工程師一起為網路建立了一個新的執行時。他們將WebAssembly描述為“適合編譯到Web的新型可移植、大小和載入時間高效的格式”。

WebAssembly是一種可以在現代瀏覽器中執行的新型程式碼，它可以將C、C++、Rust等程式碼編譯成WebAssembly模組。它的建立是為了在網路上獲得更好的效能。它是一種低階二進位制格式，體積小，因此載入和執行速度很快。

WebAssembly並非旨在完全替代JavaScript。實際上，應用程式使用WebAssembly來執行核心業務邏輯，通過JavaScript互操作層與瀏覽器API互動。可以在JavaScript程式碼中呼叫WebAssembly函式，也可以在WebAssembly模組中呼叫JavaScript函式。

WebAssembly是為速度而設計的。它的二進位制檔案比文字JavaScript檔案小得多。由於它們的大小，它們的下載速度更快，這在慢速網路上尤其重要。但隨著網路技術地發展，檔案大小已經不是JavaScript的主要問題。

WebAssembly以二進位制形式提供，解碼速度更快。它是靜態型別的，因此與JavaScript不同，引擎不需要在編譯期間推測將使用哪些型別。大多數優化發生在原始碼的編譯期間，甚至在它進入瀏覽器之前。記憶體是手動管理的，就像在C和C++之類的語言中一樣，因此也沒有垃圾收集。所有這些都提供了更好、更可靠的效能。WASM二進位制檔案的執行時間僅比相同本機程式碼的執行慢20%。

使用WebAssembly，Web開發人員將能夠選擇其他語言，更多的開發人員將能夠為Web編寫程式碼。JavaScript仍將是大多數用例的最佳選擇，但在需要提升效能時，可以選擇使用專門的語言。UI和應用程式邏輯之類的部分可以使用JavaScript，核心功能在WebAssembly中。在優化現有JS應用程式的效能時，可以用更適合該問題的語言重寫瓶頸。

WebAssembly不能直接訪問任何平臺API——DOM、WebGL、WebAudio等。要使用這些API，甚至要在頁面上顯示WebAssembly程式碼的輸出，必須通過JavaScript。

WebAssembly的工作原理

JavaScript使用直譯器，直譯器啟動簡單且快速，但執行速度較慢。WebAssembly使用編譯器，編譯器啟動很慢，但執行起來很快。

JavaScript原始碼到達瀏覽器後，先被解析成AST，再將AST解釋成中間程式碼，然後提供給JavaScript引擎編譯。WebAssembly不需要這些過程，因為它本身就是中間程式碼。

當WebAssembly模組通過HTTP載入時，必須在執行之前對其進行解碼和編譯。儘管WebAssembly是一種類似彙編的語言，但它仍然必須編譯為底層處理器的機器程式碼。解碼WebAssembly比解析JavaScript更簡單、更快；此外，此解碼/編譯步驟可以跨多個執行緒拆分，並且整個過程在模組仍在下載時開始。這大大減少了下載應用程式程式碼和達到峰值執行速度所需的時間。

像C++和Rust這樣的傳統桌面語言也可以相對輕鬆地編譯成WASM；AutoDesk在幾個月內將其已有35年曆史的C/C++程式碼庫移植到WASM，而Google移植了Google Earth，兩者都可以渲染複雜的3D場景並以接近本機的效能執行。Unity遊戲引擎也可以在WASM中執行。

WASM得到了Mozilla、Microsoft、Google和Apple開發人員的支援，並且它對現代瀏覽器的支援正在快速發展。與大多數Web標準一樣，它目前由W3C標準組織管理。

參考文獻

維基百科：JavaScript
How JavaScript Engine Works?
What Is WebAssembly? by Colin Eberhardt
WebAssembly: How and why
How JavaScript works: Optimizing the V8 compiler for efficiency