摘要：楊冀龍是安全焦點(diǎn)民間白帽黑客組織核心成員，被浪潮之巔評(píng)為中國(guó)新一代黑客領(lǐng)軍人物之一他在本文中依次分享了對(duì)于黑客的定義如何從黑客成為一名安全創(chuàng)業(yè)者技術(shù)創(chuàng)業(yè)踩過(guò)的坑給技術(shù)創(chuàng)業(yè)者建議等內(nèi)容。

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

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

Angular 5.1 發(fā)布: 本文介紹了 Angular 5.1.0, Angular CLI 1.6 以及 Angular Material 的首個(gè)穩(wěn)定版本的特性變化。Angular 5.1.0 中包含了多個(gè)小的特性變化與錯(cuò)誤修復(fù)，此次系列更新主要包括了 Angular Material & CDK 穩(wěn)定版發(fā)布、CLI 工具支持 Service Worker、對(duì)于 Universal 以及 AppShell 支持的提升、裝飾器錯(cuò)誤信息優(yōu)化、支持 TypeScript 2.5 等等。

Ant Design 3.0 發(fā)布: Ant Design 是面向企業(yè)級(jí)桌面應(yīng)用的設(shè)計(jì)方案與實(shí)現(xiàn)，在 2.0 版本發(fā)布的 14 個(gè)月之后，3.0 版本正式發(fā)布，包含了來(lái)自 200 多位貢獻(xiàn)者的超過(guò) 4000 次提交。Ant Design 3.0 版本中引入了新的色彩系統(tǒng)，其受到天空的啟發(fā)，包含了薄暮、日出、拂曉藍(lán)等一系列優(yōu)美的色彩搭配；該版本還引入了新的組件設(shè)計(jì)，包括了對(duì)于大量組件的復(fù)寫(xiě)，完全支持 React 16 與 ES Module，并且優(yōu)化了對(duì)于 TypeScript 的支持。

Font Awesome 5 發(fā)布: 本周，F(xiàn)ont Awesome 5.0.0 正式發(fā)布，為我們帶來(lái)了全新的主頁(yè)，包含了九百多個(gè)免費(fèi)圖標(biāo)與一千多的商業(yè)圖標(biāo)。5.0 中提供了多種整合方式，最為推薦的是利用 JavaScript 與 SVG 圖標(biāo)協(xié)同使用，以替代原有的字體圖標(biāo)，從而提升性能與易用性。

TensorFlow Lite 支持 Core ML: TensorFlow Lite 是面向移動(dòng)設(shè)備與嵌入式設(shè)備的輕量級(jí) TensorFlow 版本，近日其宣布開(kāi)始支持 Core ML，通過(guò)工具能夠?qū)?TensorFlow 模型轉(zhuǎn)化為 .mlmode 這樣的 Core ML 模型格式。Core ML 是 iOS 內(nèi)置的機(jī)器學(xué)習(xí)框架，這意味著 iOS 開(kāi)發(fā)者能夠在 Core ML 上部署 TensorFlow 模塊，也是 TensorFlow Lite 在跨平臺(tái)支持上的重要一步；另一方面，Apple 也開(kāi)源了自定義機(jī)器學(xué)習(xí)模型框架 Turi Create，來(lái)幫助開(kāi)發(fā)者快速開(kāi)發(fā)機(jī)器學(xué)習(xí)模塊并且集成到 iOS 應(yīng)用中。

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

使用 Rust 開(kāi)發(fā)基于 WebAssembly 的游戲: 數(shù)周前，Alex Crichton 的 PR 使得 Rust 能夠直接被編譯為 WebAssembly 格式，本文作者也嘗試將基于 Rust 與 Piston 編寫(xiě)的桌面游戲 Rocket， 轉(zhuǎn)化為能夠在瀏覽器中運(yùn)行的 WebAssembly 格式的應(yīng)用。作者使用 JavaScript 來(lái)處理用戶的輸入輸出，并且進(jìn)行界面渲染，使用 Rust 來(lái)處理游戲邏輯；作者依次介紹了自己在遷移過(guò)程中碰到的多個(gè) Link 錯(cuò)誤以及處理方案，然后討論了 Rust 與 JavaScript 如何相互調(diào)用，以進(jìn)行畫(huà)面渲染與接收用戶輸入輸出等內(nèi)容。更多 WebAssembly 相關(guān)資料參考這里。

的變遷：非 GIF 的動(dòng)圖實(shí)現(xiàn): 圖片是現(xiàn)代網(wǎng)頁(yè)應(yīng)用中不可或缺的部分，GIFs 是動(dòng)圖實(shí)現(xiàn)的選擇之一，但其質(zhì)量與性能一直差強(qiáng)人意；如果直接使用 video 標(biāo)簽，又是無(wú)法發(fā)揮 preloaded 的作用，還必須分段請(qǐng)求。在 Safari Technology Preview 中，允許開(kāi)發(fā)者使用 的形式來(lái)實(shí)現(xiàn)簡(jiǎn)單的動(dòng)圖需求，相較于原本的 GIF 的解決方案能帶來(lái)將近二十倍的性能提升，并且支持 CSS 方式背景播放，其體積也有大幅度的降低。更多的圖片處理與性能優(yōu)化資料參考這里。

使用 Electron 與 React 創(chuàng)建 Markdown 應(yīng)用: 本文循序漸進(jìn)地介紹了如何使用 Electron 與 React 構(gòu)建簡(jiǎn)單的 MarkDown 應(yīng)用，作者將其命名為 Mook。本文依次介紹了技術(shù)棧的選擇與考量，開(kāi)發(fā)環(huán)境、構(gòu)建流程與模板應(yīng)用搭建，主功能開(kāi)發(fā)等內(nèi)容；更多 Electron 學(xué)習(xí)資料參考這里。

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

Airbnb 列表頁(yè)的 React 性能問(wèn)題淺析: Airbnb 已經(jīng)使用 React Router 與 Hypernova 將核心訂購(gòu)流程轉(zhuǎn)化為了服務(wù)端渲染的單頁(yè)應(yīng)用，本文則是介紹其如何將列表詳情頁(yè)進(jìn)行單頁(yè)應(yīng)用話改造，并且綜合提高其性能。本文首先討論了如何進(jìn)行性能評(píng)測(cè)，這篇文章也介紹了如何使用 Chrome DevTools 來(lái)調(diào)試 React 的性能問(wèn)題；然后介紹了其在初始化渲染、滾動(dòng)優(yōu)化、點(diǎn)擊反饋、輸入輸出方面的優(yōu)化技巧。更多 React 相關(guān)教程參閱 React 與前端工程化實(shí)踐。

Node.js 的可擴(kuò)展應(yīng)用模式：CQRS, ES, Onion: 本文介紹如何使用 CQRS 與 Event Sourcing 模式來(lái)開(kāi)發(fā) Node.js 應(yīng)用，使用 Onion 架構(gòu)來(lái)組織這些模式，并且使用 TypeScript 來(lái)進(jìn)行靜態(tài)類(lèi)型校驗(yàn)。本文首先討論了何謂靈活架構(gòu)：業(yè)務(wù)邏輯與實(shí)現(xiàn)分離、獨(dú)立于數(shù)據(jù)庫(kù)，框架，服務(wù)等等；然后介紹了 Event Sourcing 與 CQRS 的含義，以及它們是如何組織在洋蔥圈模型中的，最后以典型的認(rèn)證邏輯為例討論了如何實(shí)現(xiàn) CQRS 模式。更多 Node.js 的知識(shí)可以閱讀深入淺出 Node.js 全棧架構(gòu)。

基于 Intersection Observer 與 SQIP 的漸進(jìn)式圖片加載: 當(dāng)我們?yōu)g覽 Facebook、Pinterest 、 Medium 等內(nèi)容類(lèi)網(wǎng)站時(shí)，會(huì)發(fā)現(xiàn)圖片是漸進(jìn)式加載，即首先出現(xiàn)低質(zhì)量的、模糊的圖片，然后再出現(xiàn)真正的圖片，本文即是介紹如何使用 Intersection Observer 與 SQIP 實(shí)現(xiàn)漸進(jìn)式加載。之前的清單中我們有介紹過(guò) SQIP 這種圖片替代（Image PlaceHolder ）的生成方式，其能夠生成不足 1KB 的 SVG 格式的低質(zhì)量圖片；而 Intersection Observer 則能夠判斷某個(gè)圖片元素是否在視口內(nèi)，從而實(shí)現(xiàn)按需加載。更多的圖片處理與性能優(yōu)化資料參考這里。

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

Orinoco: V8 中的年輕代垃圾回收: V8 引擎中的 JavaScript 對(duì)象被分配在了堆上，并且由 V8 的垃圾回收器進(jìn)行生命周期的管理；本文即是介紹 Parallel Scavenger，Orinoco 的最新特性之一，是如何針對(duì)年輕代進(jìn)行垃圾回收的。本文首先介紹了分代垃圾回收模型，然后討論了單線程的 Cheney’s Semispace Copy 算法，最后討論了 Parallel Mark-Evacuate 以及 Parallel Scavenge 回收器的設(shè)計(jì)；更多 V8 相關(guān)資料索引參考這里。

2017 JavaScript 發(fā)展回顧: 在 2017 年 JS 狀態(tài)調(diào)查結(jié)果出爐之前，Sacha Greif 先和幾位專家聊了聊他們對(duì)于 2017 年 JavaScript 發(fā)展的看法與回顧，并整理成了這篇文章。本文從測(cè)試工具、構(gòu)建工具、狀態(tài)管理、全棧架構(gòu)等幾個(gè)不同的方面進(jìn)行了討論，對(duì) 2017 年中令人印象深刻的技術(shù)進(jìn)行了分享；除此之外，A recap of front-end development in 2017 也是一篇不錯(cuò)的總結(jié)，更多 JavaScript 相關(guān)資料參考這里。

Web 內(nèi)容可用性提升指南: World Wide Web Consortium (W3C) 發(fā)布的 Web Content Accessibility Guidelines 2.0 是網(wǎng)頁(yè)內(nèi)容可用性的絕佳指南，能夠幫助設(shè)計(jì)者與開(kāi)發(fā)者來(lái)提升網(wǎng)頁(yè)的整體可用性；本文則是對(duì)這份指南的簡(jiǎn)要總結(jié)，以幫助那些沒(méi)有時(shí)間閱讀原指南的開(kāi)發(fā)者快速了解網(wǎng)頁(yè)可用性方面的知識(shí)。本文依次討論了如何判斷用戶能否有效地接受網(wǎng)頁(yè)內(nèi)信息、如何判斷用戶能否有效地使用網(wǎng)頁(yè)中的控制按鈕與跳轉(zhuǎn)鏈接、用戶是否能夠理解網(wǎng)頁(yè)內(nèi)容、是否針對(duì)復(fù)雜的用戶環(huán)境進(jìn)行了適配等內(nèi)容；更多 Web 開(kāi)發(fā)相關(guān)內(nèi)容閱讀現(xiàn)代 Web 開(kāi)發(fā)工程化實(shí)踐。

卡通圖解 JavaScript 引擎: 本系列文章著眼于從運(yùn)行機(jī)制的角度來(lái)介紹 JavaScript，首篇文章介紹了 Callback Queue、Event Loop 等異步執(zhí)行相關(guān)的概念，本文則是從引擎的角度，以漫畫(huà)的方式來(lái)介紹 JavaScript 的編譯、解析與執(zhí)行的過(guò)程。上周的清單中我們推薦了 V8 引擎的推測(cè)優(yōu)化，本文則是提綱挈領(lǐng)地介紹 JIT 編譯器的原理，給讀者一個(gè)宏觀的概念展示；更多 JavaScript 引擎相關(guān)資料參考這里。

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

Parcel: Parcel 是高速、零配置的 Web 應(yīng)用打包工具；其面向現(xiàn)代操作系統(tǒng)設(shè)計(jì)，能夠進(jìn)行多核并發(fā)編譯，并且提供了文件系統(tǒng)的緩存以優(yōu)化重構(gòu)建或者增量構(gòu)建的性能。Parcel 還提供了開(kāi)箱即用的 JS, CSS, HTML, 資源文件等支持，能夠自動(dòng)地使用 Babel, PostCSS,PostHTML 來(lái)進(jìn)行代碼轉(zhuǎn)換，同時(shí)內(nèi)建支持 import() 動(dòng)態(tài)導(dǎo)入與熱替換。

electron-toolkit: electron-toolkit 是輕量級(jí)的、強(qiáng)大的 Electron 應(yīng)用的啟動(dòng)輔助工具，它能夠以 NPM 腳本的方式啟動(dòng)，為開(kāi)發(fā)者提供一系列開(kāi)發(fā)過(guò)程中需要的輔助工具。這些工具包括了圖標(biāo)生成、截圖工具、安裝器、二進(jìn)制文件生成、網(wǎng)站生成、實(shí)時(shí)更新等等。

Muuri: Muuri 是強(qiáng)大的 JavaScript 布局引擎，吸納了來(lái)自 Packery, Masonry, Isotope, 以及 Sortable 的優(yōu)秀特性，輔助開(kāi)發(fā)者快速構(gòu)建響應(yīng)式、可排序、可過(guò)濾、可拖拽、可動(dòng)畫(huà)控制的可擴(kuò)展表格系統(tǒng)。

Vuetron: Vuetron 是基于 Electron 開(kāi)發(fā)的，幫助 Vue.js 項(xiàng)目測(cè)試以及錯(cuò)誤檢測(cè)的工具，同時(shí)支持 Vuex 以及 Vue-Router。類(lèi)似于 Developer Tools，Vuetron 能夠查看事件、應(yīng)用狀態(tài)以及進(jìn)行時(shí)間回溯的調(diào)試；同時(shí)還能夠?qū)崿F(xiàn)監(jiān)聽(tīng)指定狀態(tài)變量的變化，查看 API 請(qǐng)求與響應(yīng)，可視化查看組件結(jié)構(gòu)樹(shù)等等功能。

從黑客到創(chuàng)業(yè)，他說(shuō)技術(shù)創(chuàng)業(yè)該這么做！: 本文是知道創(chuàng)宇 CTO & COO 楊冀龍?jiān)跇O客 Live 中分享的創(chuàng)業(yè)感悟和踩過(guò)的那些坑。楊冀龍是安全焦點(diǎn)民間白帽黑客組織核心成員，被《浪潮之巔》評(píng)為中國(guó)新一代黑客領(lǐng)軍人物之一；他在本文中依次分享了對(duì)于黑客的定義、如何從黑客成為一名安全創(chuàng)業(yè)者、技術(shù)創(chuàng)業(yè)踩過(guò)的坑、給技術(shù)創(chuàng)業(yè)者建議等內(nèi)容。

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