前端每週清單第 29 期：Web 現狀分析與優化策略、Vue 單元測試、Headless Chrome 爬蟲

前端每週清單第 29 期：Web 現狀分析與優化策略、Vue 單元測試、Headless Chrome 爬蟲

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

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

• Prettier 1.6.0 發佈：本週發佈的 Prettier 1.6.0 版本引入了數個期待已久的特性，包括 .prettierrc，.prettierignore 項目配置文件、JSX 顯示格式優化、容許 JSON 文件添加自定義註釋等；除此以外，該版本還進一步優化了對於 JavaScript、TypeScript、CSS、GraphQL 等格式文件的支持，還提供了更多的命令行特性。
• Firefox 引入 Headless 模式：相似於 Chrome 的 Headless 模式，如今 Firefox 也引入了 Headless 模式，其容許開發者利用 Firefox 進行更加方便地自動化測試、動態網頁抓取等操做；本文也介紹瞭如何利用 Selenium 控制 Firefox 進行自動化瀏覽器操做等內容。
• Webpack 4 開發計劃：本文討論了 Webpack 4 相關的規劃與目標，在先前發佈的 Webpack 3 版本中並未引入什麼斷層變化，可是 Webpack 4 中會引入些重大的變革。Webpack 4 的主要目標包括 WASM 支持、新的 CSS 工做流、支持 async script 標籤、性能提高、繼續優化 ESM、更加完善地支持類型系統等。
• TypeScript 2.5 版本發佈：近日發佈的 TypeScript 2.5 版本中引入了許多新的特性，而且可以更好地與 VSCode 協同開發。該版本中提供了函數與方法抽取重構、快速類型修復、JavaScript 文件中的 JSDoc 類型斷言支持、可選的 catch 語句等特性，同時還進一步優化了性能與使用體驗。

開發教程

步步爲營，掌握基礎技能

• 基於 Node.js 的 HTTP2 服務端推送：Node.js 8.4.0 版本中引入了實驗性的 HTTP/2 支持，開發者能夠經過 --expose-http2 標識位啓用 HTTP/2 支持。本文首先介紹了 HTTP/2 服務端推送中重要的知識點，而後從零開始建立簡單的 Node.js 應用，來形象闡述如何使用 HTTP/2 以及其特性；更多 HTTP/2 相關資料參考這裏。
• 使用官方 Vue.js 測試工具與 Jest 編寫組件的單元測試：Vue.js 以其靈活、高性能、易上手的特性正逐步被應用到更多的 Web 項目中，本系列文章則着眼於介紹 Vue.js 應用開發中的單元測試相關內容。本系列文章依次介紹了編寫首個簡單的組件單元測試用例、測試遞歸渲染的 Vue.js 組件、測試組件的樣式與結構、測試組件的狀態，計算屬性與方法、測試屬性與自定義事件、測試生命週期回調、測試 Vue.js Slots、利用模塊別名配置 Jest 等內容；更多 Vue.js 相關資料參考這裏。
• 利用 Service Worker 離線運行 Angular 應用：本文主要討論如何經過 Service Worker 爲 Angular 應用添加離線運行特性。本文首先介紹了 Service Worker 的概念與原理，而後介紹了 Google 提供的工具集 Workbox，以及如何使用 Workbox 建立簡單的 Service Worker，最後以簡單的應用說明了如何建立自定義的 Service Worker、選定緩存內容與緩存策略。更多 Angular 相關資料參考這裏。
• 60 分鐘內構建 Github 搜索欄：本文是來自 Appbase.io 的工程師分享的，如何快速構建漂亮大方的 Github 應用搜索界面。本文中使用 React 開發前端界面，依次闡述瞭如何按照組件來切割界面、如何從底向上依次構建各級所須要的組件、如何添加組件事件響應、如何經過 Github API 獲取數據而且渲染到界面上等內容；更多 React 相關資料參考這裏。

工程實踐

立足實踐，提示實際水平

• 基於 Puppeteer 與 Chrome Headless 的網頁抓取：Puppeteer 是 Google Chrome 團隊發佈的 Chrome Headless 官方工具。而隨着 Chrome Headless 的發佈，包括 PhantomJS、Selenium Firefox 等在內不少的項目都宣佈中止開發；Chrome Headless 正逐步成爲 Web 應用自動化測試的行業領袖。而本文則是一步一步地介紹瞭如何利用 Chrome Headless、Puppeteer、Node 以及 Mongodb 來抓取 Github 上的相關內容；更多 Chrome Headless 相關資料參考這裏。
• V8 中對象屬性的快速訪問：本文將會介紹 V8 引擎是如何處理 JavaScript 對象中屬性的機制；雖然在使用層面上字符型鍵與數值型鍵並沒有差別，可是 V8 處於性能與內存的考慮會使用不一樣的方式來處理這兩種屬性。本文則會介紹 V8 提供的快速屬性訪問機制與動態屬性的處理，理解 inline caches 的運行機制等內容；更多 V8 相關資料參考這裏。
• 基於 Webpack 的 Vue.js 應用代碼分割：早期利用 Webpack 打包前端應用的一大缺陷在於其會產生較大的包體，然後來引入的代碼分割特性則能有效地提高首屏加載速度。本文介紹了 Vue.js 應用開發中，如何利用 Webpack 與 Async components 來進行代碼的動態加載；更多 Vue.js 相關資料參考這裏
• SparkUI：FreeWheel 的 React 開發實踐：SparkUI 是由 FreeWheel 根據自身業務特色開發的一套完整且靈活的前端開發解決方案。該方案基於 React，由 Modula 應用狀態管理框架、一系列可重用的前端組件、以及構建 SPA 所需的各種支持庫組成。 該方案重視可重用性、靈活性、可測試性以及開發效率，解決了前端社區常見的一些針對商業前端應用開發的痛點，如複雜狀態、Side Effect，組件拆分等，更在工程實踐、文檔化、自己代碼質量等方面達到較高標準，爲先後端分離架構下的商業前端應用開發提供了堅實的基礎。目前 SparkUI 已成功應用在 FreeWheel 的前端項目中。

深度閱讀

深度思考，昇華開發智慧

• 爲何咱們從 Angular 2 遷移到了 Vue.js（以及爲何不用 React）：本文是來自 Rever 的工程師分享的他們在構建新版本 Web 應用時技術選型的考量。做者主要從易用性、代碼運行速度、文檔、社區活躍度、移動端的支持、開源協議等多個角度對比分析了 Angular.js、Vue.js 與 React 這三個主流框架。其中 Angular.js 的缺陷在於版本更迭過快、代碼執行速度略慢、響應式不足等方面；React 的代碼運行速度通常，其最近的證書風波也是使人遲疑，而 Vue.js 目前的主要缺陷在於其社區還不如 React 與 Angular 龐大。更多 Vue.js 相關資料參考這裏
• Web 的現狀：網頁性能提高指南：隨着因特網的快速發展，至今已有約 46% 的人們能夠經過設備接入到網絡中；而其中的大多數又是經過移動設備來瀏覽網頁或其餘操做。本文便是對目前 Web 發展示狀進行概要性描述，而且討論了當前狀態下網頁應該關注的性能提高點。本文依次分析瞭如何優化 JavaScript、CSS 等資源文件、選擇合適的圖片、優化網頁字體、優化 JavaScript 執行、如何正確地追蹤性能指標等內容；更多 Web 性能優化相關資料參考這裏。
• Webkit 中 JavaScript 併發編程提案：隨着 SharedArrayBuffer 被引入，JavaScript 也正逐步轉向提供併發支持；本文便是 Webkit 開發團隊分享的它們對於併發 JavaScript 編程的考慮與設計。本文依次討論了 Thread 相關的 API、JavaScript 內存模型、如何與 DOM 進行交互、如何進行併發控制以及 WebKit 的實現方案等內容；
• 澄清對 AMP 的十個誤解：AMP 是由 Google 出品的，採用了白名單強約定策略的開源 Web 組件格式和類庫；由於 AMP 自己處於性能的考慮限制了網頁自己的開發自由，也致使了開發者對 AMP 很有微詞。本文則是對於 AMP 的常見誤解進行闡述，包括 AMP 的定位與運行環境、AMP 的適用目標、AMP 與現有網站的集成方式、AMP 與 PWA 之間的關係等內容。

開源項目

樂於分享，共推前端發展

• asm-dom: asm-dom 是輕量級的基於 WebAssembly 的 Virtual DOM 框架，其容許開發者使用 C++ 來構建 Web 單頁應用。開發者能夠僅使用 C++ 來編寫 Web 應用，而後經過 Emscripten 來將其轉化爲 WebAssembly；其能容許開發者直接使用現有的 C++ 標準庫代碼，從而保證代碼複用與性能提高。
• Vivify：Vivify 是輕量級的 CSS 動畫庫，提供了數十種常見的 CSS 動畫實現，包括 ball、blink、driveInBottom、fadeIn、flip、popIn 等；開發者只須要將樣式文件引入頁面中便可使用。
• React Map GL：React Map GL 是 Uber 出品的基於 React 與 Mapbox GL 的地圖庫，其提供了 Browserify、Webpack 二、create-react-app 多種集成嘗方式；官方也給出了與 Redux 的便捷集成方式。
• Push: Push 是 BrowserStack 出品的，快速實現基於 JavaScript 的桌面消息推送工具；Push 可以自動利用 Chrome、Safari、Firefox、IE9+ 這些現代瀏覽器提供的底層接口，爲開發者提供跨平臺的統一調用方式。
• r2：r2 是 request 的做者基於多年的現代開發實踐總結出的輕量級、高可用 HTTP 客戶端；r2 基於瀏覽器端的 fetch 實現，使用了 node-fetch 提供了 Node.js 環境下的支持。

巔峯人生

• 與 Node.js 創立者 Ryan Dahl 的對話：Ryan Dahl 是 Google Brain 團隊的軟件工程師，也是 Node.js 項目的創立者；而他目前則就任於深度學習項目，着手圖片轉化等相關的方向。本文則是與 Ryan Dahl 的一次訪談記錄，談論了 Ryan Dahl 的技術生涯發展、工做選擇、創立 Node.js 的考量等內容。

前端之巔

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