關鍵渲染路徑是瀏覽器將 HTML、CSS 和 JavaScript 轉換為螢幕上的像素所經歷的階段序列：
這些步驟直接影響我們網站的效能，因此如果我們想優化此流程，我們必須考慮一些事情。
瀏覽器透過 HTTP 呼叫接收 HTML。一旦收到它，它就會開始使用該資料來建立 DOM。
這個 DOM 是基於節點建構的，每個 HTML 標籤就相當於一個節點，HTML 中的子元素也會是 DOM 樹中的子節點。
節點數量越多，頁面渲染過程完成所需的時間就越長。
DOM 包含有關頁面內容的所有信息，而 CSSOM 包含有關如何查看該內容的所有資訊。
CSS 處理會阻止渲染。也就是說，在完全處理之前，您無法繼續後續步驟以最終在螢幕上顯示內容。這是因為在 CSS 檔案中，上面幾行所應用的樣式可能會被覆蓋。
一旦我們準備好 DOM 和 CSSOM，它們就會被組合起來形成“渲染樹”，它將包含有關將出現在螢幕上的元素的所有必要資訊。在這棵樹中，諸如所有具有 display: none; 的元素。及其後代或在
標籤中找到的所有內容。在「佈局」階段，定義渲染樹元素的大小及其與其他元素的關係。此過程取決於訪問網頁的螢幕。
如果未指定，元素將預設為父級寬度的 100%，這在某些瀏覽器中是固定寬度。這就是為什麼有必要將該元素包含在
中。來自我們的文件：
<head>
<meta name="viewport" content="width=device-width" />
</head>
每次使用者旋轉其行動裝置時，佈局過程都會再次運行，因為元素及其在螢幕上的排列可能會發生變化。
佈局會影響網站的效能，因為節點數量越多，完成此過程所需的時間就越長。緩慢的佈局過程除了會導致首頁載入速度變慢之外，還會導致一些動畫看起來不太好。
在螢幕上繪製像素是渲染過程的最後一步。這是一個快速的步驟，因為在第一次載入（onload）後，只有那些發生變更的頁面區域才會被重新繪製；瀏覽器已經過最佳化，以避免不必要地執行此程序。
這個過程可以透過不同的方式進行最佳化，但每種情況都是獨一無二的，最後重要的是您將最適合您的專案的措施應用於您的專案。
這個想法是瀏覽器盡快下載對頁面至關重要的資源，例如圖像、樣式、腳本等，因此建議將這些元素盡可能放在
中;.即使它們是腳本或更小的樣式，它們也可以放入內嵌標籤中。
<head>
<meta name="viewport" content="width=device-width" />
</head>
另一方面，如果您正在載入的是一個修改 DOM 某些元素的腳本，那麼我們的想法是在樹及其所有節點建構完畢後載入它。在這些情況下，有必要在 body 標記的末尾載入該腳本。
<head>
<style>
.foo {
color: red;
}
</style>
</head>
延遲載入不修改 DOM 的腳本是減少網站載入時間的一個非常好的做法。這可以透過“async”和“defer”屬性來完成。
將腳本設為非同步會導致該腳本獨立下載和執行，因此不會阻塞渲染過程，且執行時間是任意的。
具有 defer 屬性的腳本將非同步下載，但會尊重它在文件中的位置順序。這也是控制小腳本是否在大腳本之後運行的好方法。
<html>
<body>
<!-- My content -->
<script src="./path/to/my/script.js"></script>
</body>
</html>
在上面的範例中，三個腳本將非同步下載。我們假設最後一個腳本將首先下載，因為它較小。第一個腳本將完全獨立下載和運行，既不等待其他元素準備就緒，也不阻塞渲染過程。無論如何，最後一個腳本將在第二個腳本之後執行，因為 defer 屬性遵循順序。
這個想法是只加載螢幕上需要的樣式，因此可以幫助優化性能的技術是將頁面樣式分成不同的文件，具體取決於它們是否要應用於手機、平板電腦、桌上型電腦等在HTML 中，這些文件將使用媒體查詢加載，從而避免不必要的樣式加載。
<head>
<meta name="viewport" content="width=device-width" />
</head>
雖然看起來很愚蠢，但縮小檔案可以大大幫助提高頁面的效能，因為消除空格、註解等可以減少瀏覽器建立渲染樹所需的工作。
這些只是優化此流程時需要記住的一些事項。考慮到這一點，能夠編寫已經設計用於優化關鍵渲染路徑的高品質程式碼更加可行。
以上是什麼是關鍵渲染路徑以及如何優化它的詳細內容。更多資訊請關注PHP中文網其他相關文章！
