漸進式渲染：提高內容顯示的效能

漸進式渲染是一組用於提高網頁效能的技術，特別是在向使用者顯示內容的速度方面。頁面的部分內容會逐漸顯示和加載，而不是一次加載整個頁面。目標是盡快顯示內容，從而改善感知載入時間 - 使用者感知頁面正在載入的時間。

---

漸進式渲染的優點

1. 更快的顯示時間 - 使用者更快看到第一個內容，這改善了使用者體驗，尤其是在較慢的網路上。

2. 針對較弱設備的最佳化 - 功能較弱的裝置可以更輕鬆地顯示初始內容而不會出現延遲。

3. SEO 使用 - 搜尋引擎索引最初載入的元素，這有助於更好的頁面排名。

---

漸進式渲染技術

用於漸進式渲染的技術包括影像和其他資源的延遲載入、伺服器端渲染（SSR）和客戶端水合程式碼SPA申請。

雖然漸進式渲染在網路較慢的時代尤其重要，但由於行動網路的廣泛使用可能不可靠，因此它在當今的開發中仍然有用。以下是一些用於漸進式渲染的技術。

1. 圖片延遲載入（Lazy loading）

在這種技術中，頁面上的圖片不會一次全部載入。相反，僅當使用者捲動到圖像所在的頁面部分時才載入圖像。這樣，資源的使用更加經濟，頁面載入速度更快，因為只有最重要的內容首先顯示。

• 現代延遲載入： HTML 現在支援 的 loading="lazy" 屬性elements，它告訴瀏覽器延遲載入頁面可見部分之外的圖片，直到使用者捲動到它們附近。例如：

   <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" loading="lazy" alt="Opis slike">

• JavaScript 滾動追蹤： 可以使用 JavaScript 來追蹤滾動位置，當圖像接近螢幕可見部分時，即可觸發載入圖像（透過比較圖像的座標）具有當前滾動位置的圖像）。

2. 可見內容優先（渲染覆蓋層上方的內容）

「首屏內容」是指無需捲動即可在瀏覽器中立即可見的內容。為了讓頁面盡快顯示這個關鍵內容，只需要載入基礎CSS、初始頁面渲染腳本等必要的資源即可。

最小化資源：載入頁面時，您應該只包含呈現頁面第一部分所需的最少量的 CSS、內容和腳本。其他資源可以使用 defer 腳本或透過監視 DOMContentLoaded 或 load 等事件來延遲，以便在初始顯示後載入其他資源。

3. 非同步 HTML 片段

這種技術允許伺服器將部分 HTML 傳送到瀏覽器，以便立即渲染頁面，而其餘部分則依序載入。這種方法對於內容來自伺服器的動態頁面特別有用 - 首先顯示頁面的一部分，然後再添加其他部分。

4. 資源的預先載入與預取

使用 或 在需要之前載入樣式、腳本或字型等關鍵資源。這使得內容載入速度更快，特別是對於不是立即需要但稍後在頁面上使用的資源。

5. 程式碼分割與動態 JavaScript 載入

將 JavaScript 程式碼分解為更小的部分（區塊），僅在需要時加載，從而減少下載的初始資料量。

6. CSS 關鍵路徑（Critical CSS）

僅隔離載入最重要的CSS用於初始頁面顯示，其餘部分可以非同步載入。這使得視覺內容可以更快地渲染，而頁面的其餘部分在後台加載。

7. 伺服器端渲染（SSR）與靜態網站產生（SSG）

在將頁面的某些部分發送給使用者之前在伺服器上呈現它們。這允許用戶立即查看內容，而無需等待 JavaScript 加載，從而獲得更好的效能和 SEO。

8. 漸進式網路應用程式 (PWA)

使用 PWA 技術，即使用戶不在線上也可以載入和存取應用程序，從而減少網路負載，即使在網路連線較差的情況下也能快速載入內容。

---

結論

漸進式渲染有助於實現更快的內容渲染，從而減少感知載入時間。儘管網路連線速度更快，但由於行動裝置使用的增加和行動網路品質的變化，這些技術仍然有用。透過這種方式，您可以為使用者提供更好的體驗，更快地存取頁面上最重要的資訊。

以上是漸進式渲染：提高內容顯示的效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！