主持人 > 博客 > 管理 > 預先載入、預取等標籤

預先載入、預取等標籤

有 提高網路效能的多種方法。 其中之一是預加載稍後需要的內容。 CSS預處理、整頁預先渲染或網域解析。 我們提前做好一切，然後立即顯示結果！ 聽起來很酷。

更酷的是它的實作非常簡單。 五個標籤給瀏覽器一個指令來執行初步操作：

<link rel="prefetch" href="/zh-TW/style.css" as="style" />
<link rel="preload" href="/zh-TW/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />


讓我們簡單解釋一下它們的作用以及何時使用它們。

跳到： 預緊 · 預取 · 預連接 · DNS 預取 · 預渲染

預緊

<link rel= "preload"> 告訴瀏覽器盡快載入和快取資源（例如腳本或樣式表）。 當頁面加載後幾秒鐘需要資源並且您希望加快過程時，這非常有用。

載入後瀏覽器不會對資源執行任何操作。 不執行腳本，不套用樣式表。 此資源被簡單地快取並根據請求立即可用。

句法

<link rel="preload" href="/zh-TW/style.css" as="style" />

href 指向您要下載的資源。

as 可以是任何可以在瀏覽器中下載的內容：

  • style 對於樣式表，
  • script 對於腳本來說，
  • font 對於字體，
  • fetch 對於使用載入的資源 fetch() 或 XMLHttpRequest,
  • 查看完整列表 在 MDN 上.

指定屬性很重要 as – 這有助於瀏覽器正確決定下載的優先順序和排程下載時間。

何時使用

當不久的將來需要資源時使用預先載入。 例如：

  • 來自外部文件的非標準字體： 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    默認情況下， comic-sans.woff2 僅在下載並解析後才開始加載 index.css。 為了避免等待太久，您可以使用以下命令提前下載字體 <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • 如果你根據方法來區分你的風格 關鍵 CSS 分為兩部分，關鍵部分（用於立即渲染）和非關鍵部分： 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    透過這種方法，非關鍵樣式只會在 JavaScript 運行時開始加載，這可能會在渲染後幾秒鐘發生。 而不是等待 JS 使用 <link rel= "preload">提前開始下載：

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/zh-TW/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

不要過度使用預先加載。 如果連續加載所有內容，網站不會神奇地加速；相反，它會阻止瀏覽器正確規劃其工作。

不要與預取混淆。 不使用 <link rel= "preload">，如果您在頁面載入後不需要立即使用該資源。 如果您稍後需要它，例如下一頁，請使用 <link rel= "prefetch">.

詳情

這是必需的標籤 與所有其他標籤不同，由瀏覽器執行（如果支援的話） 與預載有關。 瀏覽器必須下載指定的資源 <link rel="preload">。 在其他情況下，它可能會忽略預加載，例如，如果它在慢速連接上運行。

優先。 瀏覽器通常會為不同的資源（樣式、腳本、字體等）指派不同的優先級，以便先載入最重要的資源。 在這種情況下，瀏覽器透過屬性來確定優先級 as。 對於 Chrome 瀏覽器，您可以查看 完整的優先權表.

預先載入、預取等標籤

預取

<link rel= "prefetch"> 要求瀏覽器在背景下載並快取資源（例如腳本或樣式表）。 加載以低優先級進行，因此不會幹擾更重要的資源。 如果下一頁需要該資源並且您想提前快取它，這非常有用。

在這裡，瀏覽器在載入後也不對資源執行任何操作。 不執行腳本，不套用樣式表。 此資源被簡單地快取並根據請求立即可用。

句法

<link rel="prefetch" href="/zh-TW/style.css" as="style" />

href 指向您要下載的資源。

as 可以是任何可以在瀏覽器中下載的內容：

  • style 對於樣式表，
  • script 對於腳本來說，
  • font 對於字體，
  • fetch 對於使用載入的資源 fetch() 或 XMLHttpRequest,
  • 查看完整列表 在 MDN 上.

指定屬性很重要 as - 這有助於瀏覽器正確地確定下載的優先順序並安排下載。

何時使用

從其他頁面載入資源，如果您需要來自另一個頁面的資源，並且想要預先載入它以加快該頁面的渲染速度。 例如：

  • 您有一家線上商店，40% 的用戶離開主頁進入產品頁面。 使用 <link rel= "prefetch">，載入CSS和JS檔案來渲染產品頁面。
  • 您有一個單頁面應用程序，不同的頁面加載不同的包。 當使用者造訪頁面時，可以預先載入其連結到的所有頁面的套件。

這個標籤很可能可以在任何程度上安全地使用。。 瀏覽器通常以最低優先順序安排預取，因此不會打擾任何人。 請記住，它會消耗用戶流量，這可能會花費金錢。

不適用於緊急請求。 不使用 <link rel= "prefetch">，當幾秒鐘內需要資源時。 在這種情況下，使用 <link rel= "preload">.

詳情

可選標籤。 瀏覽器不需要遵循此指令；它可能會忽略它，例如，在連線速度較慢時。

Chrome 中的優先權。 在 Chrome 中 <link rel= "prefetch"> 通常以最低優先順序執行（參見 完整的優先權表），也就是說，在加載其他所有內容之後。

預連接

<link rel= "preconnect"> 當您希望將來加快連線設定時，會要求瀏覽器提前連線到網域。

如果瀏覽器從新的第三方網域檢索任何資源，則必須建立連線。 例如，如果它從 CDN 載入 Google Fonts、React 字體，或從 API 伺服器請求 JSON 回應。

建立新連線通常需要幾百毫秒。 雖然完成了一次，但仍然需要時間。 如果您提前建立了連接，您將節省時間並更快地從該網域下載資源。

句法

<link rel= "preconnect" href="https://api.my-app.com" />

href 表示您要確定其 IP 位址的網域名稱。 可以用前綴 (https://domain.com）或沒有它（//domain.com).

何時使用

用於很快需要的網域 從那裡下載重要的樣式、腳本或圖像，但您還不知道資源 URL。 例如：

  • 您的應用程式託管在 my-app.com 並發出 AJAX 請求 api.my-app.com：你事先不知道具體的查詢，因為它們是由 JS 動態產生的。 這裡使用標籤來預先連接域是非常合適的。
  • 您的應用程式託管在 my-app.com 並使用Google字體。 它們的下載分兩步：首先，從網域下載 CSS 文件 fonts.googleapis.com，然後該文件請求字體 fonts.gstatic.com。 您無法知道具體的字體檔案來自哪些 fonts.gstatic.com 直到載入CSS檔案時才會需要，所以我們只能提前進行初步連線。

使用此標籤可以加快某些第三方腳本或樣式的速度 由於預先建立的連線。

不要過度使用。 對於客戶端和伺服器來說，建立和維護連線都是一項昂貴的操作。 最多可將此標籤用於 4-6 個網域。

詳情

可選標籤。 瀏覽器不需要遵循此指令，並且可以忽略它，例如，如果已經建立了許多連接或在某些其他情況下。

連結過程包括哪些內容？。 若要連接到每個站點，瀏覽器必須執行以下操作：

  • DNS解析。 尋找伺服器IP位址（216.58.215.78）對於指定的網域名稱（google.com).
  • TCP握手。 交換資料包（客戶端→伺服器→客戶端）以啟動與伺服器的TCP連線。
  • TLS 握手（僅限 HTTPS 網站）。 兩輪資料包交換（客戶端 → 伺服器 → 用戶端 → 伺服器 → 用戶端）以啟動安全 TLS 會話。

注意：HTTP/3 將改進並加速握手機制，但還有很長的路要走。

DNS 預取

<link rel= "dns-prefetch"> 如果您即將連線到該網域並希望加快初始連線速度，則要求瀏覽器提前對該網域執行 DNS 解析。

如果瀏覽器要從新的第三方網域檢索任何資源，則必須確定該網域的 IP 位址。 例如，從 CDN 載入 Google Fonts、React 字體，或從 API 伺服器請求 JSON 回應。

對於每個新域，DNS 記錄解析通常需要大約 20-120 毫秒。 這僅影響從給定網域載入第一個資源，但仍然會引入延遲。 如果我們提前進行DNS解析，我們會節省時間並更快地載入資源。

句法

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href 表示要為其設定IP位址的網域名稱。 可以用前綴 (https://domain.com）或沒有它（//domain.com).

何時使用

用於很快需要的網域 從那裡下載瀏覽器事先不知道的資源。 例如：

  • 您的應用程式託管在 my-app.com 並發出 AJAX 請求 api.my-app.com：你事先不知道具體的查詢，因為它們是由 JS 動態產生的。 這裡使用標籤來預先連接域是非常合適的。
  • 您的應用程式託管在 my-app.com，並使用 Google 字體。 它們的下載分兩步：首先，從網域下載 CSS 文件 fonts.googleapis.com，然後該文件請求字體 fonts.gstatic.com。 您無法知道具體的字體檔案來自哪些 fonts.gstatic.com 在載入CS​​S檔案之前你會用到它，所以我們只能預先建立一個初步的連線。

使用此標籤可以加快某些第三方腳本或樣式的速度 由於預先建立的連線。

請注意類似的特徵 <link rel= "dns-prefetch"/> и <link rel= "preconnect">。 在一個域中將它們一起使用通常沒有意義： <link rel= "preconnect"> 已經包括 <link rel= "dns-prefetch"/> 以及更多。 這在兩種情況下是合理的：

  • 您想支援舊版瀏覽器嗎？. <link rel= "dns-prefetch" /> 支持 從 IE10 和 Safari 5 開始. <link rel= "preconnect"> 在 Chrome 和 Firefox 中支援了一段時間，但僅在 11.1 和 XNUMX 中新增至 Safari IE/Edge 仍不支持。 如果您需要支援這些瀏覽器，請使用 <link rel= "dns-prefetch" /> 作為備份選項 <link rel= "preconnect">.
  • 您想要加速與 4-6 個以上網域的連接。 標籤 <link rel= "preconnect"> 不建議使用超過 4-6 個網域，因為建立和維護連線是一項昂貴的操作。 <link rel= "dns-prefetch" /> 消耗的資源較少，因此如有必要，請使用它。

詳情

可選標籤。 瀏覽器不需要遵循此指令，因此它可能不會執行 DNS 解析，例如，如果頁面上有許多此類標籤或其他情況。

什麼是DNS。 網路上的每台伺服器都有一個唯一的IP位址，看起來像 216.58.215.78。 網站名稱通常輸入到瀏覽器的網址列（例如， google.com），DNS（網域名稱系統）伺服器將其與伺服器的 IP 位址（216.58.215.78).

若要確定 IP 位址，瀏覽器必須查詢 DNS 伺服器。 連接到新的第三方網域時需要 20−120 毫秒。

DNS 被緩存，儘管不是很可靠。 某些作業系統和瀏覽器會快取 DNS 查詢：這將節省重複查詢的時間，但不能依賴快取。 在 Linux 上它通常根本不起作用。 Chrome有一個DNS緩存，但它只能持續一分鐘。 Windows 會將 DNS 回應快取五天。

預渲染

<link rel= "prerender"> 要求瀏覽器下載 URL 並將其顯示在不可見的標籤中。 當使用者點擊連結時，應立即顯示該頁面。 如果您確定用戶將訪問某個頁面並希望加快其顯示速度，這非常有用。

儘管（或由於）該標籤具有非凡的有效性，但在 2019 年 <link rel= "prerender"> 主要瀏覽器的支援很差。 查看更多詳情。 下面.

句法

<link rel="prerender" href="https://my-app.com/pricing" />

href 指向您想要在背景開始渲染的 URL。

何時使用

當你確實確定用戶會轉到某個頁面時。 如果您有一個“隧道”，頁面 A 的 70% 訪客可以透過該“隧道”轉到頁面 B，那麼 <link rel= "prerender"> 在頁面 A 上將有助於非常快速地顯示頁面 B。

不要過度使用。 預渲染在頻寬和記憶體方面非常昂貴。 不使用 <link rel= "prerender"> 超過一頁。

詳情

可選標籤。 瀏覽器不需要遵循此指令，並且可能會忽略它，例如，在連接速度較慢或可用記憶體不足時。

為了節省內存 Chrome 不完整渲染和 僅預先載入 NoState。 這意味著 Chrome 會載入頁面及其所有資源，但不會呈現或執行 JavaScript。

Firefox 和 Safari 根本不支援此標籤。 這並不違反規範，因為瀏覽器不需要遵循此指令； 但還是很難過。 實施錯誤 Firefox 已經開幕七年了。 有報道稱 Safari 也不支援這個標籤.

總結

使用：

  • <link rel= "preload"> - 當您在幾秒鐘內需要資源時
  • <link rel= "prefetch"> - 當您需要下一頁的資源時
  • <link rel= "preconnect"> - 當您知道您很快就需要某個資源，但您還不知道其完整 URL 時
  • <link rel= "dns-prefetch"> - 同樣，當您知道您很快將需要某個資源，但您還不知道其完整 URL（對於較舊的瀏覽器）
  • <link rel= "prerender"> - 當您確定使用者會轉到某個頁面，並且您想要加快其顯示速度時

來源： www.habr.com

添加評論