前端技术周刊 2018-12-24:移动无限加载

13

前端快爆

  • 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

clipboard.png

clipboard.png

专题:移动无限加载

无线端列表为了更好的用户体验,往往采用滚动加载的方式。这在设计上其实是分页加载的一种,但是具有自动加载,节省操作和时间的特点。但是这也为前端带来了性能挑战:一但页面加载了过多的数据就会造成滚动卡顿、操作缓慢,为了用户体验却带来了负面效果。

如何做到可以无限滚动加载而尽可能减少页面卡顿,这里面包含了一系列的知识点:

滚动事件

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

懒加载

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

无限滚动

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

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

你可能感兴趣的

载入中...