摘要：前端每周清單第期現(xiàn)狀分析與優(yōu)化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。

作者：王下邀月熊 編輯：徐川

前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

國內(nèi)國外，前端最新動態(tài)

Prettier 1.6.0 發(fā)布：本周發(fā)布的 Prettier 1.6.0 版本引入了數(shù)個期待已久的特性，包括 .prettierrc，.prettierignore 項(xiàng)目配置文件、JSX 顯示格式優(yōu)化、允許 JSON 文件添加自定義注釋等；除此之外，該版本還進(jìn)一步優(yōu)化了對于 JavaScript、TypeScript、CSS、GraphQL 等格式文件的支持，還提供了更多的命令行特性。

Firefox 引入 Headless 模式：類似于 Chrome 的 Headless 模式，現(xiàn)在 Firefox 也引入了 Headless 模式，其允許開發(fā)者利用 Firefox 進(jìn)行更加方便地自動化測試、動態(tài)網(wǎng)頁抓取等操作；本文也介紹了如何利用 Selenium 控制 Firefox 進(jìn)行自動化瀏覽器操作等內(nèi)容。

Webpack 4 開發(fā)計(jì)劃：本文討論了 Webpack 4 相關(guān)的規(guī)劃與目標(biāo)，在先前發(fā)布的 Webpack 3 版本中并未引入什么斷層變化，但是 Webpack 4 中會引入些重大的變革。Webpack 4 的主要目標(biāo)包括 WASM 支持、新的 CSS 工作流、支持 async script 標(biāo)簽、性能提升、繼續(xù)優(yōu)化 ESM、更加完善地支持類型系統(tǒng)等。

TypeScript 2.5 版本發(fā)布：近日發(fā)布的 TypeScript 2.5 版本中引入了許多新的特性，并且能夠更好地與 VSCode 協(xié)同開發(fā)。該版本中提供了函數(shù)與方法抽取重構(gòu)、快速類型修復(fù)、JavaScript 文件中的 JSDoc 類型斷言支持、可選的 catch 語句等特性，同時還進(jìn)一步優(yōu)化了性能與使用體驗(yàn)。

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

基于 Node.js 的 HTTP2 服務(wù)端推送：Node.js 8.4.0 版本中引入了實(shí)驗(yàn)性的 HTTP/2 支持，開發(fā)者可以通過 --expose-http2 標(biāo)識位啟用 HTTP/2 支持。本文首先介紹了 HTTP/2 服務(wù)端推送中重要的知識點(diǎn)，然后從零開始創(chuàng)建簡單的 Node.js 應(yīng)用，來形象闡述如何使用 HTTP/2 以及其特性；更多 HTTP/2 相關(guān)資料參考這里。

使用官方 Vue.js 測試工具與 Jest 編寫組件的單元測試：Vue.js 以其靈活、高性能、易上手的特性正逐步被應(yīng)用到更多的 Web 項(xiàng)目中，本系列文章則著眼于介紹 Vue.js 應(yīng)用開發(fā)中的單元測試相關(guān)內(nèi)容。本系列文章依次介紹了編寫首個簡單的組件單元測試用例、測試遞歸渲染的 Vue.js 組件、測試組件的樣式與結(jié)構(gòu)、測試組件的狀態(tài)，計(jì)算屬性與方法、測試屬性與自定義事件、測試生命周期回調(diào)、測試 Vue.js Slots、利用模塊別名配置 Jest 等內(nèi)容；更多 Vue.js 相關(guān)資料參考這里。

利用 Service Worker 離線運(yùn)行 Angular 應(yīng)用：本文主要討論如何通過 Service Worker 為 Angular 應(yīng)用添加離線運(yùn)行特性。本文首先介紹了 Service Worker 的概念與原理，然后介紹了 Google 提供的工具集 Workbox，以及如何使用 Workbox 創(chuàng)建簡單的 Service Worker，最后以簡單的應(yīng)用說明了如何創(chuàng)建自定義的 Service Worker、選定緩存內(nèi)容與緩存策略。更多 Angular 相關(guān)資料參考這里。

60 分鐘內(nèi)構(gòu)建 Github 搜索欄：本文是來自 Appbase.io 的工程師分享的，如何快速構(gòu)建漂亮大方的 Github 應(yīng)用搜索界面。本文中使用 React 開發(fā)前端界面，依次闡述了如何按照組件來切割界面、如何從底向上依次構(gòu)建各級所需要的組件、如何添加組件事件響應(yīng)、如何通過 Github API 獲取數(shù)據(jù)并且渲染到界面上等內(nèi)容；更多 React 相關(guān)資料參考這里。

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

基于 Puppeteer 與 Chrome Headless 的網(wǎng)頁抓取：Puppeteer 是 Google Chrome 團(tuán)隊(duì)發(fā)布的 Chrome Headless 官方工具。而隨著 Chrome Headless 的發(fā)布，包括 PhantomJS、Selenium Firefox 等在內(nèi)很多的項(xiàng)目都宣布停止開發(fā)；Chrome Headless 正逐步成為 Web 應(yīng)用自動化測試的行業(yè)領(lǐng)袖。而本文則是一步一步地介紹了如何利用 Chrome Headless、Puppeteer、Node 以及 Mongodb 來抓取 Github 上的相關(guān)內(nèi)容；更多 Chrome Headless 相關(guān)資料參考這里。

V8 中對象屬性的快速訪問：本文將會介紹 V8 引擎是如何處理 JavaScript 對象中屬性的機(jī)制；雖然在使用層面上字符型鍵與數(shù)值型鍵并無差異，但是 V8 處于性能與內(nèi)存的考慮會使用不同的方式來處理這兩種屬性。本文則會介紹 V8 提供的快速屬性訪問機(jī)制與動態(tài)屬性的處理，理解 inline caches 的運(yùn)行機(jī)制等內(nèi)容；更多 V8 相關(guān)資料參考這里。

基于 Webpack 的 Vue.js 應(yīng)用代碼分割：早期利用 Webpack 打包前端應(yīng)用的一大缺陷在于其會產(chǎn)生較大的包體，而后來引入的代碼分割特性則能有效地提升首屏加載速度。本文介紹了 Vue.js 應(yīng)用開發(fā)中，如何利用 Webpack 與 Async components 來進(jìn)行代碼的動態(tài)加載；更多 Vue.js 相關(guān)資料參考這里

SparkUI：FreeWheel 的 React 開發(fā)實(shí)踐：SparkUI 是由 FreeWheel 根據(jù)自身業(yè)務(wù)特點(diǎn)開發(fā)的一套完整且靈活的前端開發(fā)解決方案。該方案基于 React，由 Modula 應(yīng)用狀態(tài)管理框架、一系列可重用的前端組件、以及構(gòu)建 SPA 所需的各類支持庫組成。 該方案重視可重用性、靈活性、可測試性以及開發(fā)效率，解決了前端社區(qū)常見的一些針對商業(yè)前端應(yīng)用開發(fā)的痛點(diǎn)，如復(fù)雜狀態(tài)、Side Effect，組件拆分等，更在工程實(shí)踐、文檔化、本身代碼質(zhì)量等方面達(dá)到較高標(biāo)準(zhǔn)，為前后端分離架構(gòu)下的商業(yè)前端應(yīng)用開發(fā)提供了堅(jiān)實(shí)的基礎(chǔ)。目前 SparkUI 已成功應(yīng)用在 FreeWheel 的前端項(xiàng)目中。

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

為什么我們從 Angular 2 遷移到了 Vue.js（以及為什么不用 React）：本文是來自 Rever 的工程師分享的他們在構(gòu)建新版本 Web 應(yīng)用時技術(shù)選型的考量。作者主要從易用性、代碼運(yùn)行速度、文檔、社區(qū)活躍度、移動端的支持、開源協(xié)議等多個角度對比分析了 Angular.js、Vue.js 與 React 這三個主流框架。其中 Angular.js 的缺陷在于版本更迭過快、代碼執(zhí)行速度略慢、響應(yīng)式不足等方面；React 的代碼運(yùn)行速度一般，其最近的證書風(fēng)波也是令人遲疑，而 Vue.js 目前的主要缺陷在于其社區(qū)還不如 React 與 Angular 龐大。更多 Vue.js 相關(guān)資料參考這里

Web 的現(xiàn)狀：網(wǎng)頁性能提升指南：隨著因特網(wǎng)的快速發(fā)展，至今已有約 46% 的人們可以通過設(shè)備接入到網(wǎng)絡(luò)中；而其中的大多數(shù)又是通過移動設(shè)備來瀏覽網(wǎng)頁或其他操作。本文即是對目前 Web 發(fā)展現(xiàn)狀進(jìn)行概要性描述，并且討論了當(dāng)前狀態(tài)下網(wǎng)頁應(yīng)該關(guān)注的性能提升點(diǎn)。本文依次分析了如何優(yōu)化 JavaScript、CSS 等資源文件、選擇合適的圖片、優(yōu)化網(wǎng)頁字體、優(yōu)化 JavaScript 執(zhí)行、如何正確地追蹤性能指標(biāo)等內(nèi)容；更多 Web 性能優(yōu)化相關(guān)資料參考這里。

Webkit 中 JavaScript 并發(fā)編程提案：隨著 SharedArrayBuffer 被引入，JavaScript 也正逐步轉(zhuǎn)向提供并發(fā)支持；本文即是 Webkit 開發(fā)團(tuán)隊(duì)分享的它們對于并發(fā) JavaScript 編程的考慮與設(shè)計(jì)。本文依次討論了 Thread 相關(guān)的 API、JavaScript 內(nèi)存模型、如何與 DOM 進(jìn)行交互、如何進(jìn)行并發(fā)控制以及 WebKit 的實(shí)現(xiàn)方案等內(nèi)容；

澄清對 AMP 的十個誤解：AMP 是由 Google 出品的，采用了白名單強(qiáng)約定策略的開源 Web 組件格式和類庫；因?yàn)?AMP 本身處于性能的考慮限制了網(wǎng)頁本身的開發(fā)自由，也導(dǎo)致了開發(fā)者對 AMP 頗有微詞。本文則是對于 AMP 的常見誤解進(jìn)行闡述，包括 AMP 的定位與運(yùn)行環(huán)境、AMP 的適用目標(biāo)、AMP 與現(xiàn)有網(wǎng)站的集成方式、AMP 與 PWA 之間的關(guān)系等內(nèi)容。

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

asm-dom: asm-dom 是輕量級的基于 WebAssembly 的 Virtual DOM 框架，其允許開發(fā)者使用 C++ 來構(gòu)建 Web 單頁應(yīng)用。開發(fā)者可以僅使用 C++ 來編寫 Web 應(yīng)用，然后通過 Emscripten 來將其轉(zhuǎn)化為 WebAssembly；其能允許開發(fā)者直接使用現(xiàn)有的 C++ 標(biāo)準(zhǔn)庫代碼，從而保證代碼復(fù)用與性能提升。

Vivify：Vivify 是輕量級的 CSS 動畫庫，提供了數(shù)十種常見的 CSS 動畫實(shí)現(xiàn)，包括 ball、blink、driveInBottom、fadeIn、flip、popIn 等；開發(fā)者只需要將樣式文件引入頁面中即可使用。

React Map GL：React Map GL 是 Uber 出品的基于 React 與 Mapbox GL 的地圖庫，其提供了 Browserify、Webpack 2、create-react-app 多種集成嘗方式；官方也給出了與 Redux 的便捷集成方式。

Push: Push 是 BrowserStack 出品的，快速實(shí)現(xiàn)基于 JavaScript 的桌面消息推送工具；Push 能夠自動利用 Chrome、Safari、Firefox、IE9+ 這些現(xiàn)代瀏覽器提供的底層接口，為開發(fā)者提供跨平臺的統(tǒng)一調(diào)用方式。

r2：r2 是 request 的作者基于多年的現(xiàn)代開發(fā)實(shí)踐總結(jié)出的輕量級、高可用 HTTP 客戶端；r2 基于瀏覽器端的 fetch 實(shí)現(xiàn)，使用了 node-fetch 提供了 Node.js 環(huán)境下的支持。

與 Node.js 創(chuàng)立者 Ryan Dahl 的對話：Ryan Dahl 是 Google Brain 團(tuán)隊(duì)的軟件工程師，也是 Node.js 項(xiàng)目的創(chuàng)立者；而他目前則就職于深度學(xué)習(xí)項(xiàng)目，著手圖片轉(zhuǎn)化等相關(guān)的方向。本文則是與 Ryan Dahl 的一次訪談記錄，談?wù)摿?Ryan Dahl 的技術(shù)生涯發(fā)展、工作選擇、創(chuàng)立 Node.js 的考量等內(nèi)容。

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請關(guān)注「前端之巔」公眾號后回復(fù)“加群”。投稿請發(fā)郵件到editors@cn.infoq.com，注明“前端之巔投稿”。