摘要：工程實踐立足實踐，提示實際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一不過本文卻是打破砂鍋問到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會拖慢性能，過度的性能優(yōu)化反而會有損于應(yīng)用性能。

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

前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

國內(nèi)國外，前端最新動態(tài)

Microsoft 宣發(fā)面向 iOS 與 Android 平臺的 Microsoft Edge：為了保證 Windows 用戶各平臺使用體驗的一致性，Microsoft 于本周發(fā)布了針對于 iOS 與 Android 平臺的 Microsoft Edge 瀏覽器以及針對 Android 平臺的 Microsoft Launcher；不過目前各平臺上的 Edge 瀏覽器仍然使用的是操作系統(tǒng)默認(rèn)的渲染引擎，即 iOS 系統(tǒng)上的 Webkit 引擎與 Android 的 Chrome 引擎，因此開發(fā)者們也無需擔(dān)心需要針對移動版的 Microsoft Edge 進行適配。

Firefox 56 正式發(fā)布：本周 Firefox 56 版本正式發(fā)布，其搭載的新一代 Quantum 引擎帶來了大幅度的性能提升、全新的交互界面、升級版本的開發(fā)者工具等諸多特性與優(yōu)化。除此之外，F(xiàn)irefox 56 還提供了便捷的截圖功能，允許使用者對于網(wǎng)頁截圖編輯并且快速保存到云端；同時引入了 以提供資源預(yù)加載功能，并且允許使用者通過 -headless 指令來啟動無界面化的瀏覽器。

Mocha 4.0.0 發(fā)布：本周 Mocha 4.0.0 版本正式發(fā)布，其不再支持 Node.js Pre-v4.0.0 及之前的版本，不再支持 npm v2.15.11 以及之前的版本，并且計劃不再支持 Bower；除了版本的兼容性之外，Mocha 不再會強制測試完畢后退出，并且優(yōu)化了輸出顯示。

iView 2.4 版本發(fā)布：iView 是基于 Vue.js 構(gòu)建的界面組件與插件庫，其包含了 TalkingData 開發(fā)的一系列面向中間層與后端業(yè)務(wù)邏輯的解決方案；iView 提供了基礎(chǔ)組件、表單組件、視圖組件、導(dǎo)航組件、圖表與其他多種類型的組件。

步步為營，掌握基礎(chǔ)技能

8 個關(guān)鍵的 React 技術(shù)選型：自 2013 年 React 開源以來，React 技術(shù)棧也發(fā)生了急劇的變化與更新，現(xiàn)在搜索到的不少文章可能也都過時了；本文則是對于現(xiàn)在進行 React 開發(fā)所需要的技術(shù)棧進行了盤點。首先是開發(fā)環(huán)境，create-react-app 以 65% 獨占鰲頭；在類型系統(tǒng)上，有 42% 的開發(fā)者選擇了 PropTypes，34% 的開發(fā)者選擇了 TypeScript。而在狀態(tài)管理上，48% 的使用 Redux，11% 的使用了 MobX；越來越多的開發(fā)者也選擇使用 CSS 或 SASS 設(shè)置樣式，選擇用 HoC 或者 Render Props 來復(fù)用邏輯。更多 React 相關(guān)資料查看這里。

Vue.js 2 與 Vue.js 3 中響應(yīng)式實現(xiàn)的對比：Vue.js 核心團隊已經(jīng)在討論 Vue.js 3 中核心的響應(yīng)式實現(xiàn)方式，在保證 API 一致的情況下，其內(nèi)部實現(xiàn)方式可能會發(fā)生變化，本文即是對兩種響應(yīng)式實現(xiàn)方案進行對比。Vue.js 2.0 的響應(yīng)式主要依賴 Object.defineProperty，其具有較好地瀏覽器兼容性，但是其無法直接監(jiān)聽數(shù)組下標(biāo)方式變更以及動態(tài)添加的屬性；而 Vue.js 3 中則計劃使用 ES6 Proxy 來實現(xiàn)響應(yīng)式監(jiān)聽，其能夠簡化源代碼、易于學(xué)習(xí)，并且還能帶來更好地性能表現(xiàn)。更多 Vue.js 相關(guān)資料查看這里。

HTTPS 工作原理簡述：本文是對于 HTTPS 協(xié)議原理的簡要介紹，隨著越來越多的站點全站化 HTTPS，我們也有必要去了解 HTTPS 的相關(guān)知識。本文首先概述了 HTTPS 的機制原理，然后介紹了 Diffie-Hellman 算法，接下來介紹了電子證書、Asymmetric Key Encryption、電子簽名、證書校驗等內(nèi)容；更多 HTTPS 相關(guān)資料查看這里。

CSS Grid 中的技巧與絆腳石：CSS Grid 為我們帶來了新的布局方式，不過在實際使用的過程中也存在著很多的問題，本文即是對這些技巧與絆腳石進行盤點。本文首先分析了 CSS Grid 相較于 Flexbox 的優(yōu)勢，然后討論了 CSS Grid 與 Flexbox 各自的適用場景、自適應(yīng)尺寸的 CSS Grid、如何利用 CSS Grid 實現(xiàn)瀑布流、如何添加背景與邊距色、如何進行嵌套布局、如何調(diào)試等內(nèi)容；更多 CSS 相關(guān)資料查看這里。

立足實踐，提示實際水平

React, 內(nèi)聯(lián)函數(shù)與性能：很多關(guān)于 React 性能優(yōu)化的文章都會談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一；不過本文卻是打破砂鍋問到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會拖慢性能，過度的性能優(yōu)化反而會有損于應(yīng)用性能。作者從自己的實踐談起，首先討論了內(nèi)聯(lián)函數(shù)可能拖慢性能的兩個原因：內(nèi)存分配與垃圾回收、shouldComponentUpdate；作者認(rèn)為使用內(nèi)聯(lián)函數(shù)反而能夠減少組件初始化時的耗時，而 shouldComponentUpdate 或者 PureComponent 也并非所有的情況都能起作用，我們也是應(yīng)該因時而異。更多 React 相關(guān)資料查看這里。

Angular 性能優(yōu)化建議：Oasis Digital 一直在使用 Angular 來構(gòu)建大型軟件項目，而在多年的實踐中，特別是在構(gòu)建性能敏感的應(yīng)用過程中，工程師們總結(jié)了很多的經(jīng)驗教訓(xùn)；本文即是他們分享的三個最為重要的性能優(yōu)化相關(guān)的建議。本文首先討論了對于運行時性能的定義與指標(biāo)構(gòu)成，然后分析了如何提升事件的響應(yīng)速度、如何最小化變化檢測的范圍、如何最小化 DOM 操作這三個優(yōu)化策略。更多 Angular 相關(guān)資料查看這里。

響應(yīng)式圖片基礎(chǔ)：圖片是現(xiàn)代網(wǎng)站的重要組成，其能夠增強網(wǎng)頁的表現(xiàn)力與感染力；不過用戶往往不愿意過久地等待圖片加載，因此選擇合適的圖片尺寸能夠大大提升用戶體驗。作者在本文中闡釋了響應(yīng)式圖片的基本概念以及常見的設(shè)置響應(yīng)式圖片的方法；本文首先討論了如何選擇合適的方式來設(shè)置響應(yīng)式圖片、如何選擇合適的分割點、像素與百分比的對比、瀏覽器中 size 屬性的作用、利用 CSS 使得圖片更加流暢等待。更多性能優(yōu)化相關(guān)資料參考這里。

深度思考，升華開發(fā)智慧

Vue.js 現(xiàn)狀盤點與未來規(guī)劃：本文不是一篇教程，而是以時間線敘述的方式來介紹 Vue.js 的創(chuàng)建與發(fā)展，Vue.js 技術(shù)社區(qū)的現(xiàn)狀以及未來 3.0 版本的規(guī)劃。本文首先介紹了 Vue.js 的創(chuàng)建初衷與設(shè)計理念，然后介紹了 Vue.js 目前的各種資源：學(xué)習(xí)資料、周報、論壇、社區(qū)等等，還有 Vue.js 相關(guān)的 Weex 這樣的原生擴展。最后本文還討論了 2.0 版本中對于測試套件、TypeScript 支持、ESLint 優(yōu)化等提升，以及 3.0 版本中對核心的響應(yīng)式機制、對于舊版本瀏覽器的支持等規(guī)劃。更多 Vue.js 相關(guān)資料查看這里。

V8 引擎中針對 ES2015 Proxy 進行的優(yōu)化：Proxy 是 ES2015 的重要組成部分，其也被逐步地應(yīng)用到眾多的項目或者庫中，譬如 jsdom、Comlink RPC 等；近日來 V8 團隊也在致力于提升 Proxy 在 V8 中的性能表現(xiàn)，本文主要分享了 V8 中 Proxy 的性能提升范式，也有助于開發(fā)者了解 Proxy 的實現(xiàn)原理。本文首先分析了老版本的 Proxy 實現(xiàn)原理與工作機制，然后討論了優(yōu)化的解決方案以及現(xiàn)實環(huán)境下的性能對比；更多 V8 相關(guān)資料查看這里。

圖片優(yōu)化中的必知必會：截止 2017 年，圖片仍然是網(wǎng)絡(luò)帶寬最大的占用者，參考 HTTP Archive 的統(tǒng)計數(shù)據(jù)，所有抓取的網(wǎng)頁數(shù)據(jù)中有超過 60% 的流量是 JPEG、PNG 以及 GIF 等圖片資源；Addy Osmani 則在本書中非常詳細(xì)地闡述了圖片壓縮中必知必會的知識。本書首先拋出了觀點：所有的圖片都應(yīng)該進行合適地壓縮，所有的壓縮都應(yīng)當(dāng)是自動化地進行,接下來本書依次介紹了如何判斷圖片是否需要壓縮、如何選擇合適的圖片格式、JPEG 的格式介紹與壓縮技巧、WebP 介紹與瀏覽器的支持情況、SVG 壓縮技巧、避免重復(fù)壓縮、雪碧圖、緩存、預(yù)加載等等內(nèi)容；更多性能優(yōu)化相關(guān)資料參考這里。

大型代碼庫遷移到 React 16 過程中學(xué)到的知識：在 Facebook 正式發(fā)布了 React 16.0 版本之后，新的 Fiber 渲染流帶來了更多的性能提升；本文則是來自 Discord 的工程師分享的它們將原有應(yīng)用升級到 React 16.0 版本的經(jīng)驗。本文首先分析了新版本中帶來的譬如 ErrorBoundary 等一系列的特性變化，分享了 Discord 內(nèi)部關(guān)于是否有必要升級的討論；然后介紹了利用 jscodeshift 來修正 PropTypes、如何安全移除原有內(nèi)部 API 的使用、如何升級依賴，以及 React Native 中需要進行的升級工作等內(nèi)容。更多 React 相關(guān)資料查看這里。

樂于分享，共推前端發(fā)展

Vuera: Vuera 是同時兼容 React 與 Vue.js 組件的集成框架，它允許開發(fā)者在 React 中引入 Vue.js 組件，或者在 Vue.js 中引入 React 組件。Vuera 算是非常不錯的實驗性嘗試，不過其具體的性能表現(xiàn)如何還有待觀察。

Nest: Nest 是基于 TypeScript 的用于構(gòu)建高性能、可擴展的 Node.js 應(yīng)用的框架，其同時整合了面向?qū)ο缶幊?OOP 與函數(shù)式編程 FP 以及函數(shù)響應(yīng)式編程 FRP 優(yōu)秀理念。Nest 提供了類似于 Angular、Express 這樣著名框架的接口，內(nèi)置了 WebSocket、響應(yīng)式微服務(wù)支持、管道等多種功能特性。

Sentineljs: SentinelJS 是輕量級的，允許通過 CSS 選擇器設(shè)置監(jiān)聽目標(biāo)，并且動態(tài)監(jiān)測新 DOM 節(jié)點創(chuàng)建的庫；它能夠在監(jiān)控到新的 DOM 節(jié)點創(chuàng)建完畢之后自動調(diào)用回調(diào)函數(shù)。SentinelJS 相較于其他解決方案，使用了動態(tài)定義的 CSS Animation 規(guī)則中的 animationstart 事件來監(jiān)聽某個元素是否存在，能夠獲得比 Mutation Observer 更好地性能表現(xiàn)。

欲修煉成架構(gòu)師，必先……：本文是互聯(lián)網(wǎng)老兵陳美珍（Frank）分享的其對于架構(gòu)師的看法與理解，以及成為架構(gòu)師所需要各方面能力的討論。作者首先分析了什么是架構(gòu)師以及架構(gòu)師在團隊中的定位，然后討論了架構(gòu)師與傳統(tǒng)領(lǐng)域?qū)＜业漠愅?，最后分享了其認(rèn)為架構(gòu)師應(yīng)該具備的各項能力，從基礎(chǔ)的邏輯、抽象、想象，到空杯、好奇、實踐的心態(tài)，以及技術(shù)架構(gòu)與組織架構(gòu)等待。

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請關(guān)注「前端之巔」公眾號后回復(fù)“加群”。投稿請發(fā)郵件到 [email protected]，注明“前端之巔投稿”。