前端技术周刊 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. 设计模式之享元模式

---

本期编辑：@壹丝；审阅：@承虎；专题供稿：@彬宇。