作者：王下邀月熊 編輯：徐川
前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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，註明“前端之巔投稿”。
