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

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

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

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

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

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

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

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

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

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

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

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

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

立足實(shí)踐，提示實(shí)際水平

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

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

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

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

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

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

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

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

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

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

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

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

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

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到 editors@cn.infoq.com，注明“前端之巔投稿”。