瀏覽器新生態（技術周刊 2018-02-12）

02-18

過年，還有兩天就過年了。年貨還沒買吧？年終獎拿到了嗎？雙肩包還沒換新的吧？女朋友還沒有吧？那就趕緊看看雞年最後一波的媽媽前端周刊吧！像老絲我這麼熱愛工作的一定要堅守到最後一期??。

前端快爆

CSS Grid Layout 中的 gutter 屬性現在已經去掉了 grid- 前綴，統一為 column-gap、row-gap、gap。Chrome、Safari、Edge 開發版均已支持。而且 Chrome、Safari 中現在還修復了之前不支持動畫的問題。由於 CSS 多欄布局中也有 column-gap 屬性，此次規範統一帶來的好處是在多欄布局中該屬性也支持動畫和百分比取值。

https://groups.google.com/a/chromium.org/d/msg/blink-dev/UViBfJuuIq8/w7_2W7lLAgAJgroups.google.com

老絲點評：雖然 Grid 規範即將進入 CR 階段，但細節改動還是挺多的。

React 在其 16.3-alpha 中引入了新的 Context API，為我們提供了異於 react-redux 的數據源實現。新版可以在 JSX 中於高層級組件聲明 Provider 來聲明數據源，於低層級組件聲明 Consumer 來聲明數據消費，繼而在低層級組件中通過 context 對象獲取數據。

陳映平：React 16.3來了：帶著全新的Context APIzhuanlan.zhihu.com

humphry 點評：儘管依然依賴於 JSX 中的層疊關係，但數據依賴的形式比起以前的指令式 react-redux 實現，更偏聲明式，寫出的代碼還是相對可讀的。

Node.js 中的 fs API 將原生支持 Promise 化，預計我們會在 Node 10 中見到它。

Starkwang：介紹 Node.js 未來兩處很不錯的新特性zhuanlan.zhihu.com

老絲點評：還是熟悉的配方，還是熟悉的味道。

Edge 瀏覽器（Preview Build 17074+）終於在 SVG 中支持 CSS transform 屬性。

Add CSS transforms on SVG elementswpdev.uservoice.com

老絲點評：至此主流瀏覽器均已支持在 SVG 中使用 CSS transform。

藉助 FIrefox 的 devtools-highlighter，我們得以通過 CSS 計算值查找元素。

https://twitter.com/patrickbrosset/status/956913413430677504twitter.com

優秀 Demo

非常漂亮的 SVG 背景圖

CSS 魔方

專題

瀏覽器新生態

提速：

Firefox、Chrome V8 雙雙提速 WebAssembly

近日，Firefox 58+ 和 Chrome 65+ 從兩個方向為 WebAssembly 進行了提速。首先，它們同時支持了邊下載邊編譯的 API WebAssembly.compileStreaming 和 WebAssembly. instantiateStreaming，顯著加速了編譯時間；此外，Firefox 針對 WASM 並行進行基準編譯進程和優化編譯進程，兩進程各提供了更快的編譯速度和運行速度，並通過熱交換基準編譯結果和優化編譯結果，完成了進一步提速。

現代瀏覽器如何在網路層優化性能（牆外）

直播：

全面進階 H5 直播

介紹了視頻文件格式、視頻編解碼器和直播協議。

沖頂大會有前端什麼事嗎？

對直播流標準——HTTP 動態適應流標準——MPEG-DASH 的介紹。

WebP2P 讓你的直播免流

介紹了 WebRTC 與 P2P 技術的結合流程，實現內網免流量播放。

API：

滑鼠無限移動 API Pointer Lock
瀏覽器中的圖像識別 API Shape Detection Api
WebAR 技術介紹
WebVR 資源匯總

本周編輯： @一絲，審閱：humphry