前端每週清單半年盤點之 WebAssembly 篇

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單；本文則是對於半年來發布的前端每週清單中的 WebAssembly 相關的教程實踐與開源項目的盤點，能夠查看這裏得到往期清單或者其餘盤點篇。

教程實踐

• 《對比探祕 WebAssembly 性能優越之謎》: 本系列文章經過有趣的漫畫介紹了 WebAssembly 的前世此生，而且與 JavaScript 就加載、解析、編譯、執行等瀏覽進行了詳細對比，從而介紹 WebAssembly 的性能緣何相較於 JavaScript 會好上不少。同時做者也強調，WebAssembly 與 JavaScript 各有所長，將來並不會存在太多的競爭，更多的是相輔相成，各司其職。( suo.im/3jsTUH )

• 《淺析 WebAssembly 緣何優於 Asm.js》：WebAssembly 是新的 Web 中可執行格式，逐現代瀏覽器紛紛地提供了對於 WebAssembly 的原生支持；本文則是對於 WebAssembly 相較於 asm.js 帶來的性能提高背後的原理進行簡要介紹。(parg.co/bsv)

• 《簡短的 WebAssembly 卡通指南》：如今有不少關於 WebAssembly 與 JavaScript 生態圈的討論，人們每每關注於 WebAssembly 帶來的巨大的性能提高以及它會如何顛覆現代 Web 開發。不過不少的介紹中並無詳細闡述隱藏在速度提高以後的具體細節，本文則是從整個 JavaScript 的演化史來介紹 WebAssembly 巨大性能提高的緣由。( parg.co/bVa )

• 《理解 WebAssembly 的文件格式》：爲了保證 WebAssembly 可以被人們閱讀與理解，須要提供對於 wasm 二進制格式的文本表示。該特性着眼於可以在文本編輯器、瀏覽器開發者工具等開發工具中瀏覽 WebAssembly 文件，而本文則介紹了這種文件格式的規範與工做原理，以及底層的字節碼與上層的 JavaScript 對象之間的關聯關係。( parg.co/bk6 )

• 《這 WebAssembly，是 Mozilla 贏了》：Mozilla 提出1 asm.js 與 Google Chrome 提出的 PNaCI 是都是致力於在瀏覽器中運行原生代碼的技術方案。不過 PNaCI 卻存在着自絕於 JavaScript 以及 HTML 等問題，而且其餘的瀏覽器廠商很難去支持 PNaCI 標準。而 asm.js 則以輕量級的對於標準 Web 平臺擴展的方式實現了這一目標，也就致使了最終 WebAssembly 決定靠近 asm.js 而不是 PNaCI。( robert.ocallahan.org/2017/06/web… )

• 《WebAssembly 初體驗：重構簡單遊戲引擎》：WebAssembly 爲咱們提供了構建高性能的前端應用的途徑，而本文則從零開始介紹如何使用 C 來覆寫簡單的 JavaScript 遊戲引擎而且將其編譯爲 WebAssembly。本文依次介紹瞭如何搭建基礎的 Emscription 工具鏈、使用 JavaScript 引入 wasm 模塊、覆寫而且優化某個小型遊戲引擎、兩個引擎的性能評測等等部分。( blog.openbloc.fr/webassembly… )

• 《Figma 利用 WebAssembly 下降三倍加載速度》：自 WebAssembly 推出以後，不少開發者都開始嘗試在小型項目中實踐 WebAssembly，不過尚缺大型真實案例比較。而 Figma 由於其產品主要基於 C++ 實現，能夠方便地編譯到 WebAssembly 中而且與原方案進行性能比較。本文中 Figma 介紹了它們在 Firefox 中使用 WebAssembly 以後帶來的加載性能提高以及下載尺寸的優化，同時還說起了目前 WebAssembly 在實際項目使用中存在的一些問題與風險。( parg.co/biB )

• Rust、WebAssembly 與 Webpack：WebAssembly 是新的運行於 Web 平臺的二進制格式，咱們可以將 C、C++、Rust 這些語言編譯到 .wasm 文件格式中而後在瀏覽器環境下運行他們；一般這些編譯後的代碼在包體體積與運行速度上都會比 JavaScript 有明顯提高。而本文則着眼於介紹如何在瀏覽器中執行底層的 Rust 代碼，也能夠參考這篇文章( parg.co/by4 )來了解更多的關於 WebAssembly 快速實踐的知識。( 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++ 標準庫代碼，從而保證代碼複用與性能提高。