前端每周清单: iOS 11 Viewport 解析，Preact PWA 性能优化案例

Posted 2021-05-01 前端之巅

重要的事情要特意提醒： 由于微信不支持外链（注意是外链），查看本文带链接版请点击 阅读原文。

最近 React 专利事件终于开始发酵，著名博客程序 WordPress 创始人 Matt Mullenweg 宣布弃用 React，百度也传出要求全面停止使用React。继续关注事态的发展。

新闻热点

国内国外，前端最新动态

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 [e-mail]，注明“前端之巅投稿”。