前端技术周刊 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 / 审阅：壹丝 / 校对：池冰