掌握 Web 效能：了解像素管道

身為 Web 開發人員，特別是對於我們這些專門從事前端開發的開發人員來說，了解瀏覽器的工作原理、Web 上的通訊協定、Web 可訪問性等至關重要。

在這種情況下，我將分享一些需要牢記的事項，以提高我們網站的效能，從而增強用戶體驗。這是關於像素管道的。

什麼是像素管道？

像素管道是一個描述網頁瀏覽器如何將 HTML、CSS 和 JavaScript 轉換為螢幕上顯示的視覺元素的過程

身為 Web 開發人員，您在工作中應該了解和考慮五個主要領域。這五個區域就是您所擁有的，每個區域都代表螢幕像素管道中的關鍵點：

JavaScript：JavaScript 通常用於處理會導致使用者介面發生視覺變化的工作。例如，這可能是 jQuery 的動畫函數、對資料集進行排序或向頁面添加 DOM 元素

樣式計算：這是根據匹配選擇器決定哪些 CSS 規則適用於哪些 HTML 元素的過程。例如，.headline 是 CSS 選擇器的一個範例，它適用於任何具有包含標題類別的 class 屬性值的 HTML 元素。

佈局：一旦瀏覽器知道哪些規則適用於某個元素，它就可以開始計算頁面的幾何形狀，例如元素佔用了多少空間，以及它們在螢幕上出現的位置。

繪畫：繪畫是填充像素的過程。它涉及在計算頁面上的佈局後繪製文字、顏色、圖像、邊框、陰影以及元素的每個視覺方面。

複合：由於頁面的各個部分可能會繪製到多個圖層上，因此需要以正確的順序將它們應用到螢幕，以便頁面按預期呈現。

因此，了解了上述內容，我們就可以了解調整元素大小的動畫的資源成本，這將涉及回到 Layout 過程，然後到 Paint 過程，最後到 Compose 過程。

另一方面，建立涉及更改元素的文字顏色或背景顏色的動畫只需要進入 Paint 過程，然後進入 Compose 過程。

提高網站效能和增強使用者體驗的建議

i) 盡可能避免創造太多動畫。
ii) 如果您想要動畫，請在製作動畫時限制自己的變換和不透明度屬性，因為這些屬性只需要經過 Compose 過程，這是像素管道的最後一步。例如：當使用懸停偽類對按鈕進行動畫處理時，最好使用不透明度而不是更改其背景顏色。
iii) 如果我們想要移動一個元素作為動畫的一部分，最好使用「will-change」或「transform」屬性及其翻譯值。

我這篇文章的來源：
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=es
https://web.dev/articles/rendering-performance

關於瀏覽器渲染優化的免費課程，由Paul Lewis 教授，他是與效能相關的所有領域的專家工程師，也是Lighthouse 的創建者（Google Lighthouse 是一個用於測量網頁品質的開源自動化工具）， Lighthouse 是一個工具Chrome 開發工具：
https://www.udacity.com/course/browser-rendering-optimization--ud860

以上是掌握 Web 效能：了解像素管道的詳細內容。更多資訊請關注PHP中文網其他相關文章！