使用者會注意到網站和應用程式是否運作不順暢，因此最佳化轉譯效能至關重要！
現今的網路使用者期望造訪的網頁能提供互動和流暢體驗，因此您需要投入更多時間和心力。網頁不只要快速載入，在整個生命週期中，也應迅速回應使用者輸入內容。事實上，Interaction to Next Paint (INP) 指標衡量的正是這方面的使用者體驗。INP 良好代表網頁能持續可靠地回應使用者需求。
雖然網頁反應靈敏的主要因素，在於您為回應使用者互動而執行的 JavaScript 數量，但使用者預期的是使用者介面的視覺變化。使用者介面的視覺變更是多種工作類型的結果，通常統稱為「轉譯」，這項工作必須盡快完成，才能提供快速可靠的使用者體驗。
如要編寫能快速回應使用者互動的網頁，您必須瞭解瀏覽器如何處理 HTML、JavaScript 和 CSS，並確保您編寫的程式碼以及您加入的其他第三方程式碼，都能盡可能有效率地執行。
裝置刷新率注意事項
目前大多數裝置的螢幕更新率為每秒 60 次。每次重新整理都會產生您看到的視覺輸出內容，通常稱為「影格」。下列影片示範了影格的概念：
雖然裝置螢幕一律會以一致的速率重新整理，但在裝置上執行的應用程式不一定能產生足夠的影格，以符合該重新整理頻率。舉例來說，如果有動畫或轉場效果正在執行，瀏覽器必須配合裝置的刷新率，在每次螢幕重新整理時產生一個影格。
一般螢幕每秒會重新整理 60 次，簡單計算一下，瀏覽器只有 16.66 毫秒的時間來產生每個影格。但實際上，瀏覽器對每個影格都有自己的負擔，因此所有工作都必須在 10 毫秒內完成。如果無法達到這項預算，影格率就會下降，頁面內容也會在畫面上抖動。這種現象通常稱為「卡頓」。
不過，目標會根據您嘗試執行的工作類型而有所不同。對於動畫來說，達到 10 毫秒的門檻至關重要，因為螢幕上的物件會在兩個點之間的一系列影格中內插。如果使用者介面發生不連續的變化 (也就是從一個狀態轉換到另一個狀態，中間沒有任何動作)，建議您在使用者感覺即時的時間範圍內完成這類變化。在這種情況下，100 毫秒是常見的數字，但 INP 指標的「良好」門檻為 200 毫秒以下，以便容納更多功能不同的裝置。
無論您的目標為何，無論是產生動畫所需的多個影格，以避免卡頓，或只是盡快在使用者介面中產生離散的視覺變化，瞭解瀏覽器的像素管道運作方式對您的工作至關重要。
像素管道
網頁程式開發人員需要瞭解並留意五個主要領域。這五個領域是您最能掌控的部分，每個領域都代表像素到螢幕管道中的關鍵點：
- JavaScript：JavaScript 通常用於處理會導致使用者介面視覺變更的工作。例如 jQuery 的
animate函式、排序資料集，或在網頁中新增 DOM 元素。不過，JavaScript 並非觸發視覺變更的必要條件：CSS 動畫、CSS 轉場和 Web Animations API 都能為網頁內容加上動畫效果。 - 樣式計算：根據相符的選取器，找出哪些 CSS 規則適用於哪些 HTML 元素。舉例來說，
.headline是 CSS 選取器的範例，適用於任何class屬性值包含headline類別的 HTML 元素。接著，系統會套用已知規則，並計算每個元素的最終樣式。 - 版面配置：瀏覽器知道哪些規則適用於元素後，就會開始計算網頁的幾何圖形，例如元素占用的空間大小，以及元素在畫面上的顯示位置。網頁的版面配置模型代表一個元素可能會影響其他元素。舉例來說，
<body>元素的寬度通常會影響其子元素在樹狀結構中的尺寸，因此瀏覽器可能需要執行相當複雜的程序。 - 繪製：繪製是指填入像素的程序。這項程序會繪製文字、顏色、圖片、邊框、陰影，以及元素在網頁上的版面配置計算完成後，基本上所有視覺方面的元素。繪圖通常是在多個表面 (通常稱為圖層) 上進行。
- 複合：由於網頁的各部分可能繪製在多個圖層上，因此必須按照正確順序套用至畫面，網頁才能正常顯示。這對重疊的元素尤其重要，因為錯誤可能會導致某個元素不正確地顯示在另一個元素上方。
像素管道的每個部分都有可能在動畫中造成卡頓，或延遲影格繪製，即使是使用者介面的離散視覺變化也一樣。因此，請務必瞭解程式碼會觸發管道的哪些部分，並調查是否能將變更限制在轉譯所需的像素管道部分。
您可能聽過「點陣化」一詞與「繪製」搭配使用。這是因為繪製實際上包含兩項工作：
- 建立繪製呼叫清單。
- 填入像素。
後者稱為「光柵化」，因此只要在開發人員工具中看到繪製記錄，就應視為包含光柵化。在某些架構中，建立繪製呼叫清單和光柵化作業是在不同的執行緒上完成，但這並非開發人員所能控制。
您不一定會在每個影格中觸及管道的每個部分。事實上，當您使用 JavaScript、CSS 或 Web Animations API 進行視覺變更時，管道「通常」會以三種方式呈現特定影格。
1. JS/CSS > 樣式 > 版面配置 > 繪製 > 複合
如果您變更「版面配置」屬性，例如變更元素的幾何圖形 (例如寬度、高度或位置，例如 left 或 top CSS 屬性)，瀏覽器就必須檢查所有其他元素，並「重排」網頁。任何受影響的區域都需要重新繪製，最後再將繪製的元素合成在一起。
2. JS/CSS > 樣式 > 繪製 > 複合
如果您在 CSS 中變更元素的「僅限繪製」屬性 (例如 background-image、color 或 box-shadow 等屬性)，則不需要執行版面配置步驟，即可對網頁進行視覺更新。盡可能省略版面配置步驟，可避免可能耗費大量資源的版面配置工作，否則可能會在產生下一個影格時造成嚴重延遲。
3. JS/CSS > 樣式 > 複合
如果您變更的屬性不需要版面配置或繪製，瀏覽器可以直接跳到合成步驟。在網頁生命週期中，動畫或捲動等高壓力點，這是最便宜且最理想的像素管道。有趣的是，Chromium 會最佳化頁面捲動，盡可能只在合成器執行緒上進行，這表示即使頁面沒有回應，您仍可捲動頁面，並查看先前繪製到畫面上的部分。
網頁效能的藝術在於避免工作，同時盡可能提高任何必要工作的效率。在許多情況下，重點在於與瀏覽器搭配運作，而非與其牴觸。請注意，先前在管道中顯示的工作在運算成本方面有所不同；有些工作本來就比其他工作更昂貴！
現在來深入瞭解管道的不同部分。我們會探討常見問題，以及如何診斷和修正這些問題。
瀏覽器轉譯最佳化
效能對使用者來說很重要，為了打造良好的使用者體驗，網頁程式開發人員必須建構能快速回應使用者互動，且能流暢轉譯的網站。效能專家 Paul Lewis 將協助您消除卡頓，並建立能維持每秒影格數效能的網頁應用程式。完成本課程後，您將掌握分析應用程式所需的工具，並找出轉譯效能不佳的原因。您也會探索瀏覽器的算繪管道，並找出模式，輕鬆建構快速的網站，讓使用者能愉快地使用。