摘要：盡管等待了多年，但是最終還是發(fā)布了正式版本與上一個(gè)版本相比未有重大變化，主要著眼于部分錯(cuò)誤修復(fù)與提升。能夠?qū)惒胶瘮?shù)移入獨(dú)立線(xiàn)程中，可以看做函數(shù)的單函數(shù)簡(jiǎn)化版。不過(guò)需要注意的是，僅支持純函數(shù)，其會(huì)在獨(dú)立的作用域中運(yùn)行這些函數(shù)。

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

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

iOS 11.3 與 macOS 10.13.4 即將包含 Service Workers: 本周，Safari Technology Preview 48 版本發(fā)布，其引入了包括密碼自動(dòng)填充機(jī)制變更、啟用 Storage Access API 等一系列特性。更值得一提的是，這也意味著 iOS 11.3 與 macOS 10.13.4 即將包含 Service Workers，從而允許開(kāi)發(fā)者利用后臺(tái)腳本提供更強(qiáng)大的可離線(xiàn)使用的 Web 應(yīng)用；此外，iOS 11.3 還允許將 Web Apps 添加到屏幕桌面，并且支持 Manifest 文件，更多 PWA 相關(guān)資料參考這里。

Parcel v1.5.0 發(fā)布: 雖然發(fā)布不久，但是 Parcel 已然在 Github 上獲取了超 17000 的點(diǎn)贊，并且在 npm 上有超百萬(wàn)的下載量與數(shù)十位來(lái)自各地的貢獻(xiàn)者。Parcel v1.5.0 是發(fā)布以來(lái)的重量級(jí)更新，其引入了 JavaScript Source Map，WebAssembly 支持，Rust 與 WebAssembly 轉(zhuǎn)換的支持，配置文件緩存失效，.env 文件等特性，并且進(jìn)一步優(yōu)化了小型項(xiàng)目的編譯效率。

Expo SDK v25.0.0 發(fā)布: 本周發(fā)布的 Expo SDK v25.0.0 基于最近的 React Native 0.52 版本，其帶來(lái)了如下新特性：支持在獨(dú)立應(yīng)用中打包字體、視頻與音頻資源；優(yōu)化發(fā)布通道，允許回滾更新，交叉發(fā)布，查看歷史等；為 AWS Cognito 提供了開(kāi)箱即用的支持。除此之外，該版本還優(yōu)化了 Calendar、MailComposer、GLView 等一系列接口與擴(kuò)展。

Bootstrap 4: 盡管等待了多年，但是 Bootstrap 4 最終還是發(fā)布了；正式版本與上一個(gè) Beta 版本相比未有重大變化，主要著眼于部分錯(cuò)誤修復(fù)與提升。本版本中優(yōu)化了打印樣式與工具類(lèi)，添加了額外的邊輔助函數(shù)，更新了 $spacers 與 $sizes 映射，并且修改了主題文檔等。

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

webpack 4 beta? 嘗鮮: 本周，webpack 4.0.0-beta.0 發(fā)布，本文即是對(duì)于 Webpack 4 的特性與使用進(jìn)行簡(jiǎn)要介紹。Webpack 4 為我們帶來(lái)了如下特性：多場(chǎng)景下更好的性能提升，更好的默認(rèn)配置，支持 package.json 中的 sideEffects 配置，更好的 JSON Tree Shaking 支持，更新到 UglifyJS2，更多的類(lèi)型支持，WebAssembly 支持，取消 CommonsChunkPlugin 替換為默認(rèn)優(yōu)化配置。更多 Webpack 相關(guān)資料參考這里。

有趣的 JavaScript Proxies 用法: JavaScript 中還有很多尚未廣泛使用的新特性，JavaScript proxies 可能就是其中之一，它能夠在運(yùn)行時(shí)復(fù)寫(xiě)或者攔截某個(gè)對(duì)象的屬性以及方法。本文中，作者使用 Proxy 完成了幾個(gè)有趣的小功能：僅有二十行代碼的 API SDK，以可讀性更好的方式查詢(xún)數(shù)據(jù)屬性值，監(jiān)控異步函數(shù)調(diào)用等。更多 JavaScript 學(xué)習(xí)參閱現(xiàn)代 JavaScript 開(kāi)發(fā)基礎(chǔ)。

一些有趣的 ECMAScript 2017 尚未接納的提案: 隨著 Polyfills 與轉(zhuǎn)換器的流行，很多還處于早期的提案在完成之前就在開(kāi)發(fā)者之間獲得了極大的歡迎，本文即是對(duì) ECMAScript 2017 尚未接納的提案中一些有趣的進(jìn)行分享。作者首先討論了 ECMAScript 提案的五個(gè)進(jìn)程，然后討論了 Asynchronous Iteration, Class Improvements, Class Decorators, Import Function, Observables, Do Expression, Optional Chaining 等特性。更多 JavaScript 學(xué)習(xí)參閱現(xiàn)代 JavaScript 開(kāi)發(fā)基礎(chǔ)。

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

利用 Windowing 創(chuàng)建高效的 React 視圖: 本文是 bvaughn 討論 React 性能、搜索與應(yīng)用架構(gòu)相關(guān)演講上的 Presentation，他著眼于到底是什么拖慢了 React 應(yīng)用性能，并且分享了如何解決問(wèn)題以及學(xué)到的經(jīng)驗(yàn)。值得一提的是，他討論了很多關(guān)于 Windowing 工作原理，以及如何僅創(chuàng)建那些用戶(hù)可見(jiàn)數(shù)據(jù)的實(shí)踐；更多 React 教程參閱 React 與前端工程化實(shí)踐。

SPA 技術(shù)選型時(shí)的考量: 本文作者討論了他在對(duì)于網(wǎng)頁(yè)的技術(shù)選型中，是否應(yīng)該采用 SPA 方案的考量，需要注意的是，本文帶有了較多的主觀(guān)態(tài)度，請(qǐng)批判性地看待。作者提出的考量點(diǎn)包括：速度與性能，高開(kāi)發(fā)成本，不穩(wěn)定性，不易長(zhǎng)期維護(hù)，低安全性，重造輪子，社交媒介屬性，低可訪(fǎng)問(wèn)性，對(duì)于內(nèi)存的浪費(fèi)等。 更多 Web 架構(gòu)相關(guān)資料參考這里。

基于 IntersectionObserver 進(jìn)行資源延遲加載: 本文中，我們將會(huì)討論頁(yè)面滾動(dòng)交互里經(jīng)常涉及到的資源懶加載，不僅僅是圖片，而是基于 IntersectionObserver 的任何資源懶加載。本文也會(huì)討論如何根據(jù)元素的可見(jiàn)性來(lái)判斷是否觸發(fā)某個(gè)函數(shù)，更多 Web 性能優(yōu)化相關(guān)內(nèi)容參考 Web 開(kāi)發(fā)基礎(chǔ)與工程實(shí)踐。

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

why is setState asynchronous?: MobX 的作者，mweststrate，近日提了某個(gè) Issue 討論為何 setState 需要設(shè)置為異步。我們耳熟能詳?shù)脑蚴?異步的 setState 用于進(jìn)行異步渲染，并且確保 state 對(duì)象是反饋了那些被渲染好的狀態(tài)。而 Gaearon 也澄清了這個(gè)問(wèn)題，異步的 setState 主要是為了保證內(nèi)部一致性，并且為后續(xù)的并發(fā)更新打下基礎(chǔ)。更多 React 教程參閱 React 與前端工程化實(shí)踐。

JavaScript 工作原理系列：Web Workers 淺析與典型的使用場(chǎng)景: 本文是 How JavaScript Works 系列文章的第七篇，主要討論了 Workers 的類(lèi)型，它們的特性與作用，以及它們?cè)诓煌膱?chǎng)景下的優(yōu)勢(shì)與不足。眾所周知的是，異步代碼以及 Event Loop 機(jī)制能夠幫助緩解 JavaScript 單線(xiàn)程的不足；而 Web Worker 則是能夠創(chuàng)建輕量級(jí)的、瀏覽器內(nèi)線(xiàn)程，從而運(yùn)行那些并不會(huì)阻塞 Event Loop 的代碼。Web Worker 典型的使用場(chǎng)景包括了 Ray tracing，數(shù)據(jù)加解密，數(shù)據(jù)預(yù)抓取，Progressive Web Apps 以及拼寫(xiě)檢查等等；更多 Web Worker 相關(guān)資料參考這里。

Firefox 58: The Quantum Era Continues: 對(duì)于 Mozilla 而言，2017 年是個(gè)非常有意義里程碑，正式發(fā)布了 Firefox Quantum，通過(guò)徹底重寫(xiě)的方式極大地提升與優(yōu)化了 Firefox 的性能與使用體驗(yàn)。本文即是對(duì)于 Firefox 58 版本正式發(fā)布時(shí)，其帶來(lái)的新特性進(jìn)行解讀：非主線(xiàn)程渲染、后臺(tái) Tab 限流、WebAssembly 流式編譯器、CSS 字體呈現(xiàn)、新的 Promise 特性等，更多 Firefox 59 的規(guī)劃可以查看這里。

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

Rejoiner: Rejoiner 是由 Google 開(kāi)源的，能夠基于 gRPC 或者其他的 Protobuf 資源自動(dòng)生成統(tǒng)一 GraphQL Schema 的工具。它致力于靈活化 GraphQL 的定義與交互，方便多數(shù)據(jù)源連接。

CSS Gridish: CSS Gridish 能夠基于產(chǎn)品的網(wǎng)格設(shè)計(jì)，自動(dòng)生成多個(gè)資源文件：包含畫(huà)板與網(wǎng)格布局設(shè)計(jì)的 Sketch 文件，包含了 Flexbox 兼容的 CSS/SCSS CSS Grid 代碼，能夠用于監(jiān)測(cè)網(wǎng)頁(yè)布局的 Chrome 插件。需要注意的是，該工具并不致力于輔助構(gòu)建網(wǎng)格，而是幫你自動(dòng)化地生成產(chǎn)品開(kāi)發(fā)全流程中需要的資源文件，更多信息查閱這里。

Greenlet: Greenlet 能夠?qū)惒胶瘮?shù)移入獨(dú)立線(xiàn)程中，可以看做 workerize 函數(shù)的單函數(shù)簡(jiǎn)化版。不過(guò)需要注意的是，Greenlet 僅支持純函數(shù)，其會(huì)在獨(dú)立的作用域中運(yùn)行這些函數(shù)。

Purgecss: 當(dāng)我們開(kāi)發(fā)網(wǎng)頁(yè)時(shí)，往往會(huì)使用 Bootstrap，Materializecss 以及 Foundation 這樣的 CSS 庫(kù)；不過(guò)實(shí)際上我們僅會(huì)使用其中的部分樣式，其余的樣式對(duì)于當(dāng)前界面而言都可以算作冗余樣式。Purgecss 即可以幫助我們清除界面上的無(wú)用樣式，它能夠自動(dòng)分析輸入的 HTML 文件與 CSS 樣式，并且進(jìn)行選擇器匹配，最終移除無(wú)用的 CSS 代碼。

專(zhuān)訪(fǎng) ECharts 團(tuán)隊(duì)：無(wú) KPI 驅(qū)動(dòng)如何做出成功開(kāi)源項(xiàng)目: 近日，國(guó)內(nèi)知名的數(shù)據(jù)可視化開(kāi)源項(xiàng)目 ECharts 發(fā)布了 4.0 版，InfoQ 編輯對(duì) ECharts 團(tuán)隊(duì)做了一個(gè)采訪(fǎng)，了解團(tuán)隊(duì)的一些近況，對(duì)可視化的看法，以及在開(kāi)源方面的一些經(jīng)驗(yàn)。

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