前端每周清单第31期: iOS 11 Viewport解析，Preact PWA性能优化案例，JS内存泄露分析

作者：王下邀月熊 编辑：徐川

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• Mastodon 1.6发布：Mastodon是免费、开源的去中心化的社会网络联盟，其已经覆盖了超过2000个节点，拥有超过800000名用户。Mastodon 1.6版本是首个完全实践ActivityPub协议的版本；ActivityPub是由W3C提出的新的联邦式通信协议，允许多个节点之间平等通信，交换数据。

• Node.js 8.5.0发布：今日发布的Node.js 8.5.0版本中引入了一系列的新特性与错误修复，其中值得注意的是V8重新支持Snapshots、引入了console.group()、新增了fs.copyFile与fs.copyFileSync以更高效地复制文件等特性；详细的特性变更列表请查看原文。

• Vue登陆OpenCollective接受捐赠：随着Vue.js社区的不断增长，越来越多的贡献者也参与到了项目的开发与维护工作中；Evan也决定正式在OpenCollective上开始面向Vue.js的社区募捐，以更好地维护社区的日常工作。不同于面向个人的Patreon，OpenCollective会更加透明，欢迎积极支持Vue.js。

• Apollo Client 2.0新特性介绍：Apollo Client 2.0版本在保障API的兼容性的同时带来了更加高效、灵活地使用体验；该版本添加了可修改的请求链、允许自定义生产环境下默认数据的存储等特性，详细地特性与接口变更可以查看原文。

开发教程

步步为营，掌握基础技能

• 基于Vue.js构建电影主页：很多人都习惯使用Netflix这样的在线流服务来观看视频或者电影，而本文即循序渐进地介绍如何利用Vue.js 2.0来实现简单的美观大方的电影主页。本文依次介绍了相关的数据结构定义与模拟数据创建、构建基于指令的组件、路由划分、数据绑定与状态管理等内容；更多Vue.js相关资料参考这里。

• 实战中学习Flexbox：本文是针对Flexbox的实战提高，不过对于那些即使对Flexbox一无所知的开发者，本文也提供了一系列的学习教程。本文依次介绍了如何使用Flexbox构建画廊、卡片、网格、常见的网页布局、富媒体呈现、表单、移动应用布局等内容；更多CSS/SCSS相关资料参考这里。

• 深入浅出CSS Transforms：通过transform属性，我们能够移动、渲染、缩放或者提升任何页面元素；本文即是从最基础的transform语法开始讲起，介绍生动的案例来让读者体验CSS Transforms各种不凡的用法。本文首先介绍了translate、scale、rotate、skew等常见的变换函数的用法，然后介绍了如何综合利用这些属性来实现复杂的动画，最后还介绍了CSS中animation的用法；更多CSS/SCSS相关资料参考这里。

• Angular 4中使用Redux进行状态管理：SPA非常适合于构建复杂的现代Web应用，而状态管理往往是开发中常见的痛点之一。像Angular这样基于组件的应用划分与开发方式能够更好地架构项目，提升代码的可复用性；而本文即是介绍如何综合使用Angular 4与Redux来开发现代应用。本文首先介绍了Redux中Store、Actions、Reducers这些基本的概念组成，然后用Angular CLI创建简单的Angular项目，并且引入Redux；接下来本文详细地介绍了如何使用TypeScript编写Redux中的各个组件，从Store到Action Types等，最后将这些与组件结合为完整的TodoList应用。更多Angular相关资料参考这里。

• 快速构建基于React的CMS系统：CMS内容管理系统是现代常见的Web应用形式之一，本文则是介绍利用Firebase与React快速开发简单的CMS系统；Firebase是云端的实时NoSQL数据库，其提供了方便的数据操作接口，免去了开发者自行搭建服务器的烦恼。本文首先介绍了CMS中界面组件的划分与纯组件的实现，然后介绍了CMS中需要的接口逻辑以及如何用Firebase实现这些接口；更多React相关资料参考这里。

工程实践

立足实践，提示实际水平

• 来自Treebo的React与Preact PWA性能分析：本文是Addy Osmani大神参与编写的，印度Treebo公司使用的Preact PWA性能优化案例；相较于旧版本的网站，新版本在首屏渲染上提高了70%，初始交互等待时间减少了31%，大部分的访客在3G环境下只需要4s即可以浏览完整内容。本文以React单页应用为例，讨论了服务端渲染带来的首屏渲染的性能提升；然后讨论了基于路由的代码分割与懒加载，接下来还讨论了PRPL模式、HTML Streaming、关键路径CSS、离线静态资源缓存、从React切换到Preact等内容。更多PWA相关资料参考这里。

• Electron：那些令人烦恼的部分：绝大部分的跨平台编程语言或者框架都有其优势与缺陷，可能更多的开发者了解到的是Electron优秀的方面，本文则换个思路来聊聊Electron中那些令人烦恼的部分。本文依次讨论了应用安装、持续集成与多平台构建、应用体积、局部更新、安全性、代码混淆与保护等内容；

• 小米直达服务探秘：如何保证移动Web体验？：小米直达服务是小米推出的App混合开发框架，它可以实现秒开，同时可以在浏览器、短信、微信等地方打开。本文即是小米直达服务Web体验保障方面的实践分享，讨论了目前移动Web体验的瓶颈、小米直达服务的机制与核心关键等内容。更多Web性能优化相关资料参考这里。

• 理解iOS 11中WebView的Viewport：iOS 11为我们带来了新的状态栏，其刘海造型可能对于像Apache Cordova或者Ionic这样的混合式开发者造成一定的影响；特别是对于那些使用了fixed来布局顶部栏的Web应用，本文即是对于iOS 11自带的WebView的Viewport属性进行详细解析。本文首先讨论了iOS 11，包括iPhone X带来的改变，然后介绍了如何利用constant或者calc函数来优化顶部栏的显示效果。

深度阅读

深度思考，升华开发智慧

• 全栈Web学习路径：本文是针对全栈JavaScript开发学习与进阶的指南，涵盖了从基础语法到React、Node.js等多方面的学习路径与资料推荐。本文涵盖了课程、项目、书籍等多种资源形式，介绍了语法基础、React应用开发、Node.js服务端应用程序开发等多个领域的内容；更多Web开发相关资料参考这里。

• 现代JavaScript指南：本书覆盖了从语法基础到OOP等复杂概念的各方面的JavaScript相关的知识教程，包括了简介、语法基础、代码质量保障、Object、数据类型、函数与函数式编程、类与集成、异常处理、浏览器对象等多方面的内容；更多JavaScript相关参考这里。

• JavaScript工作原理：内存管理与常见内存泄露分析：本系列文章皆着眼于深度解析JavaScript内部运行原理，而本文则重点讨论编程语言中常见的内存管理问题；并且还提出了对于处理常见的内存泄露的建议。本文首先介绍了变量内存的生命周期、内存的定义、如何分配内存、垃圾回收的机制、内存泄露的定义以及常见的四种内存泄露的形式与应对手段；更多V8相关资料参考这里。

• 对于CSS-in-JS的缺陷分析：本文作者从自己的角度阐述了对于CSS-in-JS的看法，将其形容为：就像用坏掉的螺丝刀替换你最爱的工具；阅读的时候也可以看下评论区的回复，辨证地来看待作者的观点。随着React等现代Web框架的兴起，CSS-in-JS也受到了很多的关注，人们期望用它来解决传统CSS中全局作用域、代码难以管理的问题。不过本文作者确认为CSS-in-JS本身就是反模式，他从代码的组织结构、耦合方式，CSS-in-JS带来的界面一致性地破坏、代码可复用性地降低等角度来阐述自己的观点，最后提出了还是应该使用OOCSS这样标准的CSS工程实践来解决CSS自身的问题。更多CSS/SCSS相关资料参考这里。

开源项目

乐于分享，共推前端发展

• src2png：src2png能够将源代码转化为语法高亮、 阅读性高的图片；其会首先启动包含热加载、Webpack、Babel等多重特性的POI开发服务器，然后加载Puppeteer并在Headless Chrome中将代码渲染截图。

• best-resume-ever：best-resume-ever是基于Vue.js开发的，简单、易用、美观的个人简历制作模板，其使用LESS来定义样式，并且允许导出为pdf等格式。

• Nulis：Nuils是受到Gingko启发，非常有意思的开源树状结构编辑器，其允许开发者将任何的想法表示为树状结构：从最抽象的想法开始，逐步添加包含更多细节的嵌套描述卡片。这种格式会非常有助于编写故事、文章、大纲、GTD等等。

• hiproxy: hiproxy是一个基于Node.js开发的轻量级网络代理工具，主要目的是为了解决多个开发者在开发过程中遇到的hosts管理和反向代理的问题。使得在开发时，不再需要修改系统hosts和启动一个Nginx服务。hiproxy扩展了hosts的语法，支持端口号。此外，hiproxy还支持通过类似于nginx配置文件的语法来配置代理。

巅峰人生

• 从新手村到史诗英雄，程序员的打怪升级之路：本文是EGO会员，饿了么北京研发中心总经理史海峰对于程序员成长之路的分享总结。文字依次讨论了大厂职级职等背后的神秘规律、新手村后的快速成长、如何看待跳槽，面试、专职怎么选等内容。

前端之巅

前端之巅是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注前端之巅公众号后回复“加群”。投稿请发邮件到e ditors@cn.infoq.com，注明“前端之巅投稿”；或者可以阅读往期文章。