前端每周清單第10期：Firefox 53、React VR發布、JS測試技術概述、Microsoft Edge現代DOM樹構建及性能之道

作者：王下邀月熊

編輯：尾尾

前端每周清單專註前端領域內容，分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

新聞熱點

國內國外，前端最新動態

• 《Firefox 53 發布》：近日，Firefox 53 正式發布；新版本中提供了一系列的特性與問題修復。新版本為 Windows 平台引入了 Quantum Compositor Process、新增了跨瀏覽器插件標準 WebExtension 部分介面特性、提供了 CSS Mask 特性的支持並且優化了瀏覽器中音視頻播放的體驗。

• 《Facebook 發布 React VR 來簡化 Web 中虛擬現實應用的開發》：近年來，虛擬現實技術迅猛發展，有望成為下一個主流計算平台。而 Facebook 近日正式發布 React VR，其能夠幫助開發者快速構建 VR 應用。React VR 採用了與 React 和 React Native 相同的聲明式代碼風格，方便有 React 開發經驗的開發者快速上手。

• 《Relay Modern 正式發布》：Relay Modern 是 Relay 的重構版本，其增強了框架的易用性、可擴展性以及在移動端的性能表現。Relay Modern 支持聲明式數據抓取、提供了 AOT 性能優化以及新的垃圾回收機制。

• 《Expo SDK 16.0.0 版本發布》：近日，Expo SDK 發布了其 16.0.0 版本，新版本提升了內置 iOS 開發者工具的表現、添加了對於 React 16 alpha 版本的兼容性支持以及對 react-devtools 的支持。

開發教程

步步為營，掌握基礎技能

• 《JavaScript 中處理 undefined 的 7 個技巧》：不同於 Python 或者 Java 中僅有 null 或 nil 來表示空值，JavaScript 中採用 undefined 和 null 來表示空值。本文則是深度分析了 undefined 與 null 的區別，討論了實際工程開發中 undefined 的使用場景，譬如未初始化對象、不存在的對象屬性或者方法、越界訪問、無返回值的函數等；作者最後還給出了一些關於處理 undefined 的建議，譬如提高內聚性降低耦合性等。

• 《在 Vue.js 項目中使用第三方庫》：本文介紹了如何在基於單文件模塊的 Vue.js 項目中使用 Lodash、Moment、Axios 這些優秀的第三方庫或框架。本文遞進地介紹了譬如全局變數引用、單文件導入、擴展 Vue 對象、插件實現等多種實現方式。

• 《Vue.js 2 中的許可權驗證指南》：本文介紹了如何快速構建 Vue.js 2 應用程序並且添加合適的許可權驗證模塊。本文首先比較了 Vue.js、Angular 以及 React 之間的設計思想，然後介紹了 Vue.js 2.0 中的核心概念與基本用法，最後以某個真實的登錄控制案例介紹了如何為 Vue.js 應用添加許可權驗證功能。

• 《Relay Modern 與 GraphQL 實踐》：GraphQL 允許介面的使用者快速地聲明他們的數據需求，而近日正式發布的 Relay Modern 工具內建地支持 GraphQL。本文即是介紹如何在項目中使用 Relay Modern 與 GraphQL 來獲取數據、管理狀態，本文首先介紹了 Relay Modern 的設計理念與目標，然後介紹了其與傳統的 Relay 框架之間的區別，最後以某個簡單的例子來說明 Relay Modern 在項目中的真實實踐用法。

• 《Node.js 中 Object Streams 的終極指南》：Node.js 中的流為我們提供了強大的功能，允許我們非同步地處理輸入與輸出，或者在多個獨立步驟中進行數據轉換。而本文則是首先回顧了流相關的理論，然後介紹了如何像 Gulp 那樣進行對象流的轉換操作。

工程實踐

立足實踐，提示實際水平

• 《2017 年 JavaScript 測試技術概述》：本文涵蓋了 2017 年中 JavaScript 領域流行的測試理念、名詞與概念、工具以及測試的方法論。本文介紹了基本的測試類型的劃分、常用測試工具的劃分、以及 Jest、Mocha、Nightwatch 這些常用測試工具的配置選項與實踐技巧。

• 《不要僅依賴 IP 地址猜測客戶端語言》：本文是根據作者自己在歐洲旅行時的切身體驗，總結而出的網站切換客戶端語言的誤區與改進方向。作者認為大型的門戶網站不應該只依賴於用戶 IP 地址來決定其語言，而應該充分利用 HTTP 請求頭中的相關欄位來動態地切換。

• 《大型高性能 React PWA 如何消除各類性能瓶頸？》：想要構建一款性能出色的 Web 應用程序，我們需要投入大量技術周期以檢測時間浪費點、了解其發生原因並嘗試各類解決方案。遺憾的是，這種做法往往無法快速解決問題。性能無疑是一項永恆的命題，技術人員永遠徘徊在觀察與測量當中，卻幾乎永遠找不到最優解。不過利用 Twitter Lite，我們已經在眾多層面內取得了細小但卻極具價值的改進：從初始載入時間到React組件渲染（防止二次渲染），再到圖像載入以及更多層面。儘管大多數的改進效果並不明顯，但其相加所帶來的最終結果是，我們得以構建起一款規模極大且速度極快的漸進式 Web 應用程序。

• 《Atom 是如何優化客戶端應用的啟動時間》：本文是 Atom 技術團隊對過去數月中優化客戶端應用的啟動時間的實踐的總結。本文首先介紹了減少啟動時間面臨的一系列困難，然後詳細解釋了 Atom 1.17 中使用的一系列優化技巧，最後描述了未來規劃的一系列進階優化方向。本文提及的優化方式包括 V8 snapshots、electron-link、Custom Elements 與 jQuery、優化 require 時間、重構 atom 全局對象、優化樣式表載入、預載入包體等等方面。

• 《使用 create-graphql-server 快速搭建 GraphQL 伺服器》：本文介紹了如何用幾個簡單的命令快速搭建 GraphQL 伺服器，其使用 Node.js 作為應用後端、Mongodb 作為數據存儲。

深度閱讀

深度思考，升華開發智慧

• 《Microsoft Edge 中的現代 DOM 樹構建之道》：DOM 是 Web 平台中基礎的編程模型，其設計與性能會影響到瀏覽器中的方方面面。在過去的三年中，Microsoft Edge 團隊一直致力於重構 IE 中過時且低效的 DOM 樹數據結構。本文首先會回顧 IE 與 Microsoft Edge 中 DOM 的變遷歷史，然後介紹了最新的 Microsoft Edge 中使用的 DOM 樹的數據結構和其能夠帶來巨大性能提升的原因。

• 《Microsoft Edge 中的 JavaScript 性能、WebAssembly 以及 Shared Memory》：JavaScript 的性能表現是 Web 開發中永恆的話題，而 Microsoft Edge 團隊也在實時接收用戶反饋以提升 Chakra JavaScript 引擎的性能表現。本文首先介紹了 Chakra 中的新特性，包括了一系列提升 JavaScript 性能表現的技巧；然後還討論了 WebAssembly、Shared Memory 與 Atomics 等新特性在 Edge 中的具體實現。

• 《應該知道的關於 Angular 中的變化檢測的知識》：本文探討了 Angular 4.0 中使用的變化檢測機制，介紹了其底層實現與常見的用戶場景。本文主要包含兩個部分，第一部分相對偏向於技術實現的介紹與鏈接分享，深入淺出地解釋了 4.0.1 版本中變化檢測的機制原理；第二部分則是介紹了變化檢測如何被應用到真實的項目與用戶使用案例中。

• 《單頁應用的數據流方案探索》：本文深入淺出地討論了前端應用的數據流實踐方案，首先引入了 MDV 以及響應式編程的概念，然後討論了真實業務場景下數據來源的抽象層次，接下來又分析了組件內部狀態與外置狀態的常用處理方案的對比，最後介紹了 MVI 架構、組件化與分形、狀態的分組與管理以及中前端數據建模等相關內容。

開源項目

樂於分享，共推前端發展

• 《pnpm》：高性能、低空間佔用的 npm install 替代實現。目前標準的 npm 與 Facebook 的提升版 yarn 都尚未解決系統中多 Node 項目時多個的 node_modules 帶來的磁碟佔用問題；而 pnpm 則會在 ~/.pnpm-store 中存儲全部依賴，然後在需要的項目中以鏈接方式引入，從而減少整體的磁碟使用空間。

• 《pwmetrics》：基於 LightHouse 封裝的能夠在命令行中使用的 PWA 應用的性能評測工具。

• 《haul》：Haul 是基於 Webpack 這樣開源框架構建的 react-native 命令行工具的替代品，它支持從運行於開發時伺服器到打包發布至生產環境等全生命周期的功能。Haul 的最大特性在於允許開發者使用 Webpack 生態系統中各種合影的載入器與插件，並且不需要 watchman 等外部工具的輔助，還優化了錯誤提示信息。

• 《react-move》：方便快捷地 React 組件動畫庫，支持 React、React Native 以及 React VR。React Move 允許開發者忽略具體的動畫屬性控制而完全託管於框架，同時它還提供了多個生命周期中的回調函數方便開發者進行控制。

• 《async-reactor》：React 中非同步無狀態函數式組件載入工具，其支持在函數中使用 import 來引入模塊或者 fetch 抓取第三方數據。

巔峰人生

《啟蒙老師馬士兵：編程語言哪家強？》：馬士兵老師是很多程序員的啟蒙老師，此次做客大咖說，馬老師分享了關於熱門編程語言、軟體開發崗位、面試技巧和培訓班相關的看法。

前端之巔

「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回復「加群」。投稿請發郵件到editors@cn.infoq.com，註明「前端之巔投稿」。