摘要：楊冀龍是安全焦點民間白帽黑客組織核心成員，被浪潮之巔評為中國新一代黑客領軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創業者技術創業踩過的坑給技術創業者建議等內容。

前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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 中，允許開發者使用 的形式來實現簡單的動圖需求，相較于原本的 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，注明 “ 前端之巔投稿 ”。