技術週刊（2018-12-24 移動無限載入）

前端快爆

• Electron 4.0.0 釋出，不再支援 macOS 10.9 及以下版本。核心更新至 Chromium 69、Node.js 10.11.0、V8 6.9.427.24。?

點評：嗯，Electron 說， Chrome 大哥要拋棄 macOS 10.9，我們不能給大哥丟臉。

• V8 引擎 7.2 Beta 版釋出，大幅提升了 JavaScript 解析速度，同時還帶來了更快的 async/await 實現，以及對 public class fields 的支援。?

點評：你們 V8 每次都搞個大新聞，考慮一下Edge 的感受了嗎？它們還在默默修復空 div 導致的硬體加速 Bug。

• Firefox 66 去除了 CSS 寬度單位中的 min-content 和 max-content 值的 -moz- 字首，此前 Chrome 46 已經支援。?

點評：去掉，去掉，通通去掉。

• Safari Technology Preview 72 釋出，支援了大量的 CSS Painting API 特性、實現了 CTAP HID 身份驗證器等 。?

點評：?聖誕節可能都放假了吧，也只有中國的程式設計師還在寫 Bug，心塞。

• React v16.7 正式版釋出，該版本主要修復 React.lazy 大量懶載入元件產生的效能問題、unmount 時清空欄位以避免記憶體洩漏等。?

點評：你想要的 Hooks 還沒有釋出， React 團隊說自己不該吹牛，可能還要等上好幾個月，哈哈哈。

優秀 Demo

• 聖誕老人圖示動畫

• 風中飄動的火苗

專題：移動無限載入

無線端列表為了更好的使用者體驗，往往採用滾動載入的方式。這在設計上其實是分頁載入的一種，但是具有自動載入，節省操作和時間的特點。但是這也為前端帶來了效能挑戰：一但頁面載入了過多的資料就會造成滾動卡頓、操作緩慢，為了使用者體驗卻帶來了負面效果。

如何做到可以無限滾動載入而儘可能減少頁面卡頓，這裡麵包含了一系列的知識點：

滾動事件

1. 移動 Web 的滾動
2. 高效能滾動及頁面渲染優化
3. 移動端滾動事件大起底

懶載入

1. Lazyload 三種實現方式
2. 懶載入和預載入

無限滾動

1. React 之無限滾動
2. Vue.js 一個超長列表無限滾動載入的解決方案
3. 設計高效能無限滾動載入，瞭解高效頁面祕密
4. 設計模式之享元模式

---

本期編輯： @一絲；審閱： @humphry huang；專題供稿：@彬宇。

首發地址：zhuanlan.zhihu.com/mm-fe