什麼是漸進渲染？

---

簡介

您是否曾經測量過您網站的載入速度？如果沒有，網際網路上有很多工具可以測試網站速度。搜尋任何一個並測量它。根據谷歌進行的調查，如果網站載入速度超過 3 秒，則意味著您將損失 32% 的訪客。

因此，如果您採取措施降低網站的載入速度，將會有所幫助，而漸進渲染就出現在這裡，它允許開發人員提高網站的載入速度。

什麼是漸進渲染？

在討論漸進渲染技術之前，讓我們嘗試理解漸進渲染這個詞。因此，漸進意味著像正常進度一樣一個接一個地顯示，您可能在下載或上傳檔案甚至更新移動應用程式時見過。

渲染的含義是在網頁上顯示內容。因此，漸進渲染這個詞的完整含義是逐個顯示網頁的不同元件，而不是將所有內容一起顯示。

以下是漸進渲染的定義。

漸進渲染是一種技術，其中 Web 開發人員將網頁程式碼分解成更小、更易於管理的塊，並逐個顯示所有塊以提高網頁的效能。

漸進渲染是如何工作的？

現在，讓我們瞭解漸進渲染是如何工作的。

如果我們在瀏覽器上渲染普通網頁，它會將網頁的所有內容一起載入，包括 HTML、CSS 和 JavaScript。但在漸進渲染中，開發人員需要將程式碼分解成更小的部分以進行漸進渲染，如上一節所述。

在渲染的第一部分，網站應該載入諸如標題、主體背景或網頁的主要可互動部分之類的元件。之後，網站應該開始載入 CSS 來設定元件的樣式。因此，訪客可以開始與網頁互動。

之後，我們需要載入其餘的 HTML 元件以及 CSS 和 JavaScript 以向程式碼中新增行為。此外，我們應該非同步載入 JavaScript。

每當我們需要在下載或從 API 獲取資料後顯示影像或任何內容時，都應該最後顯示。

實現漸進渲染的不同技術

現在，我們將學習在網站上實現漸進渲染的不同方法。

延遲載入

顧名思義，它會延遲載入網頁的內容。在延遲載入技術中，我們只能在需要時載入網頁的內容。例如，您必須在一個網頁上顯示 100 張圖片；最初，使用者只能看到 10 張圖片，使用者需要滾動網頁才能看到其他圖片。在這種情況下，我們可以最初載入前 10 張圖片，並在使用者滾動網頁時載入其他圖片。

這樣，我們可以使用延遲載入技術來提高網頁效能。

優先考慮網頁內容

漸進渲染的另一種方法是優先考慮所需內容。例如，在載入網頁時，我們可以首先顯示內容的可互動部分，然後載入其他內容。

此外，我們最初可以只渲染所需的 CSS。例如，我們需要從 API 獲取資料，然後我們需要渲染資料。因此，如果我們將所有 CSS 一起渲染，它也會渲染未找到資料的 CSS，我們可以將其渲染在獲取資料之後。

因此，透過這種方式，我們可以最初顯示優先順序高的內容，然後在網頁上顯示其他內容。

為什麼開發人員應該使用漸進渲染？

這裡我們解釋了漸進渲染的一些優勢。

更快的網頁載入速度

漸進渲染的主要好處是它提高了網頁的速度。它將網頁內容分成塊載入，因此使用者在開啟網頁時可以立即開始與網頁互動。

改善使用者體驗

由於漸進渲染提高了網站的載入速度，使用者可以更多地參與網站。它還可以增加網站的訪問量。

改進網站的 SEO

在 SEO 中，網頁速度是重要的功能之一。谷歌的爬蟲會爬取每個頁面並評估網站的內容。如果載入速度慢，爬蟲可能會跳過網頁，如果網頁速度小於 1 秒，它會在競爭對手之間對網站進行排名。

結論

漸進渲染是一種透過以更小的塊或在需要時渲染網頁的 HTML、CSS 和 JavaScript 內容來提高網頁效能的技術。我們還討論了實現漸進渲染的兩種方法以及使用漸進渲染的好處。