使用者會發現網站和應用程式的運作成效不彰，因此改善轉譯效能是關鍵！
當今網路使用者都希望他們造訪的網頁能與使用者互動， 您就會更費心地專注於當下的時間和精力。 網頁不該只要載入速度快，還要能快速回應使用者輸入的內容 在整個生命週期中事實上，這方面的使用者體驗 就是「與下一個問題的互動 (INP)」指標所評估的精確數據。不錯 INP 是指網頁持續且穩定地回應使用者的 系統會按照資料類型和業務需求 將資料儲存到不同類型的儲存空間
想讓網頁風格更流暢的主要元素 您為了回應使用者互動而執行的 JavaScript，也就是使用者 我們的預期就是使用者介面的視覺變化。對使用者的視覺變化 介面是多種工作類型的結果，通常統稱為 這些工作必須盡快執行，才能順利進行， 讓使用者感覺快速又可靠
如要編寫能夠快速回應使用者互動的網頁，您必須瞭解 瀏覽器如何處理 HTML、JavaScript 和 CSS，並且確保 您編寫的程式碼，以及您加入的任何其他第三方程式碼，都會以 可讓您快速完成工作
裝置刷新率注意事項
目前，大多數裝置都會每秒重新整理畫面 60 次。每次重新整理 會產生視覺輸出內容，通常稱為「影格」。在 以下影片將示範影格的概念：
裝置畫面一律會以固定頻率重新整理 在裝置上運作時，不一定能產生足夠的影格 也就是選擇的重新整理頻率舉例來說，其中有動畫或轉場效果 因此瀏覽器需要與裝置的刷新率一致 才能產生 每次畫面重新整理
鑒於一般螢幕每秒會重新整理 60 次，因此計算一些簡單的數學 會顯示 16.66 毫秒的時間，瀏覽器可以產生每個頁框 事實上，瀏覽器對於每個影格都有自己的負擔 工作必須在 10 毫秒內完成。若您未能 只要達到這個預算，畫面更新率就會下降，網頁內容也會在畫面上互相影響。這個 這種現象通常稱為「卡頓」。
但目標會因工作類型而異。 達到 10 毫秒的門檻對動畫來說非常重要， 畫面上的物件會在 點。對於使用者介面中的獨立變更 狀態從一個狀態移動到另一個狀態，完全不需進行任何動作 我們建議您在「應」立即到 使用者。在這樣的情況下，100 毫秒是表示數量不多的數據 INP 指標的「good」200 毫秒或更短時間 能支援更多不同功能的裝置
無論你的目標為何 - 他們都會產生許多畫面動畫 以免資源浪費，或是在 使用者介面，以便快速瞭解瀏覽器的像素 對工作來說，管道是至關重要的
像素管道
您還必須留意五個主要領域 目前擔任網頁程式開發人員這五項功能是你表現最亮眼的 每個按鈕都代表像素到螢幕管道的一個重點：
- JavaScript：JavaScript 通常用於處理會使
使用者介面的視覺異動例如 jQuery 的
animate函式、排序資料集，或將 DOM 元素新增至頁面。 不過，JavaScript 不一定需要觸發視覺變更，不過：CSS 動畫、CSS 轉場效果和 Web Animations API 都能支援 動畫。 - 樣式計算：這是判定哪些 CSS 規則適用的程序。
系統會根據相符的選取器套用套用至哪些 HTML 元素。例如：
.headline是套用至任何 HTML 元素的 CSS 選取器範例 具有包含headline類別的class屬性值。最低價格： 確定套用規則後 系統就會套用這些規則 元素來計算。 - 版面配置：瀏覽器瞭解哪些規則可套用至元素後
開始計算網頁幾何圖形，例如有多少空間
及其在螢幕中的顯示位置網路的版面配置模型
其中一個元素可能會影響其他元素例如，
<body>的寬度 元素通常會對子元素的尺寸， 所以樹狀結構會很複雜，所以瀏覽器的程序可能相當複雜。 - 繪製：繪製是填滿像素的程序。也就是繪圖 變換文字、色彩、圖片、邊框、陰影，以及所有影像內容 元素大小。 繪圖通常會在多個表面上進行，這些表面通常稱為圖層。
- 複合：網頁的各部分可能繪製在 多個圖層，必須以正確順序套用至畫面 都能正常轉譯這對元素來說尤其重要 否則可能讓某個元素出現 也不正確地水平移動
像素管道的每個部分都代表一個介紹 動畫中的卡頓，或者因獨立視覺而延遲影格繪製時間 使用者介面的變更因此，請務必瞭解 瞭解程式碼會觸發管道的哪些部分，並調查是否可以 只能變更像素管道中所需的部分 必須轉譯圖片
您可能聽過「光柵化」一詞可與「 Paint」合併使用。這個 因為繪畫實際上是兩項工作
- 建立繪製呼叫清單。
- 填入像素。
後者稱為「光柵化」，因此每當您在 開發人員工具，應視為包含光柵化。某些 來建立繪製呼叫和光柵化清單 但執行緒不是由開發人員控管
您不一定每次在畫面中看到管線的各個部分。 事實上，管道「正常」執行到指定特定值的方式 以 JavaScript、CSS 或網頁 Animations API。
1. JS / CSS >樣式 >版面配置 >塗料 >複合材料
如果變更「版面配置」例如變更元素的
幾何圖形，例如寬度、高度或位置 (例如 left 或 top CSS
屬性)，瀏覽器必須檢查所有其他元素並對這個
頁面。所有受影響區域都必須重新上漆，最終繪製內容
元素必須組合在一起。
2. JS / CSS >樣式 >塗料 >複合材料
如果您變更「純油漆」正確屬性 (例如
background-image、color 或 box-shadow 等屬性，也就是版面配置步驟
不需要進行視覺更新。省略版面配置
您的版面配置工作
如果可以的話
否則在產生下一個影格時
會大幅延遲
3. JS / CSS >樣式 >複合材料
如果您變更的屬性「不得」調整版面配置或繪製，瀏覽器 直接跳到撰寫步驟這是最便宜的票價 在像素管線中 為高壓點 網頁的生命週期，例如動畫或捲動頁面趣味小知識：Chromium 最佳化 捲動網頁，導致這只發生在 這表示即使頁面沒有回應 捲動網頁，查看之前在螢幕上繪製的部分。
網站效能是「避免」工作的藝術，同時提高效率 盡可能降低作業成本在許多情況下 與瀏覽器無關這也值得注意的是 管道中的運算成本不同一些 工作通常比其他工作還昂貴！
現在來深入探索管道的不同部分。我們將一探究竟 瞭解如何診斷和修正問題
瀏覽器轉譯最佳化
效能對使用者和網站開發人員而言，是打造優質使用者體驗的關鍵 需要建構可快速回應使用者互動及轉譯內容的網站 效能專家 Paul Lewis 可以幫助您摧毀卡頓， 建立能維持每秒 60 個影格效能的網頁應用程式。你即將離開 這堂課程提供了分析應用程式所需的工具，並找出 並降低轉譯效能此外，您也將探索瀏覽器的轉譯功能 管道並找出模式，讓您能更輕鬆地建構快速網站， 能讓使用者感到愉快。