前端清單第 24 期：React 16 中 Fiber 實戰、Vue 圖表、V8 Turbofan 性能優化

前端每週清單第 24 期：React 16 中異常處理與 Fiber 實戰、Vue 圖表與 jQuery 插件、V8 Turbofan 性能優化

前端 前端每週清單

前端每週清單專一前端領域內容，分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

• Adobe 宣佈將在 2020 年末中止發佈與更新 Flash Player：該消息的發佈意味着屬於 Flash 的時代即將最終落幕；Flash 以及包含的 ActionScript、Flex、AIR 等技術方案對於現代 Web 發展起到了巨大的引導與推進做用。在即將功成身退的時候，咱們也對於他們致以崇高的敬意，Firefox、 Facebook、 Chromium 等也紛紛表示了對於 Flash 的感激與將來的遷移路線圖。

• 阿里巴巴即將開源 Angular 組件庫 NG-ZORRO：Zorro 的外觀設計由 Ant-Design 團隊擔綱，並且和其它組件庫共享了一致的風格和動畫效果。Zorro 已經在阿里雲團隊內部使用，不管是組件的數量，仍是代碼質量，包括外觀設計，都很是值得你們期待！對於 Angular 社區來講，這是一個重大的消息，Zorro 的發佈將會進一步提高 Angular 在企業應用方面的巨大優點。

• React 16 Beta 正式發佈：近日 React 16 Beta 版本正式發佈，該版本是 React 核心重構以來的首個發佈。該版本儘可能保證了從 15.x 到 16.x 的平滑升級，而且在引入了新的異常處理機制，容許編寫專用的異常處理組件、引入了新的調度與生命週期接口、重構了服務端渲染模塊，引入了新的流模式；更多特性介紹請查看原文。

• Webpack 3.4.0 發佈：近日發佈的 Webpack 3.4.0 版本中包含了多個插件的性能優化與錯誤修復；目前 NamedModulesPlugins 與 HashedModuleIdsPlugin 可以正常地與 DllReferencePlugin 協同使用，新增了 --config-name 參數以動態指定部分配置參數、提高了 ModuleConcatenationPlugin 的錯誤顯示，而且更新了大量的項目自身依賴版本。

開發教程

步步爲營，掌握基礎技能

• React 16 中的錯誤處理：在 React 15.x 及以前的版本中，組件內的異常有可能會影響到 React 的內部狀態，進而致使下一輪渲染時出現未知錯誤。這些組件內的異常每每也是由應用代碼自己拋出，在以前版本的 React 更多的是交託給了開發者處理，而沒有提供較好地組件內優雅處理這些異常的方式。在 React 16.x 版本中，引入了所謂 Error Boundary 的概念，從而保證了發生在 UI 層的錯誤不會連鎖致使整個應用程序崩潰；未被任何異常邊界捕獲的異常可能會致使整個 React 組件樹被卸載。更多 React 相關資料參考 https://parg.co/bM1 。

• 使用 Vue.js 與 Chart.js 構建漂亮的圖表：圖表是現代網站與應用的重要組成，它們可以幫助你更有張力地呈現數據；本文便是介紹如何利用 Chart.js 與 Vue.js 來有效地，針對不一樣格式的圖表進行可視化數據呈現。本文首先介紹了使用 vue-cli 構建基本的項目骨架，而後引入了 vue-router 進行路由劃分，接下來介紹了利用 vue-chartjs 庫依次構建常見的線型圖、餅圖、氣泡圖、柱狀圖等常見的圖表；更多 Vue.js 相關資料參考 https://parg.co/byL 。

• Angular 中利用新的動畫特效（v4.3+）優化路由變換：本文着眼於介紹 Angular 應用開發中，如何利用新的動畫特效，來爲路由切換添加動畫效果。本文首先介紹瞭如何從獨立的依賴中引入動畫模塊，與爲應用添加路由配置以及簡單的路由動畫；而後介紹了 Angular 動畫接口，如何定義動畫、如何添加參差效果等內容，最後介紹瞭如何將這些整合爲獨立的應用。

• 按部就班地利用 Express.js、Apollo Server 與 Webpack 建立可熱加載地結構化 GraphQL 接口：GraphQL 是 Facebook 在 2015 年提出的利用強類型的查詢語言構建接口新方式，GraphQL 正逐步被 Twitter、Github 這樣的大型互聯網公司所接納實踐。本文則着眼於介紹如何利用 Express 與 Apollo Server 構建 GraphQL 接口，而且如何去結構化管理 Schema 以保證其可管理性；除此以外還介紹瞭如何爲開發環境添加熱加載特性，更多 GraphQL 相關資料參考 https://parg.co/b1e 。

• 基於 Node.js 與 HTML5 的視頻流：本文一步一步地介紹如何構建基礎的 Node.js 接口，而且添加某個路由從而將視頻文件發送給前端。本文首先介紹了 Node.js 中流的基礎概念與如何獲取文件體積、從文件建立流而且獲取塊的大小等基本 API，而後介紹瞭如何搭建服務器而且添加合適的路由以返回視頻流，最後介紹了前端如何利用 HTML5 的 video 標籤實現視頻播放與控制；更多 Node.js 相關資料參考 https://parg.co/be0 。

工程實踐

立足實踐，提示實際水平

• JavaScript 設計模式學習：本書是 Addy Osmani 著做的開源書籍，主要介紹面向 JavaScript 語言的經典與現代的經常使用設計模式。所謂設計模式便是軟件設計中常見問題的可複用解決方案，對於任何一門編程語言都是很是值得探索的話題。本文首先概述了設計模式的基礎理論，而後介紹了 JavaScript 中常見的十餘種類與對象的設計模式，接下來介紹了 JavaScript 界面設計相關的 MV* 設計模式，而後還介紹了 JavaScript 模塊化設計以及 jQuery 中的設計模式等內容；更多 JavaScript 設計模式相關參考 https://parg.co/bIO 。

• Vue.js 中安全地使用 jQuery 插件：實際上咱們並不推薦在界面中同時使用 jQuery 與 Vue.js，不過在項目開發中有時候咱們沒法避免地須要同時使用，本文便是討論如何安全地使用 jQuery 插件。本文以某個時間日期選擇插件爲例，首先討論了引入 jQuery 存在的潛在風險，而後一步步地介紹了初始化插件、將插件包裹在 Vue.js 組件內、如何在插件與組件之間進行數據交互等內容；更多 Vue.js 相關資料參考 https://parg.co/byL 。

• Angular 開發者常犯的錯誤枚舉：本文做者從本身團隊的 Angular 開發經驗與 Code Review 中總結出了開發者常犯的錯誤，而且提出瞭解決方案。這些錯誤包括對於 Angular、Angular 二、Angular 4 等各個版本的誤解、ngOnChanges 與 ngDoCheck 對比、殭屍訂閱、冗餘訂閱、不一樣模塊的 providers 誤用、直接操做 DOM 結點、重複聲明組件等方面。

• Node.js 微服務實踐：微服務架構目前正在大行其道，不過做者發現因爲不少人有本身獨到的看法，微服務架構的變種與複雜度在持續增長；做者則但願經過本文使初學者快速地利用 Node.js 開發出簡單的微服務。本文首先介紹了微服務出現的背景以及微服務的五個原則：零配置、高冗餘、可容錯、自我修復、自動發現；而後介紹了使用 cote 這個微服務庫一步一步地實現 Node.js 微服務集羣，依次建立 Requester、Responder 等基礎組件以最終實現系統中的幾個相互依賴的模塊。更多 Node.js 相關資料參考 https://parg.co/be0 。

• 漸進式 CSS 佈局：從 Floats 到 Flexbox 到 Grid：隨着各大現代瀏覽器逐步支持 CSS Grid 佈局，愈來愈多的開發者在嘗試使用這種新型的佈局方式。不過鑑於目前還存在着大量的老版本瀏覽器，做者在本文中重點討論瞭如何利用漸進式 CSS 佈局加強的方式來應對不一樣瀏覽器環境下的佈局解決方案，而且根據運行環境來漸進加強；更多 CSS/SCSS 相關資料參考 https://parg.co/baH 。

深度閱讀

深度思考，昇華開發智慧

• V8 新的 Turbofan JIT 編譯器帶來的性能特性概述：V8 JavaScript 引擎最先是 Google 爲 Chrome 瀏覽器開發的 JavaScript 虛擬機，其設計的初衷就是爲了讓 JavaScript 可以高速運行；而這種性能優化的保障就是所謂 JIT 編譯器。本文着眼於介紹 V8 新的 Turbofan JIT 編譯器提供的新的性能特性可以爲應用帶來的優化；本文依次介紹了使用 delete 操做符與設置爲 undefined 這兩種不一樣的去除對象屬性的方式在新的編譯器下的表現差別、對於 Arguments 參數不一樣操做的對比、柯里函數與 bind 操做符的優化，以及對象遍歷、對象建立和對於新舊引擎中對於常見的 Winston 等日誌框架的性能對比等內容。更多 JavaScript 引擎相關知識參考 https://parg.co/bgp

• JavaScript 之路：本書但願爲任何對 JavaScript 有興趣的開發者提供 JavaScript 的多領域知識，其兼具了入門簡單、對初學者友好、使用 ES2015 語法以及規範的樣式指南等特色。本書主要包含如下章節：JavaScript 語法基礎、利用 DOM 接口建立交互性的網頁、構建完整的 Web 應用等內容；更多 JavaScript 相關資料參考 https://parg.co/bMI 。

• 聊聊 FE 們面試那點事兒：本篇不是一篇講面試題的技術貼，而是來自一位技術面試官的深層思考。本文做者從面試官與面試者兩個角度來聊聊面試的事情；對於面試官，做者討論瞭如何理性對待、如何基於行爲面試法對技術知識進行考覈、應該尊重而且感謝候選人等。而從面試者的角度，筆者對於面試中所謂正確的答案，以及如何準備知識與簡歷進行了討論。

• 2017 Web 開發趨勢：Web 開發在 2016 年裏獲得了長足的發展與進步，而本文則高屋建瓴地分析了 2017 年中 Web 開發可能面臨的機遇與挑戰。做者首先討論了人工智能的前景以及 Web 與之相結合的案例，而後討論了物聯網行業中 Web 相關的開發案例；接下來做者分析了崛起的 JavaScript 以及目前流行的項目，而後又從靜態網站生成器、虛擬現實、GIFs、Bots 等角度討論其餘的發展方向。

• React 的新引擎— React Fiber 是什麼？：瀏覽器中的渲染引擎是單線程的，幾乎全部的操做都是在這個單線程中執行——解析渲染 DOM Tree 和 CSS Tree，解析執行 JavaScript ——除了網絡操做。這個線程就是瀏覽器的主線程。單線程意味着，一段時間只作一件事，因此瀏覽器在同一時間內，其主線程只能關注於一個任務。React 核心團隊很早以前就預知這樣的風險的存在，而且持續探索可解決的方式。基於瀏覽器對 requestIdleCallback 和 requestAnimationFrame 這兩個 API 的支持，以及其餘團隊對者兩個 API 的實現，如 React Native 團隊。React 團隊實現新的調度策略 -- Fiber reconcile；更多 Fiber 相關資料參閱 https://parg.co/bgO 。

開源項目

樂於分享，共推前端發展

• vue-3d-model：一個展現三維模型的 Vue 組件，支持模型操做和模型點擊事件，能自動縮放模型到合適大小並校訂偏移，目前支持 obj、stl、dae 和 json 格式的模型。

• Chromeless：Chromeless 是很是優秀的 Chrome 自動化控制庫，可以同時運行在本地與 AWS 中。Chromeless 可以同時運行千餘個瀏覽器集成測試、可以被用於進行網頁抓取與自動截圖、可以編寫須要真實瀏覽器的機器人等等；能夠在這裏進行在線試驗。

• react-tiny-virtual-list：零依賴的輕量級 React 列表虛擬化庫，可以渲染數百萬的項目而不會有什麼卡頓；同時 react-tiny-virtual-list 還支持指定項目的高度、手動控制滾動到某個項目下標處、設置初始化滾動偏移、支持水平列表等等特性。

• trust：挺有意思的博弈論交互式指南，經過簡單的小遊戲來介紹競合關係。除了能瞭解簡單的博弈論知識以外，筆者以爲該指南的動畫效果還挺有意思的，值得一看。

巔峯人生

• Linux、Git 之父 Linus Torvalds 的別樣技術人生：本文是 InfoQ 對於 Linus Torvalds 的專訪；十五年來，Linus Torvalds 一直堅持在技術第一線，開發了 Linux 和 Git 兩個項目，並深入影響了軟件行業。Linus Torvalds 極度熱愛技術，但並非泛 IT 技術的追隨者，他歷來沒有寫過 web 程序、不會設置 FTP 服務器的他有着很聚焦的技術關注點。可是，他並非一根筋的潔癖開源理想者，很早他就思考了商業對開源的做用；他很開心也很感激商業公司和基金會幫他處理全部那些他不肯意處理的事情，而且能夠作到徹底放權、無論不問。

前端之巔

「前端之巔」是InfoQ旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆「加羣」。投稿請發郵件到editors@cn.infoq.com，註明「前端之巔投稿」。