如果網站和應用程式運作不佳，使用者會察覺到，因此最佳化轉譯效能至關重要！
當今網站使用者期待網頁能提供流暢的互動體驗，因此您需要將更多時間和心力投入這方面。網頁不應只載入快速，還應在整個生命週期中快速回應使用者輸入內容。事實上，Interaction to Next Paint (INP) 指標正是用來評估這類使用者體驗。良好的 INP 代表網頁能持續且可靠地回應使用者需求。
雖然讓網頁運作順暢的主要因素，是您在回應使用者互動時執行的 JavaScript 量，但使用者期待的是使用者介面的視覺變化。使用者介面的視覺變更是多種工作結果，通常統稱為「算繪」，且這項工作必須盡可能快速完成，才能讓使用者體驗快速且可靠。
如要編寫可快速回應使用者互動的網頁，您必須瞭解瀏覽器如何處理 HTML、JavaScript 和 CSS，並確保您編寫的程式碼 (以及所包含的任何其他第三方程式碼) 能盡可能高效執行。
關於裝置刷新率的注意事項
目前大多數裝置的螢幕刷新率為每秒 60 次。每次重新整理都會產生您看到的視覺輸出內容，通常稱為「影格」。在以下影片中，我們會示範影格概念：
雖然裝置螢幕會以一致的速率刷新，但在裝置上執行的應用程式不一定能產生足夠的影格，以符合該刷新率。舉例來說，如果有動畫或轉場效果正在執行，瀏覽器就必須與裝置的螢幕更新率相符，才能在每次螢幕更新時產生一個影格。
由於一般螢幕每秒會刷新 60 次，因此經過快速計算後，瀏覽器有 16.66 毫秒的時間產生每個影格。但實際上，瀏覽器會為每個影格保留額外的空間，因此所有工作都必須在 10 毫秒內完成。如果未達到這個預算，影格速率就會降低，網頁內容在畫面上會出現抖動。這種現象通常稱為「jank」。
不過，目標會因您要執行的工作類型而異。對於動畫而言，達到 10 毫秒的閾值至關重要，因為系統會在兩個點之間的一系列影格內，對螢幕上的物件進行內插。在使用者介面中進行個別變更 (也就是從一個狀態轉換到另一個狀態，中間沒有任何動作) 時，建議您在使用者感覺瞬間的時間範圍內完成這類變更。在這種情況下，100 毫秒是經常引用的數字，但 INP 指標的「良好」門檻為 200 毫秒以下，以便支援更多不同功能的裝置。
無論您的目標為何，無論是為了避免卡頓而產生動畫所需的大量影格，或是只是為了盡快在使用者介面中產生獨立的視覺變更，瞭解瀏覽器的像素管道運作方式對您的工作至關重要。
像素管道
在擔任網頁設計師時，您需要瞭解並留意五大主要領域。這五個區域是您最能控制的區域，每個區域都代表像素到螢幕管道的關鍵點：
- JavaScript：JavaScript 通常用於處理會導致使用者介面視覺變更的工作。舉例來說，這可能是 jQuery 的
animate函式、排序資料集，或是在網頁中新增 DOM 元素。不過，觸發視覺變更不一定需要使用 JavaScript：CSS 動畫、CSS 轉場和 Web Animations API 都能為網頁內容製作動畫。 - 樣式計算：這個程序會根據相符的選取器，找出要套用至哪些 HTML 元素的 CSS 規則。舉例來說，
.headline是 CSS 選取器的範例，可套用至任何 HTML 元素，且該元素的class屬性值含有headline類別。一旦瞭解規則，系統就會套用規則，並計算每個元素的最終樣式。 - 版面配置：瀏覽器知道要套用哪些規則後，即可開始計算網頁的幾何圖形，例如元素占用的空間大小，以及元素在畫面上的位置。網頁的版面配置模型表示一個元素可能會影響其他元素。舉例來說，
<body>元素的寬度通常會影響樹狀結構中上下所有子元素的尺寸，因此瀏覽器可能會遇到相當複雜的程序。 - 繪圖：繪圖是填入像素的過程。這項作業會在計算網頁版面配置後，繪製文字、顏色、圖片、邊框、陰影，以及基本上所有元素的視覺面向。繪圖通常會在多個表面上進行，這些表面通常稱為圖層。
- 合成：由於網頁的部分內容可能會繪製到多個圖層，因此需要以正確順序將這些內容套用至螢幕，才能正常顯示網頁。對於重疊的元素來說，這點尤其重要，因為錯誤可能會導致一個元素錯誤地顯示在另一個元素上方。
像素管道的每個部分都可能導致動畫出現卡頓，或延遲繪製影格，即使是使用者介面中的個別視覺變更也是如此。因此，請務必確切瞭解程式碼觸發的管道哪些部分，並調查是否可以將變更限制在像素管道中用於轉譯的部分。
您可能聽過「轉點陣」一詞，與「繪圖」一詞搭配使用。這是因為繪製其實是兩項工作：
- 建立繪圖呼叫清單。
- 填入像素。
後者稱為「轉成點陣圖」，因此每當您在 DevTools 中看到繪圖記錄時，請將其視為包含轉成點陣圖。在某些架構中，建立繪圖呼叫和光柵化清單的工作會在不同的執行緒上執行，但您無法控制這項作業。
您不一定需要在每個影格中觸及管道的每個部分。事實上，當您使用 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 將協助您消除卡頓現象，並建立可維持每秒 60 張影格的網頁應用程式。您將在本課程結束後，掌握剖析應用程式所需的工具，並找出導致轉譯效能不佳的原因。您也會探索瀏覽器的轉譯管道，並找出可讓您更輕鬆建構快速網站的模式，讓使用者覺得使用起來很愉快。