前端技術週刊 2018-03-09

前端技術週刊 2018-03-09

新聞

谷歌

• 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

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

Humphry：感謝 @justjavac 投稿

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

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

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

更新

• 在未來版本的 React 咱們能夠期待什麼？在3月初舉行的 JS Conf Iceland 裏 Dan Abramov 爲咱們作了介紹：支持在 render 函數中出現異步請求時暫停，條件知足時再更新視圖的 Suspense API；內部實現了時間分片以優化高渲染壓力時的渲染。 ?

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

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

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

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

Humphry：能夠作摸摸大的交互了

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

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

讀數

從去年三月到今年二月的 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 / 審閱：壹絲 / 校對：池冰