乐趣区

前端技术周刊 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
圣诞老人图标动画

风中飘动的火苗

专题:移动无限加载
无线端列表为了更好的用户体验,往往采用滚动加载的方式。这在设计上其实是分页加载的一种,但是具有自动加载,节省操作和时间的特点。但是这也为前端带来了性能挑战:一但页面加载了过多的数据就会造成滚动卡顿、操作缓慢,为了用户体验却带来了负面效果。
如何做到可以无限滚动加载而尽可能减少页面卡顿,这里面包含了一系列的知识点:
滚动事件

移动 Web 的滚动
高性能滚动及页面渲染优化
移动端滚动事件大起底

懒加载

Lazyload 三种实现方式
懒加载和预加载

无限滚动

React 之无限滚动
Vue.js 一个超长列表无限滚动加载的解决方案
设计高性能无限滚动加载,了解高效页面秘密
设计模式之享元模式

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

退出移动版