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

新聞熱點

國內國外，前端最新動態

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

開發教程

步步為營，掌握基礎技能

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

工程實踐

立足實踐，提示實際水平

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

深度閱讀

深度思考，升華開發智慧

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

開源項目

樂于分享，共推前端發展

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

巔峰人生

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

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號后回復 “ 加群 ”。投稿請發郵件到 editors@cn.infoq.com，注明 “ 前端之巔投稿 ”。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。