前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單；本文則是對於半年來發布的前端每週清單中的 WebAssembly 相關的教程實踐與開源專案的盤點，可以檢視這裡獲得往期清單或者其他盤點篇。
教程實踐
- 《對比探祕 WebAssembly 效能優越之謎》: 本系列文章通過有趣的漫畫介紹了 WebAssembly 的前世今生，並且與 JavaScript 就載入、解析、編譯、執行等瀏覽進行了詳細對比，從而介紹 WebAssembly 的效能緣何相較於 JavaScript 會好上很多。同時作者也強調，WebAssembly 與 JavaScript 各有所長，未來並不會存在太多的競爭，更多的是相輔相成，各司其職。( http://suo.im/3jsTUH )
- 《淺析 WebAssembly 緣何優於 Asm.js》：WebAssembly 是新的 Web 中可執行格式，逐現代瀏覽器紛紛地提供了對於 WebAssembly 的原生支援；本文則是對於 WebAssembly 相較於 asm.js 帶來的效能提升背後的原理進行簡要介紹。(https://parg.co/bsv)
- 《簡短的 WebAssembly 卡通指南》：現在有很多關於 WebAssembly 與 JavaScript 生態圈的討論，人們往往關注於 WebAssembly 帶來的巨大的效能提升以及它會如何顛覆現代 Web 開發。不過很多的介紹中並沒有詳細闡述隱藏在速度提升之後的具體細節，本文則是從整個 JavaScript 的演化史來介紹 WebAssembly 巨大效能提升的原因。( https://parg.co/bVa )
- 《理解 WebAssembly 的檔案格式》：為了保證 WebAssembly 能夠被人們閱讀與理解，需要提供對於 wasm 二進位制格式的文字表示。該特性著眼於能夠在文字編輯器、瀏覽器開發者工具等開發工具中瀏覽 WebAssembly 檔案，而本文則介紹了這種檔案格式的規範與工作原理，以及底層的位元組碼與上層的 JavaScript 物件之間的關聯關係。( https://parg.co/bk6 )
- 《這 WebAssembly，是 Mozilla 贏了》：Mozilla 提出1 asm.js 與 Google Chrome 提出的 PNaCI 是都是致力於在瀏覽器中執行原生程式碼的技術方案。不過 PNaCI 卻存在著自絕於 JavaScript 以及 HTML 等問題，並且其他的瀏覽器廠商很難去支援 PNaCI 標準。而 asm.js 則以輕量級的對於標準 Web 平臺擴充套件的方式實現了這一目標，也就導致了最終 WebAssembly 決定靠近 asm.js 而不是 PNaCI。( http://robert.ocallahan.org/2... )
- 《WebAssembly 初體驗：重構簡單遊戲引擎》：WebAssembly 為我們提供了構建高效能的前端應用的途徑，而本文則從零開始介紹如何使用 C 來覆寫簡單的 JavaScript 遊戲引擎並且將其編譯為 WebAssembly。本文依次介紹瞭如何搭建基礎的 Emscription 工具鏈、使用 JavaScript 引入 wasm 模組、覆寫並且優化某個小型遊戲引擎、兩個引擎的效能評測等等部分。( http://blog.openbloc.fr/webas... )
- 《Figma 利用 WebAssembly 降低三倍載入速度》：自 WebAssembly 推出之後，很多開發者都開始嘗試在小型專案中實踐 WebAssembly，不過尚缺大型真實案例比較。而 Figma 因為其產品主要基於 C++ 實現，可以方便地編譯到 WebAssembly 中並且與原方案進行效能比較。本文中 Figma 介紹了它們在 Firefox 中使用 WebAssembly 之後帶來的載入效能提升以及下載尺寸的優化，同時還提及了目前 WebAssembly 在實際專案使用中存在的一些問題與風險。( https://parg.co/biB )
- Rust、WebAssembly 與 Webpack：WebAssembly 是新的執行於 Web 平臺的二進位制格式，我們能夠將 C、C++、Rust 這些語言編譯到 .wasm 檔案格式中然後在瀏覽器環境下執行他們；通常這些編譯後的程式碼在包體體積與執行速度上都會比 JavaScript 有明顯提升。而本文則著眼於介紹如何在瀏覽器中執行底層的 Rust 程式碼，也可以參考這篇文章( https://parg.co/by4 )來了解更多的關於 WebAssembly 快速實踐的知識。( https://parg.co/byh )
- WebAssembly 在 PSPDFKIT 的實踐：隨著今年三月份 WebAssembly Community Group 就標準達成一致，越來越多的主流瀏覽器開始支援 WebAssembly，本文即是 PDF 工具開發者 PSPDFKIT 介紹它們利用 WebAssembly 開發瀏覽器端渲染的 PDS 預覽工具的實踐經驗。本文首先介紹了 asm.js 的工作原理與編譯機制，然後闡述了 WebAssembly 的概念與組成，最後介紹了 WebAssembly 在 PSPDFKit 的實踐經驗以及他們在將原本大型 C++ 程式碼庫轉化為 WebAssembly 格式時的體驗；更多 WebAssembly 相關資料參考這裡。
開源專案
- asm-dom: asm-dom 是輕量級的基於 WebAssembly 的 Virtual DOM 框架，其允許開發者使用 C++ 來構建 Web 單頁應用。開發者可以僅使用 C++ 來編寫 Web 應用，然後通過 Emscripten 來將其轉化為 WebAssembly；其能允許開發者直接使用現有的 C++ 標準庫程式碼，從而保證程式碼複用與效能提升。