老王啊，你不管管你們家數據了？（技術周刊 2018-03-09）

04-23

前端快爆

谷歌

Chrome 65 穩定版發布，正式啟用了 Houdini 中的 CSS Paint API、擴展網路瀑布圖展現的 Server Timing API、以及 display: contents（使元素不生成盒模型）等內容。

壹絲：Houdini 的很多 Demo 由於依賴 CSS Typed OM 和 CSS.registerProperty，所以還需要開啟 Flag：chrome://flags/#enable-experimental-web-platform-features

New in Chrome 65?

developers.google.com

在 Chrome 66 中追查內存泄露將會變得更容易：藉助新版的開發者工具，可以追蹤並將 C++ 的 DOM 對象快照下來，並展現所有有 JavaScript 引用的可達 DOM 對象。這項技術得以產品化，是由於他們採用了新的跨組件追蹤技術，可以從 JS 追蹤到 DOM，然後再反溯回 JS。

Humphry：感謝 @justjavac 投稿

Tracing from JS to the DOM and back again?

v8project.blogspot.com

Chrome 支持把 PWA 網頁直接保存為桌面應用，在 chrome://flags#enable-desktop-pwas 中打開即可嘗試。

Progressive Web Apps coming to all Chrome platforms?

medium.com

在3月8日發布的 Android P 開發者版本中，可以看到在兩處地方緊隨蘋果：支持 HEIC 格式、原生支持劉海屏設計。

Humphry：tony 老師可否幫我也剪一個空氣劉海，我也找個前端來適配一下

緊隨iOS：Android P支持HEIC格式原生支持劉海屏設計?

www.cnbeta.com

更新

在將來版本的 React 我們可以期待什麼？在3月初舉行的 JS Conf Iceland 里 Dan Abramov 為我們做了介紹：支持在 render 函數中出現非同步請求時暫停，條件滿足時再更新視圖的 Suspense API；內部實現了時間分片以優化高渲染壓力時的渲染。

Humphry：啊，Suspense API，優雅可愛又俏皮

由美團點評開源的 mpvue 發布，允許你使用 Vue 進行開發的同時，生成小程序或 H5 應用。

東徒：Vue 有了第三種 render 的實現

用Vue.js開發微信小程序：開源框架mpvue解析?

mp.weixin.qq.com

如果你想要尋找一個封裝壓力觸摸（如 3D Touch）的多點觸摸庫，那麼 Pressure.js 是一個不錯的選擇。

Humphry：可以做摸摸大的交互了

Pressure.js?

pressurejs.com

受到 Chrome Headless 和 Firefox Headless 的衝擊，Phantomjs 被暫停並進入存檔狀態，回退到穩定版 2.1.1。

Humphry：官方CP逼死民間同人系列

Support headless Chromium · Issue #14954 · ariya/phantomjs?

github.com

讀數

從去年三月到今年二月的 http archive 給予的圖表中，我們可以發現一些時代的變化脈絡：

平均總傳輸大小從 2.5M 攀升到 3.5M

HTTPS 請求數佔比由 42% 攀升到了 60%

JavaScript 文件如今達到平均 25 個共 465kb 的規模

專題：數據管理

馬麻說前面有坑

Redux 非同步數據流方案對比

比較了 Redux-saga、Redux-thunk、Redux-promise 和 Redux-observable。

前端數據流哲學

上升到哲學層面了，那麼我們不能只比較顯性的 API，而要深入到代碼開發模式——副作用隔離、全局與局部狀態的合理劃分。本文很好的完成了相關梳理，覆及了 Redux、Rx 和 Mobx。

The Rise Of The State Machines

介紹了怎樣用有限自動狀態機來管理部分數據。

MobX 綁定過程和其中的一些坑的總結

粑拔又來安利了

是的，都是號稱來自未來的框架。

面向未來的前端數據流框架 - dob
精讀《dob - 框架使用》
下一代狀態管理工具 immer 簡介及源碼解析

Suspense

任何一種出現於社區的數據解決方案，都不得不解決非同步請求在其間的實現。React Suspense API 的即將到來令人興奮，它讓我們得以在 React 的 render()中直接使用 Promise，而不需要額外操心副作用。

介紹 React 的新功能 Time Slice 與 Suspense
解說 Suspense DEMO

編輯：Humphry / 審閱：一絲 / 校對：池冰

題圖來源：https://pixabay.com/en/abstract-digital-art-fractal-2352687/