漸進式渲染 (Progressive Rendering) 指的是一種前端效能最佳化策略，旨在儘快向使用者展示頁面內容，提升使用者感知速度和體驗。它透過逐步載入和渲染頁面元素，避免長時間的空白螢幕或載入動畫，讓使用者能夠儘早開始與頁面互動。
漸進式渲染包含多種技術和策略，主要可以分為以下幾個方面：
-
優先渲染首屏內容 (Above-the-fold): 優先載入和渲染使用者視口內可見的內容，讓使用者儘快看到主要資訊，其餘部分可以延遲載入。這通常涉及到最佳化關鍵渲染路徑，減少阻塞渲染的資源，例如 CSS 和 JavaScript。
-
分塊渲染 (Chunking): 將頁面內容分割成小的塊狀結構，逐步載入和渲染每個塊。這樣即使頁面整體內容較大，使用者也能快速看到一部分內容，並隨著載入的進行逐步完善。
-
懶載入 (Lazy Loading): 對於非首屏或不可見區域的圖片、影片等資源，延遲載入，直到使用者滾動到相應位置或需要顯示時才載入。這可以減少初始載入時間和頻寬消耗。
-
佔位符 (Placeholders): 在內容載入完成之前，使用佔位符填充頁面佈局，例如灰色的圖片框或簡單的文字框。這可以給使用者一個視覺上的預期，避免頁面看起來空蕩蕩的。
-
低質量圖片佔位符 (LQIP - Low Quality Image Placeholder): 先載入一個低質量、小尺寸的圖片作為佔位符，然後逐步載入高解析度的圖片，實現漸進式的影像載入體驗。
-
骨架屏 (Skeleton Screen): 在頁面內容載入完成之前，顯示一個類似頁面結構的灰色框架，模擬頁面佈局和內容，讓使用者對頁面結構有一個初步的感知。
-
流式渲染 (Streaming Rendering)： 服務端逐步返回頁面內容，瀏覽器逐步接收並渲染，而不是等待整個頁面載入完成後才渲染。這對於大型頁面或動態生成的頁面尤為有效。
漸進式渲染的優勢：
- 提升使用者感知速度： 使用者可以更快地看到頁面內容，即使頁面還沒有完全載入完成。
- 改善使用者體驗： 避免長時間的空白螢幕或載入動畫，減少使用者的等待焦慮。
- 提高搜尋引擎排名： 頁面載入速度是搜尋引擎排名的重要因素之一，漸進式渲染可以提升頁面載入速度，從而提高排名。
- 減少頻寬消耗： 透過懶載入和按需載入，可以減少不必要的資源下載，節省頻寬。
實現漸進式渲染的技術：
- 使用 Intersection Observer API 實現懶載入
- 使用
<link rel="preload">預載入關鍵資源 - 使用 HTTP/2 多路複用
- 服務端渲染 (SSR) 和客戶端渲染 (CSR) 結合
- 使用合適的圖片格式和最佳化圖片大小
總之，漸進式渲染是一種重要的前端效能最佳化策略，它透過多種技術和方法，逐步載入和渲染頁面內容，提升使用者感知速度和體驗，是構建高效能 Web 應用的關鍵環節。