Chrome渲染管道的效能改進

文 | Google 繪製專家 Chris Harrelson

速度是 Chrome 四大核心原則之一，讓網路開發者可以為使用者提供更快速、更具吸引力的網路體驗。儘管瀏覽器中的許多元件都對整體速度有影響，渲染管道主要負責確保以每秒 60 幀 (fps) 的速度顯示網站，讓使用者感覺很快，響應很靈敏。

過去幾個月來，我們對 Chrome 的渲染管道做出了幾項效能改進，使其能夠更巧妙地處理所要完成的工作。現在，Chrome 可以更智慧地跳過冗餘任務，選擇最優渲染演算法，更好地利用系統硬體，使網站載入更快速，執行更順暢，並且耗電量更低。

為了以 60fps 的速度顯示內容，Chrome 只有 16 毫秒的時間來渲染每幀，這包括執行 JavaScript、樣式、佈局、繪製和將最終畫素推送到使用者螢幕上。在這 16 毫秒的時間預算中，Chrome 佔用的越少，網路開發者就有越多的時間來執行指令碼、載入內容，從而給使用者帶來滿意的體驗。我們最近對渲染管道的改進中有許多側重於降低每幀的工作負載，而不是簡單地提升 Chrome 的原始速度。

例如，當 Chrome 準備將畫素繪製到螢幕上時，它必須先識別頁面上的哪些元素需要重新繪製，哪些可以從前一幀的快取中複製。在頻繁發生 DOM 更改的高動態頁面中，這一效能開銷會迅速疊加。為了簡化這一任務，Chrome 現在會跟蹤為每個元素生成的繪製命令，並可識別視覺上不重疊的子集。如果這些子集當中有一個未作修改，則可直接從快取中複製整個塊，而無需執行任何額外的工作。這一優化最多可將繪製新幀到螢幕上所需的時間縮短 35%。

Chrome 還將畫素分組到圖塊中，從而能夠更輕巧、更快速地更新到螢幕上。之前，Chrome 會重新繪製 DOM 更新修改過的任何圖塊，但只有圖塊中的大部分割槽域需要重新繪製時，這種方法才是最佳方法。如果只有少數畫素髮生更改，則直接從前一幀複製整個圖塊並更新新畫素會更快。現在，Chrome 可以智慧地選擇重新繪製管道，這樣速度更快，最多可將重新繪製圖塊所需的時間縮短 40%。

在此之前，對螢幕的任何更新（例如輸入游標閃爍）都可能需要重新繪製整個圖塊（左圖）。現在，只有少數畫素髮生更改時，Chrome 可以只重新繪製修改過的區域（右圖）。

 除了智慧優化工作負載之外，Chrome 現在還可以根據底層硬體，更好地選擇如何完成其工作。儘管針對視訊和畫布元素進行 GPU 加速已有很長一段時間了，但 Chrome 仍在努力更好地利用 GPU 執行更具挑戰性的渲染任務。現在，在 Android、Mac 和 Windows 上，Chrome 能夠更好地利用 GPU 加速來完成複雜的網站內容渲染。這改善了最新 SVG 和 HTML5 頁面的動畫效能、輸入延遲和滾動流暢性。

衡量速度有許多不同的標準，我們致力於不斷提升 Chrome 的效能，使開發者能夠實現 60fps 的渲染速度，給使用者帶來最佳的體驗。渲染管道只是眾多改進中的一項，我們還準備了許多其他改進。敬請關注，我們將繼續深度優化效能，為所有 Chrome 使用者穩步提升網路速度和響應靈敏度。

推薦閱讀：

Chrome 57 Beta 新特性

在iOS上將Chrome開源！

Google Study Jams活動正式開啟