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

王下邀月熊發表於2017-12-04
前端優化RESTRustWeb

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

新聞熱點

國內國外，前端最新動態

  • 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，註明 “ 前端之巔投稿 ”。

前端之巔微信底圖－5.jpg

相關文章