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

漸進(jìn)式渲染的優(yōu)點

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

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

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

漸進(jìn)式渲染技術(shù)

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

雖然漸進(jìn)式渲染在網(wǎng)路較慢的時代尤其重要，但由於行動網(wǎng)路的廣泛使用可能不可靠，因此它在當(dāng)今的開發(fā)中仍然有用。以下是一些用於漸進(jìn)式渲染的技術(shù)。

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

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

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

   <img loading="lazy" alt="Opis slike">

• JavaScript 滾動追蹤： 可以使用 JavaScript 來追蹤滾動位置，當(dāng)圖像接近螢?zāi)豢梢姴糠謺r，即可觸發(fā)載入圖像（透過比較圖像的座標(biāo)）具有當(dāng)前滾動位置的圖像）。

2. 可見內(nèi)容優(yōu)先（渲染覆蓋層上方的內(nèi)容）

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

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

3. 非同步 HTML 片段

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

4. 資源的預(yù)先載入與預(yù)取

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

5. 程式碼分割與動態(tài) JavaScript 載入

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

6. CSS 關(guān)鍵路徑（Critical CSS）

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

7. 伺服器端渲染（SSR）與靜態(tài)網(wǎng)站產(chǎn)生（SSG）

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

8. 漸進(jìn)式網(wǎng)路應(yīng)用程式 (PWA)

使用 PWA 技術(shù)，即使用戶不在線上也可以載入和存取應(yīng)用程序，從而減少網(wǎng)路負(fù)載，即使在網(wǎng)路連線較差的情況下也能快速載入內(nèi)容。

結(jié)論

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

以上是漸進(jìn)式渲染：提高內(nèi)容顯示的效能的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！