2018 年，WebAssembly（技術周刊 2018-04-20）

來自專欄 阿里媽媽前端快爆

Humphry: Men and their cycles，絲姐的生理期一亂我也亂了，推遲了一天周刊終於來了。

今天，池冰同學依然沒有在知乎上交到新朋友，除了有個小姐姐讓他穿女裝，微笑。

前端快爆

生態更新

• Firefox 61 正式支持 CSS shape-outside 屬性，可以實現文字環繞指定的形狀或者半透明圖片，此舉大大豐富了 Web 排版的多樣性，從此開發者可以實現媲美雜誌的圖文排版。此前 Chrome 37、Safari 7.1 均已支持。

1353631 - Enable shape-outside on Nightly?

bugzilla.mozilla.org

Humphry: 別說，整個頁面都顯得社會好多，見絲姐的demo

• Node.js 10 發布，該版本將在今年10月成為 LTS 版本。新版升級包括 N-API 不再是實驗特性，Async_hooks 舊版 API 被移除，依賴的 V8 版本升級到 6.6 等。新版還有一個實驗性版本 Node-ChakraCore，能夠完全支持 N-API。

Node v10.0.0 (Current) | Node.js?

nodejs.org

• npm@6 發布，新支持了 npm audit，可以通過 NSP 資料庫的信息檢驗依賴包是否是安全的；同時，新版內置了 Webhook 功能；最後，比起一年前的 npm，新版有了17倍的性能提升。

Announcing npm@6?

blog.npmjs.org

• Nginx-1.14.0 穩定版本發布，新支持了 HTTP/2 Push，ngx_http_mirror_module 和 ngx_http_grpc_module 亦有更新。

nginx news?

nginx.org

瑞士軍刀

• VSCode 插件推薦：自動計算 require package 大小、每行代碼後面透出最近修改者、語法檢查、TODO 高亮、書籤、主題、Icons美化等等……快來磨磨你的「刀」吧！
• CSS Blocks：Linkedin 開源的 CSS-in-JS 庫，支持完整的 CSS 作用域封裝，項目級別的優化，面向對象的繼承關係，Tree Shaking 和編譯期異常檢測。
• conditioner：一個通過在 DOM 上標記 data-module 來動態引入組件的工具庫，亮點是通過聲明式的語法來條件式動態載入組件，好處是同時支持 AMD 和 ESM，也可以嵌入任意現有打包流程。

專題：WebAssembly

Humphry: 2018 年，WebAssembly 的生態正在逐步完善，計算密集型的業務或將不再是 JavaScript 難以攻略的城池：視頻編解碼、物理模擬、機器視覺、加密、壓縮……

時間軸

• 2018年4月及未來：BlinkOn 9：WebAssembly

BlinkOn 9 是一個低調的技術大會，本文為與會者對其中《面向開發的 WebAssembly》的介紹，包括在開發中的 WebAssembly 的實際應用和新增特性支持。

• 2018年3月，Rust 宣布 Rust 2018 將發布，並將 WebAssembly 作為發布目標之一
• 2018年2月，Firefox、Chrome V8 65+ 雙雙提速 WebAssembly
• 2018年2月，Parcel 1.5+、Webpack 4+ 內置 WebAssembly Loader
• 2017年11月，所有主流現代瀏覽器均已支持 WebAssembly

支持的瀏覽器：Safari 11+、Edge 16+、Chrome 57+、Firefox 52+

• 2017年5月， WebAssembly 正式擊敗 PNaCl

為什麼 Mozilla 能贏 Google？這篇文章提到，WebAssembly 提供了跨瀏覽器支持的可能，而非局限於谷歌的生態鏈。

簡介

• WebAssembly @MDN
• 認識 WebAssebmly
• WebAssembly 與 Rust 入門攻略
• 手寫 WebAssembly 生命遊戲，所附的項目地址

實踐

• WebAssebmly 在機器視覺領域的實踐
• WebAssembly 在?鷺引擎中的實踐
• WebAssembly 在 PSPDFKit 的實踐，及啟動速度優化實踐
• WebAssembly 幫助 Figma 消減3倍載入時間

社區生態

• WebAssembly Studio：在線 IDE，支持C、C++、Rust
• wasm-bindgen：該庫提供了 Rust 和 JavaScript 的通信橋樑，允許 JavaScript 調用 Rust API 或讓 Rust 函數捕獲 JavaScript 異常
• wasm-pack：是一個用於將 Rust 包編譯打包為 WebAssembly 的工具，經過編譯，內容可直接發布到 npm
• webplatform：可以和 DOM 交互的 Rust 包

編輯：Humphry(承虎) & 審閱：壹絲

推薦閱讀：