摘要：新聞熱點(diǎn)國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)發(fā)布近日，正式發(fā)布新版本中提供了一系列的特性與問題修復(fù)。而近日正式發(fā)布，其能夠幫助開發(fā)者快速構(gòu)建應(yīng)用。

前端每周清單第 10 期：Firefox53、React VR發(fā)布、JS測(cè)試技術(shù)概述、Microsoft Edge現(xiàn)代DOM樹構(gòu)建及性能之道 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請(qǐng)與InfoQ中文站聯(lián)系。從屬于筆者的  Web 前端入門與工程實(shí)踐的前端每周清單系列系列；部分文章需要自備梯子。

前端 前端每周清單

前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單。

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

《Firefox 53 發(fā)布》：近日，F(xiàn)irefox 53 正式發(fā)布；新版本中提供了一系列的特性與問題修復(fù)。新版本中其為 Windows 平臺(tái)引入了 Quantum Compositor Process、新增了跨瀏覽器插件標(biāo)準(zhǔn) WebExtension 部分接口特性、提供了 CSS Mask 特性的支持并且優(yōu)化了瀏覽器中音視頻播放的體驗(yàn)。( https://parg.co/bRT )

《Facebook 發(fā)布 React VR 來簡(jiǎn)化 Web 中虛擬現(xiàn)實(shí)應(yīng)用的開發(fā)》：近年來，虛擬現(xiàn)實(shí)技術(shù)迅猛發(fā)展，有望成為下一個(gè)主流計(jì)算平臺(tái)。而 Facebook 近日正式發(fā)布 React VR，其能夠幫助開發(fā)者快速構(gòu)建 VR 應(yīng)用。React VR 同樣基于 React 與 React Native 提供了聲明式的代碼風(fēng)格，能夠允許有 React 開發(fā)經(jīng)驗(yàn)的開發(fā)者快速上手。( https://parg.co/bfR )

《Relay Modern 正式發(fā)布》：Relay Modern 是 Relay 的重構(gòu)版本，其增強(qiáng)了框架的易用性、可擴(kuò)展性以及在移動(dòng)端的性能表現(xiàn)。Relay Modern 支持聲明式數(shù)據(jù)抓取、提供了 AOT 性能優(yōu)化以及新的垃圾回收機(jī)制。( https://parg.co/bfs )

《Expo SDK 16.0.0 版本發(fā)布》：近日，Expo SDK 發(fā)布了其 16.0.0 版本，其提升了內(nèi)置 iOS 開發(fā)者工具的表現(xiàn)、添加了對(duì)于 React 16 alpha 版本的兼容性支持以及 react-devtools 的支持。( https://parg.co/bfh )

步步為營(yíng)，掌握基礎(chǔ)技能

《JavaScript 中處理 undefined 的 7 個(gè)技巧》：不同于 Python 或者 Java 中僅有 null 或 nil 來表示空值，JavaScript 為我們提供了 undefined 與 null。本文則是深度分析了 undefined 與 null 的區(qū)別，討論了實(shí)際工程開發(fā)中 undefined 的使用場(chǎng)景，譬如未初始化對(duì)象、不存在的對(duì)象屬性或者方法、越界訪問、無返回值的函數(shù)等；作者最后還給出了一些對(duì)于 undefined 的注意點(diǎn)，譬如提高內(nèi)聚性降低耦合性等。( https://rainsoft.io/7-tips-to... )

《在 Vue.js 項(xiàng)目中使用第三方庫》：本文介紹了如何在基于單文件模塊的 Vue.js 項(xiàng)目中使用 Lodash、Moment、Axios 這些優(yōu)秀的第三方庫或框架。本文遞進(jìn)地介紹了譬如全局變量引用、單文件導(dǎo)入、擴(kuò)展 Vue 對(duì)象、插件實(shí)現(xiàn)等多種方式。( https://parg.co/bf4 )

《Vue.js 2 中的權(quán)限驗(yàn)證指南》：本文介紹了如何快速構(gòu)建 Vue.js 2 應(yīng)用程序并且添加合適的權(quán)限驗(yàn)證模塊。本文首先介紹了 Vue.js、Angular 以及 React 之間設(shè)計(jì)思想的對(duì)比，然后介紹了 Vue.js 2.0 中的核心概念與基本用法，最后以某個(gè)真實(shí)的登錄控制案例介紹了如何為 Vue.js 應(yīng)用中添加權(quán)限驗(yàn)證功能。( https://auth0.com/blog/vuejs2... )

《Relay Modern 與 GraphQL 實(shí)踐》：GraphQL 允許接口的使用者快速地聲明他們的數(shù)據(jù)需求，而近日正式發(fā)布的 Relay Modern 工具內(nèi)建地支持 GraphQL。本文即是介紹如何在項(xiàng)目中使用 Relay Modern 與 GraphQL 來獲取數(shù)據(jù)、管理狀態(tài)，本文首先介紹了 Relay Modern 的設(shè)計(jì)理念與目標(biāo)，然后介紹了其與傳統(tǒng)的 Relay 框架之間的區(qū)別，最后以某個(gè)簡(jiǎn)單的例子來說明 Relay Modern 在項(xiàng)目中的真實(shí)實(shí)踐用法。( https://parg.co/bfO )

《Node.js 中 Object Streams 的終極指南》：Node.js 中的流為我們提供了強(qiáng)大的功能，允許我們異步地處理輸入與輸出，或者在多個(gè)獨(dú)立步驟中進(jìn)行數(shù)據(jù)轉(zhuǎn)換。而本文則是首先回顧了流相關(guān)的理論，然后介紹了如何像 Gulp 那樣進(jìn)行對(duì)象流的轉(zhuǎn)換操作。( https://parg.co/bfV )

立足實(shí)踐，提示實(shí)際水平

《2017 年 JavaScript 測(cè)試技術(shù)概述》：本文涵蓋了 2017 年中 JavaScript 領(lǐng)域流行的測(cè)試?yán)砟睢⒚~與概念、工具以及測(cè)試的方法論。本文介紹了基本的測(cè)試類型的劃分、常用測(cè)試工具的劃分、以及 Jest、Mocha、Nightwatch 這樣的常用測(cè)試工具的選項(xiàng)與實(shí)踐技巧。( https://parg.co/bf3 )

《不要僅依賴 IP 地址猜測(cè)客戶端語言》：本文是作者從自己在歐洲旅行時(shí)候的切身訪問體驗(yàn)，總結(jié)而出的網(wǎng)站切換客戶端語言的誤區(qū)與改進(jìn)方向。作者認(rèn)為大型的門戶網(wǎng)站不應(yīng)該只依賴于用戶 IP 地址來決定其語言，而應(yīng)該充分應(yīng)用 HTTP 請(qǐng)求頭中的相關(guān)字段來動(dòng)態(tài)地切換。( https://parg.co/bff )

《大型高性能React PWA如何消除各類性能瓶頸？》：想要構(gòu)建一款性能出色的 Web 應(yīng)用程序，我們需要投入大量技術(shù)周期以檢測(cè)時(shí)間浪費(fèi)點(diǎn)、了解其發(fā)生原因并嘗試各類解決方案。遺憾的是，這種做法往往無法快速解決問題。性能無疑是一項(xiàng)永恒的命題，技術(shù)人員永遠(yuǎn)徘徊在觀察與測(cè)量當(dāng)中，卻幾乎永遠(yuǎn)找不到最優(yōu)解。不過利用 Twitter Lite，我們已經(jīng)在眾多層面內(nèi)取得了細(xì)小但卻極具價(jià)值的改進(jìn)：從初始加載時(shí)間到React組件渲染（防止二次渲染），再到圖像加載以及更多層面。盡管大多數(shù)變更本身并不顯著，但其相加所帶來的最終結(jié)果是，我們得以構(gòu)建起一款規(guī)模極大且速度極快的漸進(jìn)式 Web 應(yīng)用程序。( https://parg.co/bfM )

《Atom 是如何優(yōu)化客戶端應(yīng)用的啟動(dòng)時(shí)間》：本文是 Atom 技術(shù)團(tuán)隊(duì)對(duì)過去數(shù)月中優(yōu)化客戶端應(yīng)用的啟動(dòng)時(shí)間的實(shí)踐的總結(jié)。本文首先介紹了減少啟動(dòng)時(shí)間面臨的一系列困難，然后詳細(xì)解釋了 Atom 1.17 中使用的一系列優(yōu)化技巧，最后描述了未來規(guī)劃的一系列進(jìn)階優(yōu)化方向。本文提及的優(yōu)化方式包括 V8 snapshots、electron-link、Custom Elements 與 jQuery、優(yōu)化 require 時(shí)間、重構(gòu) atom 全局對(duì)象、優(yōu)化樣式表加載、預(yù)加載包體等等方面。( https://parg.co/bft )

《使用 create-graphql-server 快速搭建 GraphQL 服務(wù)器》：本文介紹了如何用幾個(gè)簡(jiǎn)單的命令快速搭建 GraphQL 服務(wù)器，其使用 Node.js 作為應(yīng)用后端、Mongodb 作為數(shù)據(jù)存儲(chǔ)。( https://parg.co/bfQ )

深度思考，升華開發(fā)智慧

《應(yīng)該知道的關(guān)于 Angular 中的變化檢測(cè)的知識(shí)》：本文探討了 Angular 4.0 中使用的變化檢測(cè)機(jī)制，介紹了其底層實(shí)現(xiàn)與常見的用戶場(chǎng)景。本文主要包含兩個(gè)部分，第一部分相對(duì)偏向于技術(shù)實(shí)現(xiàn)的介紹與鏈接分享，深入淺出地解釋了 4.0.1 版本中變化檢測(cè)的機(jī)制原理；第二部分則是介紹了變化檢測(cè)如何被應(yīng)用到真實(shí)的項(xiàng)目與用戶使用案例中。( https://parg.co/bfC )

《單頁應(yīng)用的數(shù)據(jù)流方案探索》：本文深入淺出地討論了前端應(yīng)用的數(shù)據(jù)流實(shí)踐方案，首先引入了 MDV 以及響應(yīng)式編程的概念，然后討論了真實(shí)業(yè)務(wù)場(chǎng)景下數(shù)據(jù)來源的抽象層次，接下來又分析了組件內(nèi)部狀態(tài)與外置狀態(tài)的常用處理方案的對(duì)比，最后介紹了 MVI 架構(gòu)、組件化與分形、狀態(tài)的分組與管理以及中前端數(shù)據(jù)建模等相關(guān)內(nèi)容。( https://parg.co/bfN )

《Microsoft Edge 中的現(xiàn)代 DOM 樹構(gòu)建之道》：DOM 是 Web 平臺(tái)中基礎(chǔ)的編程模型，其設(shè)計(jì)與性能會(huì)影響到瀏覽器中的方方面面。在過去的三年中，Microsoft Edge 團(tuán)隊(duì)一直致力于重構(gòu) IE 中過時(shí)且低效的 DOM 樹數(shù)據(jù)結(jié)構(gòu)。本文首先會(huì)回顧 IE 與 Microsoft Edge 中 DOM 的變遷歷史，然后介紹了最新的 Microsoft Edge 中使用的 DOM 樹的數(shù)據(jù)結(jié)構(gòu)和其能夠帶來巨大性能提升的原因。( https://parg.co/bf8 )

《Microsoft Edge 中的 JavaScript 性能、WebAssembly 以及 Shared Memory》：JavaScript 的性能表現(xiàn)是 Web 開發(fā)中永恒的話題，而 Microsoft Edge 團(tuán)隊(duì)也在實(shí)時(shí)接收用戶反饋以提升 Chakra JavaScript 引擎的性能表現(xiàn)。本文首先介紹了 Chakra 中的新特性，包括了一系列提升 JavaScript 性能表現(xiàn)的技巧；然后還討論了 WebAssembly、Shared Memory 與 Atomics 等新特性在 Edge 中的具體實(shí)現(xiàn)。( https://parg.co/bfk )

樂于分享，共推前端發(fā)展

《pnpm》：高性能、低空間占用的 npm install 替代實(shí)現(xiàn)。目前標(biāo)準(zhǔn)的 npm 與 Facebook 的提升版 yarn 都尚未解決系統(tǒng)中多 Node 項(xiàng)目時(shí)多個(gè)的 node_modules 帶來的磁盤占用問題；而 pnpm 則會(huì)在 ~/.pnpm-store 中存儲(chǔ)全部依賴，然后在需要的項(xiàng)目中以鏈接方式引入，從而減少整體的磁盤使用空間。( https://github.com/pnpm/pnpm )

《pwmetrics》：基于 LightHouse 封裝的能夠在命令行中使用的 PWA 應(yīng)用的性能評(píng)測(cè)工具。( https://github.com/paulirish/... )

《haul》：Haul 是基于 Webpack 這樣開源框架構(gòu)建的 react-native 命令行工具的替代品，它支持從運(yùn)行于開發(fā)時(shí)服務(wù)器到打包發(fā)布至生產(chǎn)環(huán)境等全生命周期的功能。Haul 的最大特性在于允許開發(fā)者使用 Webpack 生態(tài)系統(tǒng)中各種合影的加載器與插件，并且不需要 watchman 等外部工具的輔助，還優(yōu)化了錯(cuò)誤提示信息。( https://github.com/callstack-... )

《react-move》：方便快捷地 React 組件動(dòng)畫庫，支持 React、React Native 以及 React VR。React Move 允許開發(fā)者忽略具體的動(dòng)畫屬性控制而完全托管于框架，同時(shí)它還提供了多個(gè)生命周期中的回調(diào)函數(shù)方便開發(fā)者進(jìn)行控制。( https://github.com/tannerlins... )

《async-reactor》：React 中異步無狀態(tài)函數(shù)式組件加載工具，其支持在函數(shù)中使用 import 來引入模塊或者 fetch 抓取第三方數(shù)據(jù)。( https://github.com/xtuc/async... )

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到[email protected]，注明“前端之巔投稿”。