前端每週清單第 42 期：V8 的執行流與優化，Pinterest 的 PWA 實踐

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

新聞熱點

國內國外，前端最新動態

• Rust 默承認以編譯爲 WebAssembly: 隨着 Pull Request 46115: "rustbuild: Enable WebAssembly backend by default" 被合入 master 分支，Rust 如今能夠不依賴於其餘工具而直接將代碼編譯爲 WebAssembly 格式；而 Browserify 也支持在 JavaScript 代碼中直接插入 Rust 代碼，咱們在前一期的清單中也介紹過使用 Rust 開發 Node.js 原生模塊，拭目以待將來 JavaScript 與 Rust 可以更好地協同構建強大的應用。
• Kotlin 1.2 發佈: 本週 Kotlin 1.2 正式發佈，繼續了 Kotlin 走向跨平臺現代應用開發的步伐。Kotlin 1.1 加入了對 JavaScript 的支持，能夠將 Kotlin 代碼編譯爲 JavaScript 而且在瀏覽器中運行。而該版本中，Kotlin 提供了在 JVM 與 JavaScript 之間複用代碼的能力，容許開發者編寫一次業務代碼，而後運行在從服務端，到瀏覽器，到 Android 等跨平臺的應用服務中。
• React 16.2.0 發佈: React 16.2 提高了對於 Fragments 的支持，即容許在某個組件的 render 方法中返回多個子元素。在 React 16 中容許開發者以數組方式返回多個子元素，可是這種寫法卻與標準的 JSX 產生輕微混淆；而 Fragment 能夠看作對於數組的透明封裝，同時其也支持傳入 key 屬性，以在重渲染時進行判斷。除此以外，該版本還爲 React.Children 工具函數添加了實驗性的 Call/Return 類型，修復了 React DOM,React Test Render 中的一系列問題。
• IPV6 要來啦：新華社北京 11 月 26 日電：近日，中共中央辦公廳，國務院辦公廳印發了《推動互聯網協議第六版（IPv6 ）規模部署行動計劃》，併發出通知，要求各地區各部門結合實際認真貫徹落實。下一代互聯網國家工程中心也宣佈由該中心牽頭髮起的 「 雪人計劃 」 已在全球完成 25 臺 IPV6 根服務器架設。其中，中國部署了４臺，打破了過去沒有根服務器的困境。與此同時，下一代互聯網國家工程中心正式宣佈推出 IPv6 公共 DNS：240c::6666 。經過免費提供性能優異的公共 DNS 服務，爲廣大 IPv6 互聯網用戶打造安全 , 穩定 , 高速 , 智能的上網體驗，助力《推動互聯網協議第六版（ IPv6 ）規模部署行動計劃》全面落實。

開發教程

步步爲營，掌握基礎技能

• 使用 Node.js 構建區塊鏈: 本教程將會從零開始介紹如何構建 BrewChain，一個簡單的 Node.js 區塊鏈實現。本文首先會介紹 Block 與 Blockchain 的概念，而後討論如何構建運行在成員機器上的單結點程序，其會監聽建立新塊的廣播消息，而且將其繼續廣播給其餘結點，從而更新整個區塊鏈網絡。BrewChain 還會包含用於管理與監控的 HTTP 服務器，用於與 Brew 事件交互，查看日誌日期等內容。
• 重思：最佳的請求策略，就是沒有請求: 鑑於瀏覽器的併發請求數與網絡帶寬的限制，Web 性能優化的一條策略就是儘可能減小請求的數目；咱們習慣將資源文件打包到少數的包體中。不過隨着 HTTP/2 的普及，其多路複用的特性容許咱們可以更高效地傳遞文件，本文就着重討論了在 HTTP/2 的背景之下是否還應該一味地減小請求數目。本文首先討論了 HTTP/2 的特性，而後討論了 HTTP/1.1 中的打包壓縮，緩存策略等在 HTTP/2 中的實踐技巧變動；更多 Web 性能優化相關資料參考這裏。
• Web 應用中的常見安全問題: 上期清單中筆者推薦了多篇網站應用滲透相關的文章，而本系列文章則是對於常見的 Web 應用安全問題進行介紹與分析。本文首先討論了密碼哈希存放的問題，做者認爲應該使用 BCrypt 來替代 MD5 或者 SHA512 等傳統哈希算法；而後介紹了 XSS 的基本概念與防護手段，最後討論了 Session 存放於安全相關的問題。更多 Web 安全資料索引參考這裏。

工程實踐

立足實踐，提示實際水平

• V8 引擎中的推測優化（Speculative Optimization ）: 本文是對於 V8 的優化編譯器 TurboFan 的底層原理的介紹，但願可以幫助開發者瞭解 V8 是如何經過信息蒐集與 Speculative Optimization，來將 JavaScript 轉化爲高優化的機器碼。本文首先介紹了 V8 引擎的總體架構，以及其執行管道流中的語法樹解析 , 機器碼生成等步驟，而後討論了何謂 Speculative Optimization，及其具體的優化過程；更多 V8 相關講解能夠閱讀現代 JavaScript 開發基礎。
• 來自 Pinterest 的 PWA 性能案例: 本文是 Addy Osmani 大神分享的，Pinterest 將其移動 Web 客戶端進行 PWA 改造的案例；本文主要涵蓋了如何減小 JavaScript 包體尺寸以提升加載速度，與使用 Service Worker 進行網絡彈性恢復等內容。本文 首先對比了改造先後 Pinterest 移動端網站關鍵指標，以及與原生應用的性能對比；而後介紹了 Pinterest 的代碼構成 , 使用的 Webpack 異步分割與優化插件等內容。接下來討論了 React 應用的潛在性能痛點與動畫優化，最後討論瞭如何用 Service Workers 添加緩存功能與離線支持；更多 PWA 的使用案例參考這裏。
• Service Worker 與頁面刷新: PWA 的目標是爲用戶提供接近原生的體驗，可是這也帶來了某個使用場景的不一致性考量：當用戶點擊瀏覽器的刷新按鈕時，網頁自帶的 Service Worker 可能未更新，以致於用戶仍舊瀏覽舊版的網頁。做者在首篇文章中以案例展現了 Service Workers 是如何 「 破壞 」 瀏覽器刷新按鈕的功能，在第二篇文章中則討論瞭如何避免這種不一致性。更多 PWA 實踐能夠閱讀 Web 應用架構與性能調優。

深度閱讀

深度思考，昇華開發智慧

• Rust, Stylo, Servo 與 Firefox 的重生: 數週前 Firefox Quantum 正式發佈，其搭載的 Servo 瀏覽器渲染引擎極大地提高了渲染速度與用戶體驗，本文便是對於 Firefox Quantum 開發過程當中的技術選型進行分享。本文首先分析了現代大型項目開發中的技術考量， C/C++ 因其設計與歷史緣由不可避免地會形成潛在的內存問題；而 Rust 則是現代軟件工業的集成者，它借鑑了 Apple C++ 編譯器後端，參考了數以百計的研究資料，包含了 unsafe 等關鍵字，還提供了便捷的包管理器。筆者接下來還分享了 Stylo 與 Servo 的預研開發過程；更多 Rust 相關資料參考這裏。
• 2017 ThoughtWorks 技術雷達 VOL.17: 技術雷達是 ThoughtWorks 技術顧問委員會（TAB ），基於 Thoughtwork s 的全球技術戰略以及對行業有重大影響的技術趨勢總結而來。本期技術雷達的精彩集錦關注了崛起的中國開源軟件市場 , 容器編排首選 Kubernetes, 成爲新常態的雲技術以及各方對區塊鏈的信任穩步加強；而在前端相關領域，本期技術雷達還討論了 Headless Chrome, Cypress, Flow, Lighthouse, Rendertron, Yarn, CSS Grid Layout,CSS Modules , Jest,Kotlin, CSS-in-JS, Weex 等內容。
• WebAssembly 的應用場景: 本文是 How JavaScript Works 系列文章的第六篇，着眼於介紹 WebAssembly 相關的內容，分析了其相較於 JavaScript 在加載時間 , 執行速度 , 垃圾回收 , 內存使用 , 調試 , 多線程 , 可移植性等方面的優點。本文首先介紹了 V8 引擎的 JavaScript 解析與執行，以及 TurboFan 優化的流程，討論了引入 WebAssembly 的結合點；而後分析了 WebAssembly 內存模型等內容，最後以 SessionStack 中具體的使用案例分析了 WebAssembly 合適替代現有 JavaScript 的情景。更多 WebAssembly 的學習資料參考這裏。

開源項目

樂於分享，共推前端發展

• stacks-cli: Wappalyzer 已是很是不錯的用於分析網站技術構成的 Chrome 插件，不過對於那些喜歡使用命令行程序的開發者，stacks-cli 是個不錯的選擇；stacks-cli 可以識別反饋 CDN,Web 服務器 , 第三方插件 , 界面框架等內容。
• Sampling Heap Profiler: Sampling Heap Profiler 目前仍是實驗性的工具，其可以對於 V8 的堆存儲進行隨機抽樣，來幫助開發者發現究竟是什麼對象佔據了大量的內存。它一樣會追蹤棧上某個指定對象的內容，從而瞭解對象的存活性與對應的依賴路徑。
• Joplin: Joplin 是免費 , 開源的筆記與待辦事項類應用，其提供了 Windows,macOS , Linux,Android 以及 iOS 等不一樣平臺的客戶端，從界面應用程序到命令行程序皆有涉及。Joplin 使用了 React Native 開發移動端應用，使用了 Electron 開發桌面端應用，其源代碼仍是很值得借鑑閱讀；其使用了 MIT 協議，也方便進行二次開發。
• Reactopt: Reactopt 是用於檢測 React 應用中，沒必要要的重渲染的命令行工具，其能夠看作 react-addons-perf 的替代工具。在啓動 Reactopt 以後，腳本會自動地在瀏覽器中打開應用；開發者能夠經過輸入 done 來結束檢測，Reactopt 會反饋那些觸發沒必要要的重渲染的事件，而且提示哪些組件可以經過 shouldComponentUpdate 來優化性能。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆 「 加羣 」。投稿請發郵件到 editors@cn.infoq.com，註明 「 前端之巔投稿 」。