前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID ： frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
- Angular 5.1 釋出: 本文介紹了 Angular 5.1.0, Angular CLI 1.6 以及 Angular Material 的首個穩定版本的特性變化。Angular 5.1.0 中包含了多個小的特性變化與錯誤修復，此次系列更新主要包括了 Angular Material & CDK 穩定版釋出、CLI 工具支援 Service Worker、對於 Universal 以及 AppShell 支援的提升、裝飾器錯誤資訊優化、支援 TypeScript 2.5 等等。
-
Ant Design 3.0 釋出: Ant Design 是面向企業級桌面應用的設計方案與實現，在 2.0 版本釋出的 14 個月之後，3.0 版本正式釋出，包含了來自 200 多位貢獻者的超過 4000 次提交。Ant Design 3.0 版本中引入了新的色彩系統，其受到天空的啟發，包含了薄暮、日出、拂曉藍等一系列優美的色彩搭配；該版本還引入了新的元件設計，包括了對於大量元件的複寫，完全支援 React 16 與 ES Module，並且優化了對於 TypeScript 的支援。
-
Font Awesome 5 釋出: 本週，Font Awesome 5.0.0 正式釋出，為我們帶來了全新的主頁，包含了九百多個免費圖示與一千多的商業圖示。5.0 中提供了多種整合方式，最為推薦的是利用 JavaScript 與 SVG 圖示協同使用，以替代原有的字型圖示，從而提升效能與易用性。
- TensorFlow Lite 支援 Core ML: TensorFlow Lite 是面向移動裝置與嵌入式裝置的輕量級 TensorFlow 版本，近日其宣佈開始支援 Core ML，通過工具能夠將 TensorFlow 模型轉化為 .mlmode 這樣的 Core ML 模型格式。Core ML 是 iOS 內建的機器學習框架，這意味著 iOS 開發者能夠在 Core ML 上部署 TensorFlow 模組，也是 TensorFlow Lite 在跨平臺支援上的重要一步；另一方面，Apple 也開源了自定義機器學習模型框架 Turi Create，來幫助開發者快速開發機器學習模組並且整合到 iOS 應用中。
開發教程
步步為營，掌握基礎技能
-
使用 Rust 開發基於 WebAssembly 的遊戲: 數週前，Alex Crichton 的 PR 使得 Rust 能夠直接被編譯為 WebAssembly 格式，本文作者也嘗試將基於 Rust 與 Piston 編寫的桌面遊戲 Rocket， 轉化為能夠在瀏覽器中執行的 WebAssembly 格式的應用。作者使用 JavaScript 來處理使用者的輸入輸出，並且進行介面渲染，使用 Rust 來處理遊戲邏輯；作者依次介紹了自己在遷移過程中碰到的多個 Link 錯誤以及處理方案，然後討論了 Rust 與 JavaScript 如何相互呼叫，以進行畫面渲染與接收使用者輸入輸出等內容。更多 WebAssembly 相關資料參考這裡。
-
的變遷：非 GIF 的動圖實現: 圖片是現代網頁應用中不可或缺的部分，GIFs 是動圖實現的選擇之一，但其質量與效能一直差強人意；如果直接使用 video 標籤，又是無法發揮 preloaded 的作用，還必須分段請求。在 Safari Technology Preview 中，允許開發者使用
<img src="https://user-gold-cdn.xitu.io/2017/12/11/16044d045762c64d">的形式來實現簡單的動圖需求，相較於原本的 GIF 的解決方案能帶來將近二十倍的效能提升，並且支援 CSS 方式背景播放，其體積也有大幅度的降低。更多的圖片處理與效能優化資料參考這裡。
- 使用 Electron 與 React 建立 Markdown 應用: 本文循序漸進地介紹瞭如何使用 Electron 與 React 構建簡單的 MarkDown 應用，作者將其命名為 Mook。本文依次介紹了技術棧的選擇與考量，開發環境、構建流程與模板應用搭建，主功能開發等內容；更多 Electron 學習資料參考這裡。
工程實踐
立足實踐，提示實際水平
-
Airbnb 列表頁的 React 效能問題淺析: Airbnb 已經使用 React Router 與 Hypernova 將核心訂購流程轉化為了服務端渲染的單頁應用，本文則是介紹其如何將列表詳情頁進行單頁應用話改造，並且綜合提高其效能。本文首先討論瞭如何進行效能評測，這篇文章也介紹瞭如何使用 Chrome DevTools 來除錯 React 的效能問題；然後介紹了其在初始化渲染、滾動優化、點選反饋、輸入輸出方面的優化技巧。更多 React 相關教程參閱 React 與前端工程化實踐。
-
Node.js 的可擴充套件應用模式：CQRS, ES, Onion: 本文介紹如何使用 CQRS 與 Event Sourcing 模式來開發 Node.js 應用，使用 Onion 架構來組織這些模式，並且使用 TypeScript 來進行靜態型別校驗。本文首先討論了何謂靈活架構：業務邏輯與實現分離、獨立於資料庫，框架，服務等等；然後介紹了 Event Sourcing 與 CQRS 的含義，以及它們是如何組織在洋蔥圈模型中的，最後以典型的認證邏輯為例討論瞭如何實現 CQRS 模式。更多 Node.js 的知識可以閱讀深入淺出 Node.js 全棧架構。
-
基於 Intersection Observer 與 SQIP 的漸進式圖片載入: 當我們瀏覽 Facebook、Pinterest 、 Medium 等內容類網站時，會發現圖片是漸進式載入，即首先出現低質量的、模糊的圖片，然後再出現真正的圖片，本文即是介紹如何使用 Intersection Observer 與 SQIP 實現漸進式載入。之前的清單中我們有介紹過 SQIP 這種圖片替代（Image PlaceHolder ）的生成方式，其能夠生成不足 1KB 的 SVG 格式的低質量圖片；而 Intersection Observer 則能夠判斷某個圖片元素是否在視口內，從而實現按需載入。更多的圖片處理與效能優化資料參考這裡。
深度閱讀
深度思考，昇華開發智慧
- Orinoco: V8 中的年輕代垃圾回收: V8 引擎中的 JavaScript 物件被分配在了堆上，並且由 V8 的垃圾回收器進行生命週期的管理；本文即是介紹 Parallel Scavenger，Orinoco 的最新特性之一，是如何針對年輕代進行垃圾回收的。本文首先介紹了分代垃圾回收模型，然後討論了單執行緒的 Cheney’s Semispace Copy 演算法，最後討論了 Parallel Mark-Evacuate 以及 Parallel Scavenge 回收器的設計；更多 V8 相關資料索引參考這裡。
-
2017 JavaScript 發展回顧: 在 2017 年 JS 狀態調查結果出爐之前，Sacha Greif 先和幾位專家聊了聊他們對於 2017 年 JavaScript 發展的看法與回顧，並整理成了這篇文章。本文從測試工具、構建工具、狀態管理、全棧架構等幾個不同的方面進行了討論，對 2017 年中令人印象深刻的技術進行了分享；除此之外，A recap of front-end development in 2017 也是一篇不錯的總結，更多 JavaScript 相關資料參考這裡。
-
Web 內容可用性提升指南: World Wide Web Consortium (W3C) 釋出的 Web Content Accessibility Guidelines 2.0 是網頁內容可用性的絕佳指南，能夠幫助設計者與開發者來提升網頁的整體可用性；本文則是對這份指南的簡要總結，以幫助那些沒有時間閱讀原指南的開發者快速瞭解網頁可用性方面的知識。本文依次討論瞭如何判斷使用者能否有效地接受網頁內資訊、如何判斷使用者能否有效地使用網頁中的控制按鈕與跳轉連結、使用者是否能夠理解網頁內容、是否針對複雜的使用者環境進行了適配等內容；更多 Web 開發相關內容閱讀現代 Web 開發工程化實踐。
-
卡通圖解 JavaScript 引擎: 本系列文章著眼於從執行機制的角度來介紹 JavaScript，首篇文章介紹了 Callback Queue、Event Loop 等非同步執行相關的概念，本文則是從引擎的角度，以漫畫的方式來介紹 JavaScript 的編譯、解析與執行的過程。上週的清單中我們推薦了 V8 引擎的推測優化，本文則是提綱挈領地介紹 JIT 編譯器的原理，給讀者一個巨集觀的概念展示；更多 JavaScript 引擎相關資料參考這裡。
開源專案
樂於分享，共推前端發展
- Parcel: Parcel 是高速、零配置的 Web 應用打包工具；其面向現代作業系統設計，能夠進行多核併發編譯，並且提供了檔案系統的快取以優化重構建或者增量構建的效能。Parcel 還提供了開箱即用的 JS, CSS, HTML, 資原始檔等支援，能夠自動地使用 Babel, PostCSS,PostHTML 來進行程式碼轉換，同時內建支援
import()動態匯入與熱替換。
-
electron-toolkit: electron-toolkit 是輕量級的、強大的 Electron 應用的啟動輔助工具，它能夠以 NPM 指令碼的方式啟動，為開發者提供一系列開發過程中需要的輔助工具。這些工具包括了圖示生成、截圖工具、安裝器、二進位制檔案生成、網站生成、實時更新等等。
-
Muuri: Muuri 是強大的 JavaScript 佈局引擎，吸納了來自 Packery, Masonry, Isotope, 以及 Sortable 的優秀特性，輔助開發者快速構建響應式、可排序、可過濾、可拖拽、可動畫控制的可擴充套件表格系統。
-
Vuetron: Vuetron 是基於 Electron 開發的，幫助 Vue.js 專案測試以及錯誤檢測的工具，同時支援 Vuex 以及 Vue-Router。類似於 Developer Tools，Vuetron 能夠檢視事件、應用狀態以及進行時間回溯的除錯；同時還能夠實現監聽指定狀態變數的變化，檢視 API 請求與響應，視覺化檢視元件結構樹等等功能。
巔峰人生
- 從黑客到創業，他說技術創業該這麼做！: 本文是知道創宇 CTO & COO 楊冀龍在極客 Live 中分享的創業感悟和踩過的那些坑。楊冀龍是安全焦點民間白帽黑客組織核心成員，被《浪潮之巔》評為中國新一代黑客領軍人物之一；他在本文中依次分享了對於黑客的定義、如何從黑客成為一名安全創業者、技術創業踩過的坑、給技術創業者建議等內容。
前端之巔
「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆 “ 加群 ”。投稿請發郵件到 editors@cn.infoq.com，註明 “ 前端之巔投稿 ”。