前端每週清單第 46 期: 2017 Node.js / GraphQL / Vue.js 盤點，前端性能優化與可用性保障

前端每週清單第 46 期: 2017 Node.js / GraphQL / Vue.js 盤點，前端性能優化與可用性保障

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

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（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，註明 「 前端之巔投稿 」。