作者：王下邀月熊 編輯：徐川
前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
- Intel CPU 爆重大設計缺陷，瀏覽器中同樣可以越權訪問: 近日 Intel CPU 被爆存在設計缺陷，普通的使用者程式能夠識別受保護區域的核心佈局及其中內容；所有能訪問虛擬記憶體的 CPU，都可能被越權訪問，而該問題的修復方案可能帶來極大的處理器效能下降。同時根據 Mozilla 安全研究人員驗證表明，相同的技術能夠用於瀏覽器中讀取不同源的隱私內容；各大瀏覽器廠商在致力於規避該問題，譬如限制 performance.now() 的執行間隔，或者預設禁用 SharedArrayBuffer 等。
-
FuseBox 3.0 釋出: FuseBox 是輕量級的打包工具，近日釋出的 3.0 版本更是提升了約 20% 的效能表現；其只需要 50~100ms 即可以打包大型專案。新版本中支援零配置程式碼分割，更新了任務執行器，優化了 TypeScript 包釋出流程，並且大幅提升了速度與穩定性。
-
Storybook 3.3 釋出: 新年之際， Storybook 釋出了 3.3 版本，帶來了對 Angular 的支援。該版本支援在 Angular 4+ 的專案中使用 Storybook，並且允許開發者設定不同的 Viewport 以模擬不同解析度的裝置；同時該版本還支援直接在 Storybook 中預覽測試結果，更多的特性變化請檢視原文。
開發教程
步步為營，掌握基礎技能
- 2017 年釋出的優秀 Node.js 開源專案盤點: 2017 年裡， Node.js 社群也愈發活躍；本文從 4700 多個去年釋出的 Node.js 開源專案中，挑選出 25 個優秀的代表。這些專案涵蓋了不同的功能方向，譬如 Headless Chrome Node API Puppeteer, 用於建立模擬資料的 faker.js，用於將 Node.js 專案打包為可執行檔案的 Pkg，用於進行圖片處理的 Sharp，用於進行 Docker 介面化管理的 Portainer 等等。更多 Node.js 相關資料參考這裡。
-
基於 React, Apollo, 以及 GraphQL 構建短連結服務: 本系列文章循序漸進地介紹瞭如何使用 React、GraphQL 以及 Node.js 構建完整的短連結服務。首篇文章介紹了使用 GraphQL 與 React 搭建短連結展示介面，第二篇介紹了短連結構造服務，然後討論瞭如何建立用於計算 Hash 的 Serverless Function，接下來分析瞭如何記錄點選數等統計資訊，最後介紹瞭如何新增使用者許可權認證。更多 React 教程查閱 React 與前端工程化實踐。
-
探究 V8 引擎是如何將 JavaScript 轉化為機器碼: 本文以擴充套件 V8 的原生方法為例，介紹了 V8 引擎是如何將 JavaScript 轉化為可被 CPU 執行的機器碼指令。V8 是由 Google 開源的 JavaScript 引擎，其能夠將 JavaScript 程式碼轉化為低階別的機器碼；V8 實現了 ECMA-262 標準，其即可以獨立執行，也可以巢狀在其他的 C++ 程式中執行。更多 V8 相關資料參考 V8 引擎資料索引。
工程實踐
立足實踐，提示實際水平
-
來自 Tinder 的 PWA 實踐案例: 隨著 Safari 開始支援 ServiceWorker，PWA 的前景也愈發光明；本文則是記述了 Tinder 是如何優化 JavaScript 效能表現、使用 Service Worker 來提供網路彈性、使用 Push Notification 來提示會話。同樣，本文首先量化對比了改造前後 Tinder 應用在不同網路環境下的效能表現，然後依次討論了基於 Loadable 的程式碼分割、資源快取與預載入、CSS 載入策略、執行時效能優化等內容；更多 PWA 相關資料參考 PWA 學習與實踐資料索引。
-
2018 前端效能清單: 效能優化任重道遠，隨著硬體裝置、瀏覽器以及開發技術的不斷演化，優化技巧也在不停地改變，本文即是最新的效能優化總結清單；本文也並不侷限於介紹技術本身，還討論瞭如何打通優化全流程，構建持續性優化地開發文化。本文依次討論了調優規劃與效能評測、設定合理的目標、構建合適的環境、優化構建流程與圖片文字等資源、分發流程優化等內容；更多 Web 效能優化討論參考現代 Web 應用架構與效能調優。
-
現代瀏覽器的網路層效能優化之道: 因特網問世已有數十年，本文則是著眼於介紹現代瀏覽器採用了哪些技術，主要是在網路層上，來自動地進行效能優化。瀏覽器的效能會受到很多因素的影響，其中網路層往往會是瓶頸，而瀏覽器為我們遮蔽了很多底層的實現細節；本文依次介紹了 Socket 管理、網路安全與沙盒、資源與客戶端狀態快取、應用介面與協議等內容。更多 Web 效能優化討論參考現代 Web 應用架構與效能調優。
深度閱讀
深度思考，昇華開發智慧
- 健壯的客戶端 JavaScript 程式碼: JavaScript 已然是現代 Web 開發者必需的工具之一，網站也越來越多的應用 JavaScript 來提高可互動性。不過隨著客戶端 JavaScript 程式碼複雜度的增加，使用者使用過程中出現錯誤的概率也就越大；本小書即討論什麼是 JavaScript 程式碼的健壯性以及如何保證。本書首先討論了 JavaScript 的特性以及健壯性的通用定義，然後列舉了 JavaScript 中可能丟擲的異常或者失敗的情景，最後陳述了數十條避免或者抑制錯誤的方法。更多 JavaScript 教程參考現代 JavaScript 開發：語法基礎與工程實踐。
-
2017 Vue.js 盤點: 本文是對於 Vue.js 的年末盤點，總結了 2017 年中 Vue.js 及其社群發生的變化與取得的成就。在過去一年中 Vue.js 獲得了四萬多 Star，框架本身的效能與易用性、健壯性也都得到了提升；服務端渲染、異常處理等也都得到了優化。而在內部的變化之外，整個技術棧內的框架，譬如 Element, Framework7, Onsen UI, vuetify, vue-material 以及 quasar 都發布了重大的版本更新，相關的資料也得到了擴充。此外，Weex, nativescript-vue 這樣的原生整合擴充套件也取得了長足的發展，Adobe, GitLab, IBM 等大型團隊或公司也都在逐步使用 Vue.js。
-
2017 GraphQL 盤點: GraphQL 最早開源於 2015 年，隨著 Apollo, graphcool 等一系列優秀框架的出現，GraphQL 在 2017 年蓬勃發展，並且可以預見其在 2018 年會繼續蒸蒸日上；本文是對去年 GraphQL 及其社群發生的變化與取得的成就的盤點。本文首先介紹了 IBM, Walmart 等巨頭對 GraphQL 的看法，然後列舉了去年發生的 GraphQL 大事件，最後展望了 2018 年 GraphQL 的規劃；
-
我是如何從網頁中竊取信用卡賬戶密碼的: 本文講述了某些攻擊者是如何用 NPM 向一些廣泛使用的開源工具，注入滲透程式碼並蒐集各類資訊的故事。
開源專案
樂於分享，共推前端發展
- Majestic: Majestic 是基於 Electron 開發的，介面化檢視與控制 Jest 測試用例的應用。Jest CLI 本身已然提供了非常友好的測試體驗，不過 Majestic 希望能夠通過介面互動地方式進一步優化開發測試的體驗。
-
TeaVM: TeaVM 是面向 Java 位元組碼的 AOT 編譯器，其能夠將 Java 位元組碼編譯為 JavaScript 與 WebAssembly。不同於著名的 GWT，TeaVM 並不需要原始碼支援，而只需要編譯之後的位元組碼檔案；這也意味著 TeaVM 天生支援 Scala 與 Kotlin 這樣的 JVM 方言。
-
Stimulus: Stimulus 是輔助型的前端框架，它並不介入到具體的 HTML 渲染流程，自然也不會想去接管整個前端應用。它的設計初衷即是在儘可能少地介入的情況下來增強當前的 HTML，與 Turbolinks 協同使用的話能夠在最小改動的情況下完成對應用的效能改造。
-
Uppy: Uppy 是新一代的模組化檔案上傳控制元件，其能夠無縫整合到任何 Web 應用中，並且提供了易用的介面。Uppy 內建支援從本地磁碟、Google Drive、Dropbox、Instagram、Camera 等多個源中抓取資料，並且提供了良好的預覽介面，同時支援對上傳過程地審視與控制。更多特性介紹請檢視原文。
巔峰人生
- 10 大關鍵詞，10+1 位技術人的全年回顧: 年末的時候，以“記錄與時代並行的技術人”為使命的二叉樹，問了十位技術人同一個問題：過去一年你經歷了什麼？有來自百度的 Web 前端高階技術經理，有 Google 開發者平臺工程師，有火幣網 CTO，他們從不同的角度談了談技術的發展，談了談明年的期許。
前端之巔
「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆 “ 加群 ”。投稿請發郵件到 editors@cn.infoq.com，註明 “ 前端之巔投稿 ”。