前端每周清单第 10 期：Firefox53、React VR 发布、JS 测试技术概述、Microsoft Edge 现代 DOM 树构建及性能之道

前端 前端每周清单

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

新闻热点

国内国外，前端最新动态

• 《Firefox 53 发布》：近日，Firefox 53 正式发布；新版本中提供了一系列的特性与问题修复。新版本中其为 Windows 平台引入了 Quantum Compositor Process、新增了跨浏览器插件标准 WebExtension 部分接口特性、提供了 CSS Mask 特性的支持并且优化了浏览器中音视频播放的体验。( https://parg.co/bRT )

• 《Facebook 发布 React VR 来简化 Web 中虚拟现实应用的开发》：近年来，虚拟现实技术迅猛发展，有望成为下一个主流处理平台。而 Facebook 近日正式发布 React VR，其能够帮助开发者快速构建 VR 应用。React VR 同样基于 React 与 React Native 提供了声明式的代码风格，能够允许有 React 开发经验的开发者快速上手。( https://parg.co/bfR )

• 《Relay Modern 正式发布》：Relay Modern 是 Relay 的重构版本，其增强了框架的易用性、可扩展性以及在移动端的性能表现。Relay Modern 支持声明式数据抓取、提供了 AOT 性能优化以及新的垃圾回收机制。( https://parg.co/bfs )

• 《Expo SDK 16.0.0 版本发布》：近日，Expo SDK 发布了其 16.0.0 版本，其提升了内置 iOS 开发者工具的表现、添加了对于 React 16 alpha 版本的兼容性支持以及 react-devtools 的支持。( https://parg.co/bfh )

开发教程

步步为营，掌握基础技能

• 《JavaScript 中处理 undefined 的 7 个技巧》：不同于 Python 或者 Java 中仅有 null 或 nil 来表示空值，JavaScript 为我们提供了 undefined 与 null。本文则是深度分析了 undefined 与 null 的区别，讨论了实际工程开发中 undefined 的使用场景，譬如未初始化对象、不存在的对象属性或者方法、越界访问、无返回值的函数等；作者最后还给出了一些对于 undefined 的注意点，譬如提高内聚性降低耦合性等。( https://rainsoft.io/7-tips-to-handle-undefined-in-javascript/ )

• 《在 Vue.js 项目中使用第三方库》：本文介绍了如何在基于单文件模块的 Vue.js 项目中使用 Lodash、Moment、Axios 这些优秀的第三方库或框架。本文递进地介绍了譬如全局变量引用、单文件导入、扩展 Vue 对象、插件实现等多种方式。( https://parg.co/bf4 )

• 《Vue.js 2 中的权限验证指南》：本文介绍了如何快速构建 Vue.js 2 应用程序并且添加合适的权限验证模块。本文首先介绍了 Vue.js、Angular 以及 React 之间设计思想的对比，然后介绍了 Vue.js 2.0 中的核心概念与基本用法，最后以某个真实的登录控制案例介绍了如何为 Vue.js 应用中添加权限验证功能。( https://auth0.com/blog/vuejs2-authentication-tutorial/ )

• 《Relay Modern 与 GraphQL 实践》：GraphQL 允许接口的使用者快速地声明他们的数据需求，而近日正式发布的 Relay Modern 工具内建地支持 GraphQL。本文即是介绍如何在项目中使用 Relay Modern 与 GraphQL 来获取数据、管理状态，本文首先介绍了 Relay Modern 的设计理念与目标，然后介绍了其与传统的 Relay 框架之间的区别，最后以某个简单的例子来说明 Relay Modern 在项目中的真实实践用法。( https://parg.co/bfO )

• 《Node.js 中 Object Streams 的终极指南》：Node.js 中的流为我们提供了强大的功能，允许我们异步地处理输入与输出，或者在多个独立步骤中进行数据转换。而本文则是首先回顾了流相关的理论，然后介绍了如何像 Gulp 那样进行对象流的转换操作。( https://parg.co/bfV )

工程实践

立足实践，提示实际水平

• 《2017 年 JavaScript 测试技术概述》：本文涵盖了 2017 年中 JavaScript 领域流行的测试理念、名词与概念、工具以及测试的方法论。本文介绍了基本的测试类型的划分、常用测试工具的划分、以及 Jest、Mocha、Nightwatch 这样的常用测试工具的选项与实践技巧。( https://parg.co/bf3 )

• 《不要仅依赖 IP 地址猜测客户端语言》：本文是作者从自己在欧洲旅行时候的切身访问体验，总结而出的网站切换客户端语言的误区与改进方向。作者认为大型的门户网站不应该只依赖于用户 IP 地址来决定其语言，而应该充分应用 HTTP 请求头中的相关字段来动态地切换。( https://parg.co/bff )

• 《大型高性能 React PWA 如何消除各类性能瓶颈？》：想要构建一款性能出色的 Web 应用程序，我们需要投入大量技术周期以检测时间浪费点、了解其发生原因并尝试各类解决方案。遗憾的是，这种做法往往无法快速解决问题。性能无疑是一项永恒的命题，技术人员永远徘徊在观察与测量当中，却几乎永远找不到最优解。不过利用 Twitter Lite，我们已经在众多层面内取得了细小但却极具价值的改进：从初始加载时间到 React 组件渲染(防止二次渲染)，再到图像加载以及更多层面。尽管大多数变更本身并不显著，但其相加所带来的最终结果是，我们得以构建起一款规模极大且速度极快的渐进式 Web 应用程序。( https://parg.co/bfM )

• 《Atom 是如何优化客户端应用的启动时间》：本文是 Atom 技术团队对过去数月中优化客户端应用的启动时间的实践的总结。本文首先介绍了减少启动时间面临的一系列困难，然后详细解释了 Atom 1.17 中使用的一系列优化技巧，最后描述了未来规划的一系列进阶优化方向。本文提及的优化方式包括 V8 snapshots、electron-link、Custom Elements 与 jQuery、优化 require 时间、重构 atom 全局对象、优化样式表加载、预加载包体等等方面。( https://parg.co/bft )

• 《使用 create-graphql-server 快速搭建 GraphQL 服务器》：本文介绍了如何用几个简单的命令快速搭建 GraphQL 服务器，其使用 Node.js 作为应用后端、Mongodb 作为数据存储。( https://parg.co/bfQ )

深度阅读

深度思考，升华开发智慧

• 《应该知道的关于 Angular 中的变化检测的知识》：本文探讨了 Angular 4.0 中使用的变化检测机制，介绍了其底层实现与常见的用户场景。本文主要包含两个部分，第一部分相对偏向于技术实现的介绍与链接分享，深入浅出地解释了 4.0.1 版本中变化检测的机制原理；第二部分则是介绍了变化检测如何被应用到真实的项目与用户使用案例中。( https://parg.co/bfC )

• 《单页应用的数据流方案探索》：本文深入浅出地讨论了前端应用的数据流实践方案，首先引入了 MDV 以及响应式编程的概念，然后讨论了真实业务场景下数据来源的抽象层次，接下来又分析了组件内部状态与外置状态的常用处理方案的对比，最后介绍了 MVI 架构、组件化与分形、状态的分组与管理以及中前端数据建模等相关内容。( https://parg.co/bfN )

• 《Microsoft Edge 中的现代 DOM 树构建之道》：DOM 是 Web 平台中基础的编程模型，其设计与性能会影响到浏览器中的方方面面。在过去的三年中，Microsoft Edge 团队一直致力于重构 IE 中过时且低效的 DOM 树数据结构。本文首先会回顾 IE 与 Microsoft Edge 中 DOM 的变迁历史，然后介绍了最新的 Microsoft Edge 中使用的 DOM 树的数据结构和其能够带来巨大性能提升的原因。( https://parg.co/bf8 )

• 《Microsoft Edge 中的 JavaScript 性能、WebAssembly 以及 Shared Memory》：JavaScript 的性能表现是 Web 开发中永恒的话题，而 Microsoft Edge 团队也在实时接收用户反馈以提升 Chakra JavaScript 引擎的性能表现。本文首先介绍了 Chakra 中的新特性，包括了一系列提升 JavaScript 性能表现的技巧；然后还讨论了 WebAssembly、Shared Memory 与 Atomics 等新特性在 Edge 中的具体实现。( https://parg.co/bfk )

开源项目

乐于分享，共推前端发展

• 《pnpm》：高性能、低空间占用的 npm install 替代实现。目前标准的 npm 与 Facebook 的提升版 yarn 都尚未解决系统中多 Node 项目时多个的 node_modules 带来的磁盘占用问题；而 pnpm 则会在 ~/.pnpm-store 中存储全部依赖，然后在需要的项目中以链接方式引入，从而减少整体的磁盘使用空间。( https://github.com/pnpm/pnpm )

• 《pwmetrics》：基于 LightHouse 封装的能够在命令行中使用的 PWA 应用的性能评测工具。( https://github.com/paulirish/pwmetrics )

• 《haul》：Haul 是基于 Webpack 这样开源框架构建的 react-native 命令行工具的替代品，它支持从运行于开发时服务器到打包发布至生产环境等全生命周期的功能。Haul 的最大特性在于允许开发者使用 Webpack 生态系统中各种合影的加载器与插件，并且不需要 watchman 等外部工具的辅助，还优化了错误提示信息。( https://github.com/callstack-io/haul )

• 《react-move》：方便快捷地 React 组件动画库，支持 React、React Native 以及 React VR。React Move 允许开发者忽略具体的动画属性控制而完全托管于框架，同时它还提供了多个生命周期中的回调函数方便开发者进行控制。( https://github.com/tannerlinsley/react-move )

• 《async-reactor》：React 中异步无状态函数式组件加载工具，其支持在函数中使用 import 来引入模块或者 fetch 抓取第三方数据。( https://github.com/xtuc/async-reactor )

  巅峰人生

前端之巅

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