前端每周清单第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/521dimensions/amplitudejs )

• 《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/collect.js )

巅峰人生

前端之巅

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