預加載、預連接、預取：通過資源提示提高站點性能

現代網絡瀏覽器使用各種不同的技術來提高網站的整體性能 - 從優先考慮最重要的資源並首先獲取它們到猜測用戶接下來將訪問哪個頁面。

但是，您不應該依賴盡可能先進的瀏覽器來做出與您網站性能有關的所有決定。

作為網站所有者，您知道哪些資源最重要以及您網站上的實際用戶旅程是什麼。 為了提高網站的整體性能、感知速度和用戶體驗，您可以利用這些知識來幫助瀏覽器更快地加載您的頁面。

這就是資源提示的來源。

在以下幾行中，我們將了解它們以及如何以最佳方式利用它們的優勢。

讓我們深入了解它。

瀏覽器的工作原理（簡而言之）

為了更好地理解資源提示以及它們適用的地方，讓我們快速了解瀏覽器實際加載內容的方式。

我們可以將瀏覽器加載頁面的整個過程分為三個步驟：

• 建立連接；
• 下載、解析和渲染代碼；
• 使頁面具有交互性；

在第一階段，瀏覽器需要與服務器建立連接才能下載資源。 這包括查找域名並將其解析為 IP 地址、建立與服務器的連接以及加密連接以確保安全。

一切完成後，瀏覽器可以繼續下載和解析信息，構建文檔對像模型 (DOM) 和 CSS 對像模型 (CSSOM)，然後渲染內容。

最後一部分是使頁面具有交互性。 上面提到的所有過程都發生在主線程中。 因此，在瀏覽器的主線程完成解析、渲染和繪製頁面之後，是時候處理延遲的 JavaScript 文件以使頁面可用於滾動、觸摸和其他交互。

簡而言之，這就是每次加載頁面時的幕後過程。

讓我們看看如何通過集成資源提示對每個階段產生積極影響。

資源提示：預取、預連接、預加載

顧名思義，資源提示是告訴瀏覽器應該如何處理特定資源或網頁的提示或指令。 換句話說，這組指令允許您幫助瀏覽器確定需要獲取和呈現的源或資源的優先級。

所有資源提示都使用鏈接元素的rel屬性，您可以在 HTML 文檔的頭部找到該屬性。

在您的網站上集成這些 HTML 代碼片段將允許瀏覽器開始加載所選文件，而不是瀏覽器通過正常的頁面加載過程找到它們。

現在，我們已經掌握了基礎知識，讓我們繼續您在這裡的部分 - 資源提示的概述、它們的好處以及何時使用它們。

預取

link rel=prefetch是一個低優先級的資源提示，它允許瀏覽器獲取以後可能需要的資源並將它們存儲在瀏覽器的緩存中。

因為prefetch設置了非常低的優先級，所以不要將此提示用於高度重要的文件。

一個很好的用例是利用預取來改善後續頁面的加載時間。 例如，您可以在用戶身份驗證期間應用預取指令。 這樣，您可以利用他們輸入憑據所花費的時間來預加載他們接下來將看到的頁面所需的資源。

通過預測訪問者在您網站上的步驟並預取資源，您可以改進諸如首次內容繪製和互動時間等指標。 Netflix 做了一些事情，將他們的互動時間減少了 30%。

到目前為止，我們提到的所有內容都與預取有關，也稱為鏈接預取。 但是還有另外兩種同樣重要的預取類型，我們不得不提一下：

1.DNS預取
在連接到主機（源服務器）之前，瀏覽器需要執行 DNS 查找以將主機名（URL）轉換為 IP 地址。

雖然這通常只需要幾毫秒，但如果網站從第三方域名加載文件，大多數網站都會這樣做，瀏覽器必須為每個域執行 DNS 查找。 一些網站（例如，新聞網站）使用大量外部資源，這意味著每個頁面可能需要進行數十次 DNS 查找。

在這些情況下，使用dns-prefetch提示可能會節省幾毫秒，因為該指令會告訴瀏覽器立即啟動該進程，而不是在加載過程中稍後發現需要時。

正如 Web Almanac 2021 中所建議的，一個好的做法是將dns-prefetch與preconnect提示結合起來以獲得最佳結果。 您可以在我們討論preconnect的部分中看到原因。

2. 預渲染
預渲染與預取非常相似，因為它優化了用戶下一步可能導航到的資源。 不同之處在於prerender 實際上渲染的是整個頁面而不是特定的資源。

預連接

與dns-prefetch一樣， preconnect指令幫助瀏覽器在向服務器發送初始請求之前建立早期連接。

但是，預連接提示更進一步。 在執行 DNS 查找的同時，它還包括 TLS 協商和 TCP 握手。 這反過來又消除了往返延遲並節省了更多時間。

但問題來了：

如果preconnect完成dns-prefetch所做的一切，以及以上，我為什麼要首先使用dns-prefetch呢？

在大多數情況下， preconnect是dns-prefetch的首選選項，但問題是某些瀏覽器不支持preconnect ：

資料來源：caniuse.com

好處是您可以一起使用它們以充分利用它們。 您可以從支持它的瀏覽器中的預連接中受益，並回退到 dns-prefetch ：

根據谷歌：

早在 2019 年，Chrome 就通過預先連接到重要來源，成功地將他們的交互時間縮短了近 1 秒。

預載

在解釋preload指令是如何工作的之前，我們必須弄清楚一些事情。

儘管預加載經常被稱為“資源提示”，但事實並非如此。 Preload 是一種聲明式獲取，對於瀏覽器來說是強制性的，使它更像是一個命令而不是一個提示。

話雖如此，預加載用於強制瀏覽器在瀏覽器發現資源之前下載資源，因為它對頁面至關重要。

preload指令最適用於屬於關鍵渲染路徑但瀏覽器不易發現的資源。 例如，字體、CSS 或關鍵 JavaScript。

與dns-prefetch和preconnect提示的另一個區別是，雖然它們只需要rel和href屬性，但preload更複雜。 您必須添加as屬性，該屬性指示您要預加載的資源的內容類型。

根據 Google 的工程經理 Addy Osmani 的說法，在強制預加載時提供as屬性：

以下是您可以指定的as值的完整列表：

包含as屬性有助於瀏覽器根據其類型設置預取資源的優先級，並確定該資源是否已存在於緩存中。

查看 Chrome 資源優先級和調度文檔，詳細了解不同資源類型的優先級。

對於某些資源，例如字體，您還必須包含crossorigin屬性。

crossorigin屬性將請求的模式設置為 HTTP CORS 請求。 CORS（跨域資源共享）是一種機制，它允許服務器指示瀏覽器應允許加載資源的來源以外的任何來源。 我們不會對此進行深入探討，因為它不是本文的重點，但您可以在此處找到更多信息。

和as屬性類似，預加載不帶跨域的字體會雙重獲取。 這是 Addy Osmani 關於該主題的文章的另一段摘錄：

更多資源提示，更多問題

閱讀到目前為止的所有內容，您可能會開始認為使用盡可能多的資源提示只會導致瀏覽器快速加載您的頁面。

不幸的是，這種情況並非如此。

以下是在集成資源提示時應考慮的一些挫折：

1. 預取可能會增加數據消耗

儘管prefetch設置了較低的下載優先級，但這並不意味著它是無害的。 它的使用可能會增加您網站上的數據消耗，這可能會給您（服務器上的流量增加）和您的用戶（不必要的資源過度消耗）帶來問題。 此外，您最終可能會加載最終可能不會使用的額外字節。 因此，在集成之前請三思。

2. 預渲染會造成帶寬浪費

prerender的賭注甚至比prefetch更大，因為您提前下載了整個頁面。 這使得提示資源繁重，並可能導致帶寬浪費，尤其是在移動設備上。 最糟糕的是，如果用戶不請求頁面，他們甚至可能看不到提示的效果。

3. 預連接可能會導致額外的 CPU 使用率

雖然preconnect是一個低優先級的提示，但它仍然可能會損害您網站的性能。 如果已建立的連接沒有被快速使用（在 Chrome 上是 10 秒內），那麼preconnect指令只會增加額外的 CPU 使用率，並且會被瀏覽器自動關閉。 此外，您應該謹慎使用preconnect ，因為加密證書的大小約為 3 KB，這將與帶寬競爭其他重要資源。

4. Preload 會覆蓋瀏覽器分析器設置的優先級

preload是一個強大的指令，因為它允許您讓瀏覽器立即下載資源。 但是，現代 Web 瀏覽器非常擅長對資源進行優先級排序，因此過度使用預加載可能會導致負面結果。 例如，如果您添加與異步資源 URL 匹配的preload指令，瀏覽器將更快地獲取它，因此它會更快地解析它，通過在頁面加載的早期中斷主線程來消除異步屬性的效果。

回顧

我們在本文中涵蓋了很多內容，因此讓我們快速回顧一下最重要的幾點：

• dns-prefetch和preconnect用於確定域名的優先級（例如，https://example.com）。
• prefetch和preload用於優先加載資源。 雖然預取用於改善後續頁面的加載時間，但預加載在當前頁面的關鍵資源上效果最佳。
• prerender引用整個頁面（例如，blog.html）。
• prefetch 、 prerender和preconnect是資源提示，它們在瀏覽器認為合適的時候執行。 preload指令是瀏覽器必需的命令。
• 使用preload時，不要忘記提供as和crossorigin屬性以避免重複獲取。
• 儘管資源提示是低優先級的說明，但它們仍然對您網站的性能構成威脅。 適度使用它們，僅在必要時使用。
• preload是一個強大的指令，可以覆蓋瀏覽器分析器的優先級。 不要忘記現代瀏覽器非常擅長對資源進行優先級排序，因此請謹慎使用預加載“提示”。

使用新獲得的有關資源提示的知識來加快內容和資產的交付並提高您網站的整體性能。 每次進行更改時，不要忘記在現實世界中測試您的網站（關注現場數據）。