前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

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

新闻热点

国内国外，前端最新动态

• Microsoft 宣发面向 iOS 与 Android 平台的 Microsoft Edge ：为了保证 Windows 用户各平台使用体验的一致性，Microsoft 于本周发布了针对于 iOS 与 Android 平台的 Microsoft Edge 浏览器以及针对 Android 平台的 Microsoft Launcher；不过目前各平台上的 Edge 浏览器仍然使用的是操作系统默认的渲染引擎，即 iOS 系统上的 Webkit 引擎与 Android 的 Chrome 引擎，因此开发者们也无需担心需要针对移动版的 Microsoft Edge 进行适配。
• Firefox 56 正式发布：本周 Firefox 56 版本正式发布，其搭载的新一代 Quantum 引擎带来了大幅度的性能提升、全新的交互界面、升级版本的开发者工具等诸多特性与优化。除此之外，Firefox 56 还提供了便捷的截图功能，允许使用者对于网页截图编辑并且快速保存到云端；同时引入了 <link rel="preload"> 以提供资源预加载功能，并且允许使用者通过 -headless 指令来启动无界面化的浏览器。
• Mocha 4.0.0 发布：本周 Mocha 4.0.0 版本正式发布，其不再支持 Node.js Pre-v4.0.0 及之前的版本，不再支持 npm v2.15.11 以及之前的版本，并且计划不再支持 Bower；除了版本的兼容性之外，Mocha 不再会强制测试完毕后退出，并且优化了输出显示。
• iView 2.4 版本发布：iView 是基于 Vue.js 构建的界面组件与插件库，其包含了 TalkingData 开发的一系列面向中间层与后端业务逻辑的解决方案；iView 提供了基础组件、表单组件、视图组件、导航组件、图表与其他多种类型的组件。

开发教程

步步为营，掌握基础技能

• 8 个关键的 React 技术选型：自 2013 年 React 开源以来，React 技术栈也发生了急剧的变化与更新，现在搜索到的不少文章可能也都过时了；本文则是对于现在进行 React 开发所需要的技术栈进行了盘点。首先是开发环境，create-react-app 以 65% 独占鳌头；在类型系统上，有 42% 的开发者选择了 PropTypes，34% 的开发者选择了 TypeScript。而在状态管理上，48% 的使用 Redux，11% 的使用了 MobX；越来越多的开发者也选择使用 CSS 或 SASS 设置样式，选择用 HoC 或者 Render Props 来复用逻辑。更多 React 相关资料查看这里。
• Vue.js 2 与 Vue.js 3 中响应式实现的对比：Vue.js 核心团队已经在讨论 Vue.js 3 中核心的响应式实现方式，在保证 API 一致的情况下，其内部实现方式可能会发生变化，本文即是对两种响应式实现方案进行对比。Vue.js 2.0 的响应式主要依赖 Object.defineProperty，其具有较好地浏览器兼容性，但是其无法直接监听数组下标方式变更以及动态添加的属性；而 Vue.js 3 中则计划使用 ES6 Proxy 来实现响应式监听，其能够简化源代码、易于学习，并且还能带来更好地性能表现。更多 Vue.js 相关资料查看这里。
• HTTPS 工作原理简述：本文是对于 HTTPS 协议原理的简要介绍，随着越来越多的站点全站化 HTTPS，我们也有必要去了解 HTTPS 的相关知识。本文首先概述了 HTTPS 的机制原理，然后介绍了 Diffie-Hellman 算法，接下来介绍了电子证书、Asymmetric Key Encryption、电子签名、证书校验等内容；更多 HTTPS 相关资料查看这里。
• CSS Grid 中的技巧与绊脚石：CSS Grid 为我们带来了新的布局方式，不过在实际使用的过程中也存在着很多的问题，本文即是对这些技巧与绊脚石进行盘点。本文首先分析了 CSS Grid 相较于 Flexbox 的优势，然后讨论了 CSS Grid 与 Flexbox 各自的适用场景、自适应尺寸的 CSS Grid、如何利用 CSS Grid 实现瀑布流、如何添加背景与边距色、如何进行嵌套布局、如何调试等内容；更多 CSS 相关资料查看这里。

工程实践

立足实践，提示实际水平

• React, 内联函数与性能：很多关于 React 性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一；不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。作者从自己的实践谈起，首先讨论了内联函数可能拖慢性能的两个原因：内存分配与垃圾回收、shouldComponentUpdate；作者认为使用内联函数反而能够减少组件初始化时的耗时，而 shouldComponentUpdate 或者 PureComponent 也并非所有的情况都能起作用，我们也是应该因时而异。更多 React 相关资料查看这里。
• Angular 性能优化建议：Oasis Digital 一直在使用 Angular 来构建大型软件项目，而在多年的实践中，特别是在构建性能敏感的应用过程中，工程师们总结了很多的经验教训；本文即是他们分享的三个最为重要的性能优化相关的建议。本文首先讨论了对于运行时性能的定义与指标构成，然后分析了如何提升事件的响应速度、如何最小化变化检测的范围、如何最小化 DOM 操作这三个优化策略。更多 Angular 相关资料查看这里。
• 响应式图片基础：图片是现代网站的重要组成，其能够增强网页的表现力与感染力；不过用户往往不愿意过久地等待图片加载，因此选择合适的图片尺寸能够大大提升用户体验。作者在本文中阐释了响应式图片的基本概念以及常见的设置响应式图片的方法；本文首先讨论了如何选择合适的方式来设置响应式图片、如何选择合适的分割点、像素与百分比的对比、浏览器中 size 属性的作用、利用 CSS 使得图片更加流畅等待。更多性能优化相关资料参考这里。

深度阅读

深度思考，升华开发智慧

• Vue.js 现状盘点与未来规划：本文不是一篇教程，而是以时间线叙述的方式来介绍 Vue.js 的创建与发展，Vue.js 技术社区的现状以及未来 3.0 版本的规划。本文首先介绍了 Vue.js 的创建初衷与设计理念，然后介绍了 Vue.js 目前的各种资源：学习资料、周报、论坛、社区等等，还有 Vue.js 相关的 Weex 这样的原生扩展。最后本文还讨论了 2.0 版本中对于测试套件、TypeScript 支持、ESLint 优化等提升，以及 3.0 版本中对核心的响应式机制、对于旧版本浏览器的支持等规划。更多 Vue.js 相关资料查看这里。
• V8 引擎中针对 ES2015 Proxy 进行的优化：Proxy 是 ES2015 的重要组成部分，其也被逐步地应用到众多的项目或者库中，譬如 jsdom、Comlink RPC 等；近日来 V8 团队也在致力于提升 Proxy 在 V8 中的性能表现，本文主要分享了 V8 中 Proxy 的性能提升范式，也有助于开发者了解 Proxy 的实现原理。本文首先分析了老版本的 Proxy 实现原理与工作机制，然后讨论了优化的解决方案以及现实环境下的性能对比；更多 V8 相关资料查看这里。
• 图片优化中的必知必会：截止 2017 年，图片仍然是网络带宽最大的占用者，参考 HTTP Archive 的统计数据，所有抓取的网页数据中有超过 60% 的流量是 JPEG、PNG 以及 GIF 等图片资源；Addy Osmani 则在本书中非常详细地阐述了图片压缩中必知必会的知识。本书首先抛出了观点：所有的图片都应该进行合适地压缩，所有的压缩都应当是自动化地进行, 接下来本书依次介绍了如何判断图片是否需要压缩、如何选择合适的图片格式、JPEG 的格式介绍与压缩技巧、WebP 介绍与浏览器的支持情况、SVG 压缩技巧、避免重复压缩、雪碧图、缓存、预加载等等内容；更多性能优化相关资料参考这里。
• 大型代码库迁移到 React 16 过程中学到的知识：在 Facebook 正式发布了 React 16.0 版本之后，新的 Fiber 渲染流带来了更多的性能提升；本文则是来自 Discord 的工程师分享的它们将原有应用升级到 React 16.0 版本的经验。本文首先分析了新版本中带来的譬如 ErrorBoundary 等一系列的特性变化，分享了 Discord 内部关于是否有必要升级的讨论；然后介绍了利用 jscodeshift 来修正 PropTypes、如何安全移除原有内部 API 的使用、如何升级依赖，以及 React Native 中需要进行的升级工作等内容。更多 React 相关资料查看这里。

开源项目

乐于分享，共推前端发展

• Vuera : Vuera 是同时兼容 React 与 Vue.js 组件的集成框架，它允许开发者在 React 中引入 Vue.js 组件，或者在 Vue.js 中引入 React 组件。Vuera 算是非常不错的实验性尝试，不过其具体的性能表现如何还有待观察。
• Nest : Nest 是基于 TypeScript 的用于构建高性能、可扩展的 Node.js 应用的框架，其同时整合了面向对象编程 OOP 与函数式编程 FP 以及函数响应式编程 FRP 优秀理念。Nest 提供了类似于 Angular、Express 这样著名框架的接口，内置了 WebSocket、响应式微服务支持、管道等多种功能特性。
• Sentineljs : SentinelJS 是轻量级的，允许通过 CSS 选择器设置监听目标，并且动态监测新 DOM 节点创建的库；它能够在监控到新的 DOM 节点创建完毕之后自动调用回调函数。SentinelJS 相较于其他解决方案，使用了动态定义的 CSS Animation 规则中的 animationstart 事件来监听某个元素是否存在，能够获得比 Mutation Observer 更好地性能表现。

巅峰人生

• 欲修炼成架构师，必先……：本文是互联网老兵陈美珍（Frank）分享的其对于架构师的看法与理解，以及成为架构师所需要各方面能力的讨论。作者首先分析了什么是架构师以及架构师在团队中的定位，然后讨论了架构师与传统领域专家的异同，最后分享了其认为架构师应该具备的各项能力，从基础的逻辑、抽象、想象，到空杯、好奇、实践的心态，以及技术架构与组织架构等待。

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com ，注明“前端之巅投稿”。

感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。