前端每週清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

前端每週清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

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

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

• Microsoft 宣發麪向 iOS 與 Android 平臺的 Microsoft Edge：爲了保證 Windows 用戶各平臺使用體驗的一致性，Microsoft 於本週發佈了針對於 iOS 與 Android 平臺的 Microsoft Edge 瀏覽器以及針對 Android 平臺的 Microsoft Launcher；不過目前各平臺上的 Edge 瀏覽器仍然使用的是操做系統默認的渲染引擎，即 iOS 系統上的 Webkit 引擎與 Android 的 Chrome 引擎，所以開發者們也無需擔憂須要針對移動版的 Microsoft Edge 進行適配。
• Firefox 56 正式發佈：本週 Firefox 56 版本正式發佈，其搭載的新一代 Quantum 引擎帶來了大幅度的性能提高、全新的交互界面、升級版本的開發者工具等諸多特性與優化。除此以外，Firefox 56 還提供了便捷的截圖功能，容許使用者對於網頁截圖編輯而且快速保存到雲端；同時引入了 <link rel="preload"> 以提供資源預加載功能，而且容許使用者經過 -headless 指令來啓動無界面化的瀏覽器。
• Mocha 4.0.0 發佈：本週 Mocha 4.0.0 版本正式發佈，其再也不支持 Node.js Pre-v4.0.0 及以前的版本，再也不支持 npm v2.15.11 以及以前的版本，而且計劃再也不支持 Bower；除了版本的兼容性以外，Mocha 再也不會強制測試完畢後退出，而且優化了輸出顯示。
• iView 2.4 版本發佈：iView 是基於 Vue.js 構建的界面組件與插件庫，其包含了 TalkingData 開發的一系列面向中間層與後端業務邏輯的解決方案；iView 提供了基礎組件、表單組件、視圖組件、導航組件、圖表與其餘多種類型的組件。

開發教程

步步爲營，掌握基礎技能

• 8 個關鍵的 React 技術選型：自 2013 年 React 開源以來，React 技術棧也發生了急劇的變化與更新，如今搜索到的很多文章可能也都過期了；本文則是對於如今進行 React 開發所須要的技術棧進行了盤點。首先是開發環境，create-react-app 以 65% 獨佔鰲頭；在類型系統上，有 42% 的開發者選擇了 PropTypes，34% 的開發者選擇了 TypeScript。而在狀態管理上，48% 的使用 Redux，11% 的使用了 MobX；愈來愈多的開發者也選擇使用 CSS 或 SASS 設置樣式，選擇用 HoC 或者 Render Props 來複用邏輯。更多 React 相關資料查看這裏。
• Vue.js 2 與 Vue.js 3 中響應式實現的對比：Vue.js 核心團隊已經在討論 Vue.js 3 中核心的響應式實現方式，在保證 API 一致的狀況下，其內部實現方式可能會發生變化，本文便是對兩種響應式實現方案進行對比。Vue.js 2.0 的響應式主要依賴 Object.defineProperty，其具備較好地瀏覽器兼容性，可是其沒法直接監聽數組下標方式變動以及動態添加的屬性；而 Vue.js 3 中則計劃使用 ES6 Proxy 來實現響應式監聽，其可以簡化源代碼、易於學習，而且還能帶來更好地性能表現。更多 Vue.js 相關資料查看這裏。
• HTTPS 工做原理簡述：本文是對於 HTTPS 協議原理的簡要介紹，隨着愈來愈多的站點全站化 HTTPS，咱們也有必要去了解 HTTPS 的相關知識。本文首先概述了 HTTPS 的機制原理，而後介紹了 Diffie-Hellman 算法，接下來介紹了電子證書、Asymmetric Key Encryption、電子簽名、證書校驗等內容；更多 HTTPS 相關資料查看這裏。
• CSS Grid 中的技巧與絆腳石：CSS Grid 爲咱們帶來了新的佈局方式，不過在實際使用的過程當中也存在着不少的問題，本文便是對這些技巧與絆腳石進行盤點。本文首先分析了 CSS Grid 相較於 Flexbox 的優點，而後討論了 CSS Grid 與 Flexbox 各自的適用場景、自適應尺寸的 CSS Grid、如何利用 CSS Grid 實現瀑布流、如何添加背景與邊距色、如何進行嵌套佈局、如何調試等內容；更多 CSS 相關資料查看這裏。

工程實踐

立足實踐，提示實際水平

• React, 內聯函數與性能：不少關於 React 性能優化的文章都會談及內聯函數，其也是常見的被詬病爲拖慢性能表現的元兇之一；不過本文倒是打破砂鍋問到底，論證了內聯函數並不必定就會拖慢性能，過分的性能優化反而會有損於應用性能。做者從本身的實踐談起，首先討論了內聯函數可能拖慢性能的兩個緣由：內存分配與垃圾回收、shouldComponentUpdate；做者認爲使用內聯函數反而可以減小組件初始化時的耗時，而 shouldComponentUpdate 或者 PureComponent 也並不是全部的狀況都能起做用，咱們也是應該因時而異。更多 React 相關資料查看這裏。
• Angular 性能優化建議：Oasis Digital 一直在使用 Angular 來構建大型軟件項目，而在多年的實踐中，特別是在構建性能敏感的應用過程當中，工程師們總結了不少的經驗教訓；本文便是他們分享的三個最爲重要的性能優化相關的建議。本文首先討論了對於運行時性能的定義與指標構成，而後分析瞭如何提高事件的響應速度、如何最小化變化檢測的範圍、如何最小化 DOM 操做這三個優化策略。更多 Angular 相關資料查看這裏。
• 響應式圖片基礎：圖片是現代網站的重要組成，其可以加強網頁的表現力與感染力；不過用戶每每不肯意太久地等待圖片加載，所以選擇合適的圖片尺寸可以大大提高用戶體驗。做者在本文中闡釋了響應式圖片的基本概念以及常見的設置響應式圖片的方法；本文首先討論瞭如何選擇合適的方式來設置響應式圖片、如何選擇合適的分割點、像素與百分比的對比、瀏覽器中 size 屬性的做用、利用 CSS 使得圖片更加流暢等待。更多性能優化相關資料參考這裏。

深度閱讀

深度思考，昇華開發智慧

• Vue.js 現狀盤點與將來規劃：本文不是一篇教程，而是以時間線敘述的方式來介紹 Vue.js 的建立與發展，Vue.js 技術社區的現狀以及將來 3.0 版本的規劃。本文首先介紹了 Vue.js 的建立初衷與設計理念，而後介紹了 Vue.js 目前的各類資源：學習資料、週報、論壇、社區等等，還有 Vue.js 相關的 Weex 這樣的原生擴展。最後本文還討論了 2.0 版本中對於測試套件、TypeScript 支持、ESLint 優化等提高，以及 3.0 版本中對核心的響應式機制、對於舊版本瀏覽器的支持等規劃。更多 Vue.js 相關資料查看這裏。
• V8 引擎中針對 ES2015 Proxy 進行的優化：Proxy 是 ES2015 的重要組成部分，其也被逐步地應用到衆多的項目或者庫中，譬如 jsdom、Comlink RPC 等；近日來 V8 團隊也在致力於提高 Proxy 在 V8 中的性能表現，本文主要分享了 V8 中 Proxy 的性能提高範式，也有助於開發者瞭解 Proxy 的實現原理。本文首先分析了老版本的 Proxy 實現原理與工做機制，而後討論了優化的解決方案以及現實環境下的性能對比；更多 V8 相關資料查看這裏。
• 圖片優化中的必知必會：截止 2017 年，圖片仍然是網絡帶寬最大的佔用者，參考 HTTP Archive 的統計數據，全部抓取的網頁數據中有超過 60% 的流量是 JPEG、PNG 以及 GIF 等圖片資源；Addy Osmani 則在本書中很是詳細地闡述了圖片壓縮中必知必會的知識。本書首先拋出了觀點：全部的圖片都應該進行合適地壓縮，全部的壓縮都應當是自動化地進行,接下來本書依次介紹瞭如何判斷圖片是否須要壓縮、如何選擇合適的圖片格式、JPEG 的格式介紹與壓縮技巧、WebP 介紹與瀏覽器的支持狀況、SVG 壓縮技巧、避免重複壓縮、雪碧圖、緩存、預加載等等內容；更多性能優化相關資料參考這裏。
• 大型代碼庫遷移到 React 16 過程當中學到的知識：在 Facebook 正式發佈了 React 16.0 版本以後，新的 Fiber 渲染流帶來了更多的性能提高；本文則是來自 Discord 的工程師分享的它們將原有應用升級到 React 16.0 版本的經驗。本文首先分析了新版本中帶來的譬如 ErrorBoundary 等一系列的特性變化，分享了 Discord 內部關因而否有必要升級的討論；而後介紹了利用 jscodeshift 來修正 PropTypes、如何安全移除原有內部 API 的使用、如何升級依賴，以及 React Native 中須要進行的升級工做等內容。更多 React 相關資料查看這裏。

開源項目

樂於分享，共推前端發展

• Vuera: Vuera 是同時兼容 React 與 Vue.js 組件的集成框架，它容許開發者在 React 中引入 Vue.js 組件，或者在 Vue.js 中引入 React 組件。Vuera 算是很是不錯的實驗性嘗試，不過其具體的性能表現如何還有待觀察。
• Nest: Nest 是基於 TypeScript 的用於構建高性能、可擴展的 Node.js 應用的框架，其同時整合了面向對象編程 OOP 與函數式編程 FP 以及函數響應式編程 FRP 優秀理念。Nest 提供了相似於 Angular、Express 這樣著名框架的接口，內置了 WebSocket、響應式微服務支持、管道等多種功能特性。
• Sentineljs: SentinelJS 是輕量級的，容許經過 CSS 選擇器設置監聽目標，而且動態監測新 DOM 節點建立的庫；它可以在監控到新的 DOM 節點建立完畢以後自動調用回調函數。SentinelJS 相較於其餘解決方案，使用了動態定義的 CSS Animation 規則中的 animationstart 事件來監聽某個元素是否存在，可以得到比 Mutation Observer 更好地性能表現。

巔峯人生

• 欲修煉成架構師，必先……：本文是互聯網老兵陳美珍（Frank）分享的其對於架構師的見解與理解，以及成爲架構師所須要各方面能力的討論。做者首先分析了什麼是架構師以及架構師在團隊中的定位，而後討論了架構師與傳統領域專家的異同，最後分享了其認爲架構師應該具有的各項能力，從基礎的邏輯、抽象、想象，到空杯、好奇、實踐的心態，以及技術架構與組織架構等待。

前端之巔

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