前端每周清单第 18 期：Firefox、Chrome、React、Angular发布新版本；提升RN应用性能的方法 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的 Web 前端入门与工程实践的前端每周清单系列系列；部分文章需要自备梯子。

前端每周清单第 18 期：Firefox、Chrome、React、Angular发布新版本；提升RN应用性能的方法

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• 《Firefox 54 发布》：在近日发布的 Firefox 54 版本中完成了对于 Firefox 的多进程版本升级，大大提升了稳定性，在未来会保证即使某个页卡崩溃了也不会影响其他页卡。此外，Firefox 54 中还引入了新的 WebExtension API，允许使用 WebExtension 来创建自定义的开发者面板；Firefox 54 中还加入了 CSS 的 clip-path 属性支持等新特性。( https://parg.co/b9c )

• 《Chrome 60 Beta 发布，新增 Patint Timing API》：近日发布的 Chrome 60 Beta 版本中添加了 Paint Timing API、CSS font-display 等新特性，同时优化了证书管理、支付请求接口等功能。我们可以方便地使用 Paint Timing API 来对网页的加载指标中的，首屏绘制与首屏内容绘制进行计算，具体可以参考 Leveraging the Performance Metrics that Most Affect User Experience 这篇文章。( https://parg.co/b9q )

• 《React 15.6.0 发布》：React 15.6.0 中主要带来了输入域的提升以及对于 DePRecation 提示的优化。该版本中 onChange 事件响应会变得更加稳定，并且能够处理 IE11 中存在的部分临界情况；同时该版本还优化了对于使用废弃接口的提示，不再强行使用 console.error 提示，而是替换为了 console.warn。( https://parg.co/b9m )

• 《Angular 4.2 发布》：该版本可以无缝替换之前的 4.x.x 系列版本，主要包含了对于 Angular Form 中的极值校验、提升了 i18n 工具等等内容；之外我们还可以参考 Angular 的现状与 Angular 5 的预定日期这篇文章来了解更多关于 Angular 的讯息。( https://parg.co/b9Y )

• 《ESLint 4.0.0 发布》：作为大版本更新，ESLint 4.0.0 中添加了很多的新特性，并且针对之前版本中包含的错误进行了修正；可以点击查看原文了解具体的规则更新情况以及升级指南。( https://parg.co/b9P )

开发教程

步步为营，掌握基础技能

• 《如何用好 JavaScript console》：JavaScript 中最主要的的调试工具之一即是 console.LOG，而 console 对象还包含着其他几个常用的调试方法。本文则是介绍了 console 对象，以及如何使用它进行简单的时间消耗评测、优化数组或者对象输出格式、通过 CSS 优化输入等等。( https://parg.co/b9o )

• 《九个 React Native 动画指南》：本文通过介绍九个 React Native 动画地实现从零到一的介绍了 React Native 中的动画机制。包含了通过 AniMATEd.timing 来添加样式动画、创建可伸缩的按钮、创建可拖拽的卡片、动态地变换元素的颜色、角度、序列位置等等实例。( https://parg.co/b9d )

• 《Airbnb: 从 Mocha 迁移到 Jest 带来的测试性能优化》：本文介绍了 Airbnb 在将单元测试框架从 Mocha 迁移到 Jest 之后带来的性能提升，原本的测试时间从超过十二分钟降低到了不到五分钟。本文首先介绍了通过简单地全局设置来避免大量地测试代码更改，然后讨论了如何构建测试架构以提供测试速度并且减少不确定性。

• 《在 Vue.js 中使用 Mixins》：在项目开发中我们经常会碰到两个组件的业务逻辑有所相似，可能共享相同的底层业务逻辑；此时我们就需要考虑如何来合理地划分代码，即避免冗余代码，也不能过度抽象。而本文则介绍了如何在 Vue.js 中使用 Mixins 来编写可重复使用的功能代码片；Mixin 允许我们将部分代码片封装到函数中然后动态地在多个组件中使用。( https://parg.co/b9S )

• 《构建 React 组件库》：本系列文章循序渐进地介绍如何设计编写自己的小型组件库并且将其发布到 NPM 仓库中；第一篇文章着眼于如何从零开始搭建开发环境，第二篇文章则介绍如何利用 styled-components 来为组件添加样式、添加调色板、构建高效开发流程以及如何实践 Atomic Design 原则。( https://parg.co/b9u )

工程实践

立足实践，提示实际水平

• 《为什么我选择了 React 而不是 Vue？》：本文作者阐述了自己在技术选型过程中更倾向于 React 的原因，本文带有较强的主观色彩，请读者批判性阅读。本文作者认为 React 与 Vue 虽然是相似的前端组件型库，但是 Vue、Angular、Knockout 等框架依旧是以 HTML 为中心，使用指令来描述部分逻辑；而 React 则是以 JavaScript 为中心，完全使用 JavaScript 代码来描述逻辑。本文从模板、工具、状态的可变性等角度来论证自己的观点。( https://parg.co/b9H )

• 《现代 Web 开发魔法书》：本书是对现代 JavaScript Web 开发中涉及知识的分类与介绍，来源于作者日常工作中发送给全栈 Web 团队新人的资源；目前已经纳入了超过两千的涵盖了项目、工具、插件、服务、文章、数据、站点等多方面的链接。本书包含了 Web 平台概述、HTML5，CSS，JS 特性介绍、常用的 GUI 框架与架构介绍、应用开发流程中使用的工具介绍等等栏目。( https://parg.co/bv9 )

• 《使用 Webpack 的 Magic Comment 特性简化代码分割》：新近发布的 Webpack 2.4.0 版本中引入了所谓的 Magic Comment 特性，该特性允许我们在动态导入时手动指定块名，从而能够帮助我们简化代码分割与服务端渲染的逻辑。本文则是以在 Universal Component 中实现 SSR 为例，介绍如何利用该特性来显式地关联需要导入的组件与块名。( https://parg.co/b9A )

• 《5 个提升 React Native 应用性能的方法》：本文作者分享了自己在过去一段时间内尝试提升公司 React Native 应用性能的实践经验，包括如何设置有效的性能测试、强制启动 no-bind 规则、使用函数式组件、重制 TabMap 的逻辑等等。( https://parg.co/b93 )

深度阅读

深度思考，升华开发智慧

• 《基于 JavaScript 的机器学习》：人工智能与机器学习的浪潮汹涌而来，JavaScript 也并非旁观者；可能有很多人认为 JavaScript 过于缓慢、缺乏大量的科学计算库、仅适用于 Web 开发，而本文以及系列文章则深入浅出地介绍了如何利用 JavaScript 进行常见的深度学习操作。本文即以简单的回归拟合为例，从最基础的库安装、数据导入、数据预处理到模型训练、模型预测 介绍了如何使用 JavaScript 进行简单的机器学习任务。( https://parg.co/b9K )

• 《京东 618：如何配合业务打造 JDReact 三端融合开发平台？》：良好解决多终端开发问题是提升团队开发效率的有效方法，本文全面解析了京东 JDReact 三端融合平台。本文首先回顾了传统无线开发的痛点，然后讨论了 React Native 的优势与局限，最后介绍了 JDReact 三端融合平台的整体架构、在功能、加载性能、内存方面的改进与优化以及发布到生产环境中的流程等内容。( https://parg.co/b9U )

• 《谈爬虫反爬虫套路，以及前端工程师在该领域的逆袭》：本文首先介绍了爬虫与反爬虫的现状，造成目前爬虫流量泛滥的原因，然后讨论了，爬虫反爬虫技术的现状以及双方相互套路的方式，最后聊了下前端工程师在该领域会起到的作用。( https://parg.co/b9b )

• 《JavaScript 内存管理速成》：本系列文章以漫画的方式生动有趣地介绍了 JavaScript 中内存管理的相关知识，首先介绍了 JavaScript 与 C 这两个风格迥异的语言是如何进行内存管理的，然后讨论了 ArrayBuffers 与 ShardArrayBuffurs 存在的意义以及可能引起的临界情况，最后讨论了在未来 WebAsSEMbly 开发中应该如何使用 Atomics 来处理并发情况下的临界情况。( https://parg.co/b9p )

• 《详解 HTTPS 基础以及如何从 HTTP 切换到 HTPPS》：HTTPS 已经成为了现代站点不可或缺的部分，Chrome 与 Firefox 等浏览器会为没有使用 HTTPS 的网站设置警告标识，搜索引擎也会给 HTTPS 的站点进行额外加分。本文则是先详细地解释 HTTPS 的底层原理，然后介绍如何为 apache 站点添加证书并且启用 HTTPS 连接。( https://parg.co/b9Z )

开源项目

乐于分享，共推前端发展

• 《Amplitude.js》：amplITude.js 是轻量级、零依赖的现代 HTML5 音频播放器，。( https://github.com/521dimensi... )

• 《WCDB》：WCDB 是由微信开源的，一个高效、完整、易用的移动数据库框架，基于 SQLCipher，支持 iOS, macOS 和AndROId。( https://github.com/Tencent/wcdb )

• 《flubber》：flubber 是用于平滑形状变换动画的工具库。在 Web 开发中，如果我们需要在基于 SVG 或者 Canvas 构建的两个图形之间进行变换；如果这两个图形本身毫无关联，那么可能会出现异常的中间状态。而 flubber 则内置了一些推测算法来帮我们平滑这个变换过程。

• 《collect.js》：collect.js 提供了便捷且零依赖的操作数组与对象的多个工具函数，譬如 combine 函数可以将两个数组合并为对象列表，groupBy 可以根据键来进行分组等等。( https://github.com/ecrmnn/col... )

巅峰人生

前端之巅

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