前端每周清单第 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，注明“前端之巅投稿”。

前端之巅微信底图－5.jpg