一文了解 Chrome 的十年「加速」歷程

來自專欄 Web前端開發工程師成長營

自十年前 Chrome 瀏覽器首次推出後，速度已經成為 Chrome 的四個核心原則之一。我們一直都想讓 Web 開發者能夠向用戶提供快速的、優秀的上網體驗。在 Chrome 誕生十周年之際，我們認為回顧在這十年中為提高速度所付出的努力，以及我們接下來要進行的嘗試將會是一件非常有趣的事情。

致力於提速的多個瀏覽器組件

V8 是 Chrome 的一個 JavaScript 和 WebAssembly 引擎。隨著網頁使用 JavaScript 腳本數量的快速增長，一個能夠處理這些 JavaScript 腳本的高速引擎成為一個非常重要的基礎。這些年，我們為 V8 研發了一個新的 JavaScript 執行管道(pipeline)，啟用了 Ignition（一個新的解釋器）和 TurboFan（一個優化的編譯器）。這些舉措使得我們關於速度基準測試方面的性能提升了 5%-10%。腳本流(Script streaming)使得我們在 JavaScript 腳本開始下載的時候就在一個後台線程中解析這些 JavaScript 腳本，而這可以將頁面載入速度提高最多 10%。後來加入的後台編譯過程將主線程的編譯時間減少了最多 20%。

我們在 Orinoco 項目上的工作啟用了並發的垃圾回收處理，釋放了主線程的同時也減少了 jank。久而久之，我們也轉而專註於實際的 JavaScript 性能，此舉幫助我們將 React 的運行時性能提升了一倍，同時也將 Vue，Preact 和 Angular 等庫的性能提高了最多 40%。

自最初的 V8 提交上線後，並行的、並發的、增量的垃圾回收減少到了因 jank 引起的垃圾回收的百分之一。我們也實現了 WebAssembly，允許開發者在 Web 上憑藉可以預測的性能來運行非 JavaScript 代碼，同時啟用了 Liftoff 基線編譯器來保證 WASM 應用的快速啟動時間。這些新組件都是近十年用來提升 V8 性能的最新成果，而由此帶來的性能提升超過了 20 倍。

上圖是近幾年 V8 平台關於 Chrome 的一系列已發行版本的得分。V8 平台是舊的 Octane 基準的前身，我們在這張圖表中使用 V8 平台是因為不同於 Octane，V8 平台可以運行在所有的 Chrome 版本中，包括最新的測試版本。

Chrome 在藉助 SPDY, HTTP/2 和 QUIC 協助發展更新網路協議和傳輸層中也扮演了一個關鍵角色。SPDY 被用來解決 HTTP/1.1 的限制並且成為了 HTTP/2 的基礎，而後者現在已經被所有的現代瀏覽器所支持。與此同時，團隊積極地在旨在更好的改善延遲和用戶體驗的 QUIC 上執行迭代，而在 QUIC 背後，有一個積極的工程任務組(ITEF)在努力。QUIC 的效果在像 YouTube 這樣的視頻網站上是顯而易見的，在藉助 QUIC 觀看視頻時，用戶報告的重新緩存率降低了 30%。

接下來是 Chrome 的渲染管道(rendering pipeline)。這個組件用來確保網頁對用戶的響應同時保證每秒 60 幀的展示。為了以 60fps 的速率展示內容，Chrome 必須在 16 毫秒內渲染每一幀。這其中包括了 JavaScript 腳本的執行、樣式、層疊布局、繪製和向用戶屏幕推送像素。在這 16 毫秒內，Chrome 使用的越少，就會留給開發人員更多的時間為用戶帶來更好的體驗效果。我們渲染管道的實現涵蓋了優化如何確認頁面上需要重新繪製的元素以及更好地追蹤視覺上不重疊元素的集合。這個過程使得繪製新的幀圖像到屏幕的時間縮短了最高 35%。

在 2015 年，Chrome 團隊提出了一種名為 RAIL 的以用戶為中心的性能模型。我們在近期對其進行了更新。

關於內存消耗，在 Chrome 的 63 到 66 版本之間，渲染器處理的內存使用率提升了大概 20% 到 30%。我們希望在站點隔離已經就緒的情況下繼續探索基於 RAIL 的構建途徑。Ignition 和 TurboFan 的使用減少了 V8 引擎的整體內存佔用，在 V8 支持的所有設備和平台上內存佔用降低了 5%-10%。今年，有一些調查發現互聯網上 7% 的站點因為內存泄漏受到了影響，而這些問題我們已經完全修復。用來提升 Chrome 瀏覽器速度的組件涵蓋了 DOM，CSS 和諸如 IndexedDB 的存儲系統。如果想學習更多的關於我們在性能提升方面的內容，可以持續關注 Chromium 博客。

賦予 Web 開發者更多測量及優化網頁的能力

了解從哪裡開始改進你的網站可能是一個單調乏味的過程。為了提供幫助，我們探索了幾種工具，用於了解用戶感受到的 lab 信號和真實體驗。多年來，Chrome DevTools 性能面板成為了一種可視化的方式，可直觀地了解網頁在實驗室環境中如何展示的方法。為了繼續降低衝突以尋找網站的性能改善的可能性，我們隨後致力於 Lighthouse —— 一個分析網站質量的工具，為你提供網站性能的明確度量標準以及改善用戶體驗的具體指南。Lighthouse 可以直接從 DevTools Audits 面板中訪問，從命令行運行，或與其他開發產品（如 WebPageTest）集成。

運行在 Chrome DevTools Audits 面板中的 Lighthouse

為了補充 Lighthouse 提供的實驗數據，我們發布了 Chrome 用戶體驗報告來為開發者提供諸如首次內容繪製和首次輸入延遲等關於產品使用人群的真實用戶體驗的數據信息。如今，開發者可以生成他們自己的個性化網站性能報告，同時可以通過 CrUX 儀錶盤關注數百萬來源的處理進度。

我們同時也引入了一些 Web 平台功能來幫助開發者優化他們的站點載入性能。我們藉助資源提示符(Resource Hints) 和 <link ref=preload> 可以讓開發者告知瀏覽器哪些關鍵資源是需要儘早載入的。Chrome 是最早實現了支持諸如應用於壓縮方面的 Brotli、小號網頁字體的 WOFF2 和圖片方面的 WebP 等位元組保存方案(byte-saving)的瀏覽器之一。

我們很高興看到支持上述特徵的瀏覽器數量越來越多。Chrome 實現了 Service Workers，棄用了離線緩存和網路彈性以用於支持重複訪問網頁。我們也很高興看到該功能已經被大多數的現代瀏覽器所支持。

事實上，Google 搜索已經將 Servier Worker 和導航預載入(navigation preload)應用在了重複搜索方面的條件緩存上。而這使得重複訪問的頁面載入耗時性能提升了兩倍。

放眼未來，我們也對關於原生的圖片和內嵌框架的延遲載入等新興標準、諸如 AV1 這樣的圖像格式有助於高效地向用戶提供內容感到興奮。

在你的數據規劃中藉助 Chrome 更好的享受網路

在過去十年，網頁的數量發生了前所未有的增長，但很多用戶是第一次使用網路，上網流量對於他們來說可能花費巨大，或者上網速度非常慢。鑒於此，Chrome 在近些年推出了像 Data saver 這樣的具有數據意識的功能。Data saver 會智能地優化網頁，節省了最多 92% 的上網流量消耗。

我們也在探索新的可以節省數據的新方法。對那些連接速度最慢的用戶來說，我們已經開發出了 Android 平台上的 Chrome，可以讓智能網頁優化器儘早展示必要的內容。這些頁面轉換載入相比於整個頁面載入而言非常快，除此之外，我們也在持續的提高我們的精確性、覆蓋範圍和性能。

我們也在嘗試為數據或者網路受限的用戶提供一些支持和協助。例如，我們向 Chrome 中加入了原生的延遲載入機制，以及為用戶提供在使用大量數據時停止來自頁面的其他請求的選項。

我們才剛剛開始

綜上，這些改變幫助開發者和企業可以儘快地向他們的用戶投放有用的內容。我們知道這仍需要有很多工作要做，在下一個十年我們也將會做出更多關於頁面載入性能的改進和提高。

英文：Chromium Blog 譯文：開源中國

https://www.oschina.net/translate/10-years-of-speed-in-chrome