前端每周清單第 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）分享的其對于架構師的看法與理解，以及成為架構師所需要各方面能力的討論。作者首先分析了什么是架構師以及架構師在團隊中的定位，然后討論了架構師與傳統領域專家的異同，最后分享了其認為架構師應該具備的各項能力，從基礎的邏輯、抽象、想象，到空杯、好奇、實踐的心態，以及技術架構與組織架構等待。