技術週刊(2018-12-24 移動無限載入)

阿里媽媽前端快爆發表於2018-12-25

技術週刊(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。

技術週刊(2018-12-24 移動無限載入)

  • 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

技術週刊(2018-12-24 移動無限載入)

技術週刊(2018-12-24 移動無限載入)

專題:移動無限載入

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

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

滾動事件

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

懶載入

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

無限滾動

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

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

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

相關文章