轉譯效能

使用者會注意到網站和應用程式是否運作不順暢,因此改善轉譯效能至關重要!

Paul Lewis

現今網路的使用者都希望造訪的網頁能夠流暢互動且流暢,因此您需要更多時間與精力。網頁不應該只有載入速度快,也要在整個生命週期中迅速回應使用者輸入內容。事實上,這部分使用者體驗恰好是「與下一個顯示的內容互動 (INP)」指標所衡量的。良好的 INP 表示網頁能持續穩定地回應使用者的需求。

讓頁面感覺流暢的主要元件,涉及為了回應使用者互動而執行的 JavaScript 數量,但使用者的期待仍是使用者介面的視覺變化。對使用者介面的視覺變更是由多種工作類型 (通常統稱為「轉譯」) 的結果所導致,且這項工作必須盡快執行,才能讓使用者體驗感覺快速又可靠。

如要編寫可快速回應使用者互動的網頁,您必須瞭解瀏覽器處理 HTML、JavaScript 和 CSS 的方式,並確保您編寫的程式碼 (以及您加入的任何其他第三方程式碼) 都能盡可能有效率地執行。

裝置刷新率的注意事項

使用者用手機與網站互動。
如要打造能回應使用者輸入內容的網站,螢幕的重新整理頻率是重要考量因素。

現今的裝置大多會每秒重新整理 60 次。每次重新整理都會產生您看到的視覺輸出內容,通常稱為「影格」。下方影片將展示影格的概念:

Chrome 開發人員工具效能面板中顯示的頁框。當遊標在靠近頂端的幻燈片上拖曳時,每個影格會以放大的方式顯示在工具提示中,透過行動裝置導覽選單以動畫呈現「開啟」狀態。

雖然裝置螢幕的重新整理頻率一律固定,但在裝置上執行的應用程式不一定能產生足夠的影格,以符合刷新率。舉例來說,如果有正在執行的動畫或轉場效果,瀏覽器就必須配合裝置的刷新率,在每次畫面重新整理時產生一個影格。

一般螢幕每秒重新整理 60 次,因此有一些簡易的數學運算結果,會讓瀏覽器產生每個影格 16.66 毫秒。事實上,瀏覽器對每個影格都有自己的負擔,因此工作必須在 10 毫秒內完成。如果無法達到這個預算,畫面更新率會下降,網頁內容也會幹擾到螢幕上。這種現象通常稱為「卡頓」

然而,您的目標會隨著嘗試執行的工作類型而改變。對於動畫來說,達到 10 毫秒的門檻是非常重要的,因為這樣畫面上的物件會插入畫面上的一系列物件在兩點之間的一系列頁框中插入。如要在使用者介面中啟動離散變更 (之間不會有任何動作),建議您在「需要」向使用者顯示的時間範圍內達成這類變更。在這種情況下,100 毫秒是使用者引用的數字,但 INP 指標的「良好」門檻為 200 毫秒或更低,以便容納更多具有不同功能、更廣泛的裝置。

無論您的目標為何 (例如產生大量動畫所需的影格來避免卡頓),或是盡快在使用者介面中呈現不同的視覺變化,就必須瞭解瀏覽器的像素管道的運作方式對您而言至關重要。

像素管道

身為網頁程式開發人員,您需要瞭解並留意五個主要領域。這五個區域是您最能控制的區塊,每個區域都代表螢幕像素間管道中的一個關鍵點:

完整的像素管道,包含五個步驟:JavaScript、樣式、版面配置、繪製和複合。
完整像素管道,如圖所示。
  • JavaScript:JavaScript 通常用於處理會導致使用者介面出現視覺變化的工作。舉例來說,這可以是 jQuery 的 animate 函式、排序資料集,或是在頁面中加入 DOM 元素。不過,JavaScript 並非觸發視覺變更的必要性,但 CSS 動畫CSS 轉場效果Web Animation API 可以使用為網頁內容建立動畫效果。
  • 樣式計算:這套程序能夠根據相符的選取器,確認哪些 HTML 元素適用於哪些 HTML 元素。舉例來說,.headline 是 CSS 選取器範例,只要 HTML 元素具有 class 屬性值包含 headline 類別,就會套用至該元素。因此,一旦知道規則後,系統就會套用這些規則,並計算每個元素的最終樣式。
  • 版面配置:瀏覽器知道哪些規則可套用至元素後,就可以開始計算網頁的幾何圖形,例如所佔的空間數量,以及元素在螢幕上的顯示位置。網路的版面配置模型 代表一個元素會影響其他元素舉例來說,<body> 元素的寬度通常會影響子項元素的尺寸,一路到樹狀結構的上下,因此瀏覽器程序可能會相當複雜。
  • 繪製:繪製是指填滿像素的程序。這包括繪製文字、顏色、圖片、框線和陰影,以及本質上所有元素在系統計算出網頁版面配置之後的視覺元素。繪圖通常會使用多個表面進行,通常稱為圖層。
  • 複合:由於頁面的某些部分可能會繪製在多個圖層上,因此這些部分需要以正確的順序套用至螢幕,才能讓頁面正常轉譯。這點對重疊的元素特別重要,因為錯誤可能會導致某個元素意外顯示在另一個元素上方。

這些像素管道的各個部分都代表有機會在動畫中導入卡頓,或是為了讓使用者介面的視覺呈現變更而延遲影格繪製作業。因此,請務必瞭解程式碼會觸發的管道的哪些部分,並調查您是否只能將變更限制在轉譯像素管道所需的部分。

您可能聽過「光柵化」一詞搭配「油漆」。這是因為繪畫其實有兩個工作:

  1. 建立繪製呼叫清單。
  2. 填入像素。

後者稱為「光柵化」,因此每次開發人員工具中顯示繪製記錄時,都應視為包括光柵化。在某些架構中,建立繪製呼叫和光柵化清單會在不同的執行緒上完成,但這並非開發人員所控管。

您在每個影格中不一定會觸及管道的所有部分。事實上,當您使用 JavaScript、CSS 或 Web Animation API 變更視覺元素時,管道有三種方式「通常」用於特定影格。

1. JS / CSS > 樣式 > 版面配置 > 繪製 > 複合

完整的像素管線,未省略任何步驟。

如果您變更「版面配置」屬性 (例如會變更元素幾何圖形 (例如寬度、高度或位置) 的屬性 (例如 lefttop CSS 屬性),瀏覽器就必須檢查所有其他元素,並「重排」頁面。任何受影響的區域都必須重新繪製,而最終的繪製元素也必須一起合成。

2. JS / CSS > 樣式 > 塗料 > 複合

省略版面配置步驟的像素管道。

如果您變更了 CSS 中元素 (例如 background-imagecolorbox-shadow 等屬性) 的「僅限繪製」屬性,則不需要在版面配置步驟中提交網頁的視覺更新。在可能的情況下,省略版面配置步驟,就可以避免版面配置作業耗用的資源,以免在產生下一個影格時造成大幅延遲。

3. JS / CSS > 樣式 > 複合

顯示版面配置和繪製步驟的像素管線。

如果您變更的屬性「不」需要版面配置或繪製,瀏覽器可直接跳到合成步驟。針對頁面生命週期 (例如動畫或捲動) 中高壓力點,這是執行像素管道最便宜且最好用的路徑。趣味小知識:Chromium 會對網頁捲動作業進行最佳化處理,讓網頁只在合成執行緒會盡可能發生。也就是說,即使網頁沒有回應,您還是可以捲動頁面並查看先前繪製到畫面上的部分內容。

網頁效能是「避免」工作的藝術,同時盡可能提高任何必要工作的效率。在多數情況下,重點在於瀏覽器運作,而不是反對瀏覽器。請特別注意,先前管道中顯示的工作在運算成本方面有所不同;有些工作本身作業的成本通常高於其他工作!

現在來深入瞭解管道的各個部分。我們將探討常見問題以及診斷及修正方法。

瀏覽器轉譯最佳化

Udacity 課程螢幕截圖

效能對於使用者至關重要;如要打造良好的使用者體驗,網頁程式開發人員必須建立可快速回應使用者互動並順暢轉譯的網站。效能專家 Paul Lewis 可協助您刪除卡頓,並建立能夠維持每秒 60 個影格效能的網頁應用程式。在本課程中,您將瞭解剖析應用程式所需的工具,並找出轉譯效能欠佳的原因。此外,您也將探索瀏覽器的轉譯管道,並發掘各種模式,如此即可更輕鬆地建構速度飛快的網站,讓使用者覺得愉快。

這項免費課程由 Udacity 提供,你隨時都可以參加