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

新聞熱點

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

• iOS 11.3 與 macOS 10.13.4 即將包含 Service Workers: 本周，Safari Technology Preview 48 版本發(fā)布，其引入了包括密碼自動填充機制變更、啟用 Storage Access API 等一系列特性。更值得一提的是，這也意味著 iOS 11.3 與 macOS 10.13.4 即將包含 Service Workers，從而允許開發(fā)者利用后臺腳本提供更強大的可離線使用的 Web 應(yīng)用；此外，iOS 11.3 還允許將 Web Apps 添加到屏幕桌面，并且支持 Manifest 文件，更多 PWA 相關(guān)資料參考這里。
• Parcel v1.5.0 發(fā)布: 雖然發(fā)布不久，但是 Parcel 已然在 Github 上獲取了超 17000 的點贊，并且在 npm 上有超百萬的下載量與數(shù)十位來自各地的貢獻(xiàn)者。Parcel v1.5.0 是發(fā)布以來的重量級更新，其引入了 JavaScript Source Map，WebAssembly 支持，Rust 與 WebAssembly 轉(zhuǎn)換的支持，配置文件緩存失效，.env 文件等特性，并且進(jìn)一步優(yōu)化了小型項目的編譯效率。
• Expo SDK v25.0.0 發(fā)布: 本周發(fā)布的 Expo SDK v25.0.0 基于最近的 React Native 0.52 版本，其帶來了如下新特性：支持在獨立應(yīng)用中打包字體、視頻與音頻資源；優(yōu)化發(fā)布通道，允許回滾更新，交叉發(fā)布，查看歷史等；為 AWS Cognito 提供了開箱即用的支持。除此之外，該版本還優(yōu)化了 Calendar、MailComposer、GLView 等一系列接口與擴展。
• Bootstrap 4: 盡管等待了多年，但是 Bootstrap 4 最終還是發(fā)布了；正式版本與上一個 Beta 版本相比未有重大變化，主要著眼于部分錯誤修復(fù)與提升。本版本中優(yōu)化了打印樣式與工具類，添加了額外的邊輔助函數(shù)，更新了 $spacers 與 $sizes 映射，并且修改了主題文檔等。

開發(fā)教程

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

• webpack 4 beta? 嘗鮮: 本周，webpack 4.0.0-beta.0 發(fā)布，本文即是對于 Webpack 4 的特性與使用進(jìn)行簡要介紹。Webpack 4 為我們帶來了如下特性：多場景下更好的性能提升，更好的默認(rèn)配置，支持 package.json 中的 sideEffects 配置，更好的 JSON Tree Shaking 支持，更新到 UglifyJS2，更多的類型支持，WebAssembly 支持，取消 CommonsChunkPlugin 替換為默認(rèn)優(yōu)化配置。更多 Webpack 相關(guān)資料參考這里。
• 有趣的 JavaScript Proxies 用法: JavaScript 中還有很多尚未廣泛使用的新特性，JavaScript proxies 可能就是其中之一，它能夠在運行時復(fù)寫或者攔截某個對象的屬性以及方法。本文中，作者使用 Proxy 完成了幾個有趣的小功能：僅有二十行代碼的 API SDK，以可讀性更好的方式查詢數(shù)據(jù)屬性值，監(jiān)控異步函數(shù)調(diào)用等。更多 JavaScript 學(xué)習(xí)參閱現(xiàn)代 JavaScript 開發(fā)基礎(chǔ)。
• 一些有趣的 ECMAScript 2017 尚未接納的提案: 隨著 Polyfills 與轉(zhuǎn)換器的流行，很多還處于早期的提案在完成之前就在開發(fā)者之間獲得了極大的歡迎，本文即是對 ECMAScript 2017 尚未接納的提案中一些有趣的進(jìn)行分享。作者首先討論了 ECMAScript 提案的五個進(jìn)程，然后討論了 Asynchronous Iteration, Class Improvements, Class Decorators, Import Function, Observables, Do Expression, Optional Chaining 等特性。更多 JavaScript 學(xué)習(xí)參閱現(xiàn)代 JavaScript 開發(fā)基礎(chǔ)。

工程實踐

立足實踐，提示實際水平

• 利用 Windowing 創(chuàng)建高效的 React 視圖: 本文是 bvaughn 討論 React 性能、搜索與應(yīng)用架構(gòu)相關(guān)演講上的 Presentation，他著眼于到底是什么拖慢了 React 應(yīng)用性能，并且分享了如何解決問題以及學(xué)到的經(jīng)驗。值得一提的是，他討論了很多關(guān)于 Windowing 工作原理，以及如何僅創(chuàng)建那些用戶可見數(shù)據(jù)的實踐；更多 React 教程參閱 React 與前端工程化實踐。
• SPA 技術(shù)選型時的考量: 本文作者討論了他在對于網(wǎng)頁的技術(shù)選型中，是否應(yīng)該采用 SPA 方案的考量，需要注意的是，本文帶有了較多的主觀態(tài)度，請批判性地看待。作者提出的考量點包括：速度與性能，高開發(fā)成本，不穩(wěn)定性，不易長期維護(hù)，低安全性，重造輪子，社交媒介屬性，低可訪問性，對于內(nèi)存的浪費等。 更多 Web 架構(gòu)相關(guān)資料參考這里。
• 基于 IntersectionObserver 進(jìn)行資源延遲加載: 本文中，我們將會討論頁面滾動交互里經(jīng)常涉及到的資源懶加載，不僅僅是圖片，而是基于 IntersectionObserver 的任何資源懶加載。本文也會討論如何根據(jù)元素的可見性來判斷是否觸發(fā)某個函數(shù)，更多 Web 性能優(yōu)化相關(guān)內(nèi)容參考 Web 開發(fā)基礎(chǔ)與工程實踐。

深度閱讀

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

• why is setState asynchronous?: MobX 的作者，mweststrate，近日提了某個 Issue 討論為何 setState 需要設(shè)置為異步。我們耳熟能詳?shù)脑蚴?異步的 setState 用于進(jìn)行異步渲染，并且確保 state 對象是反饋了那些被渲染好的狀態(tài)。而 Gaearon 也澄清了這個問題，異步的 setState 主要是為了保證內(nèi)部一致性，并且為后續(xù)的并發(fā)更新打下基礎(chǔ)。更多 React 教程參閱 React 與前端工程化實踐。
• JavaScript 工作原理系列：Web Workers 淺析與典型的使用場景: 本文是 How JavaScript Works 系列文章的第七篇，主要討論了 Workers 的類型，它們的特性與作用，以及它們在不同的場景下的優(yōu)勢與不足。眾所周知的是，異步代碼以及 Event Loop 機制能夠幫助緩解 JavaScript 單線程的不足；而 Web Worker 則是能夠創(chuàng)建輕量級的、瀏覽器內(nèi)線程，從而運行那些并不會阻塞 Event Loop 的代碼。Web Worker 典型的使用場景包括了 Ray tracing，數(shù)據(jù)加解密，數(shù)據(jù)預(yù)抓取，Progressive Web Apps 以及拼寫檢查等等；更多 Web Worker 相關(guān)資料參考這里。
• Firefox 58: The Quantum Era Continues: 對于 Mozilla 而言，2017 年是個非常有意義里程碑，正式發(fā)布了 Firefox Quantum，通過徹底重寫的方式極大地提升與優(yōu)化了 Firefox 的性能與使用體驗。本文即是對于 Firefox 58 版本正式發(fā)布時，其帶來的新特性進(jìn)行解讀：非主線程渲染、后臺 Tab 限流、WebAssembly 流式編譯器、CSS 字體呈現(xiàn)、新的 Promise 特性等，更多 Firefox 59 的規(guī)劃可以查看這里。

開源項目

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

• Rejoiner: Rejoiner 是由 Google 開源的，能夠基于 gRPC 或者其他的 Protobuf 資源自動生成統(tǒng)一 GraphQL Schema 的工具。它致力于靈活化 GraphQL 的定義與交互，方便多數(shù)據(jù)源連接。
• CSS Gridish: CSS Gridish 能夠基于產(chǎn)品的網(wǎng)格設(shè)計，自動生成多個資源文件：包含畫板與網(wǎng)格布局設(shè)計的 Sketch 文件，包含了 Flexbox 兼容的 CSS/SCSS CSS Grid 代碼，能夠用于監(jiān)測網(wǎng)頁布局的 Chrome 插件。需要注意的是，該工具并不致力于輔助構(gòu)建網(wǎng)格，而是幫你自動化地生成產(chǎn)品開發(fā)全流程中需要的資源文件，更多信息查閱這里。
• Greenlet: Greenlet 能夠?qū)惒胶瘮?shù)移入獨立線程中，可以看做 workerize 函數(shù)的單函數(shù)簡化版。不過需要注意的是，Greenlet 僅支持純函數(shù)，其會在獨立的作用域中運行這些函數(shù)。
• Purgecss: 當(dāng)我們開發(fā)網(wǎng)頁時，往往會使用 Bootstrap，Materializecss 以及 Foundation 這樣的 CSS 庫；不過實際上我們僅會使用其中的部分樣式，其余的樣式對于當(dāng)前界面而言都可以算作冗余樣式。Purgecss 即可以幫助我們清除界面上的無用樣式，它能夠自動分析輸入的 HTML 文件與 CSS 樣式，并且進(jìn)行選擇器匹配，最終移除無用的 CSS 代碼。

巔峰人生

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

前端之巔

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

總結(jié)

以上是生活随笔為你收集整理的前端每周清单第 49 期：Webpack 4 Beta 尝鲜，React Windowing 与 setState 分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。