使用資源提示優化性能
已發表: 2022-03-10現代網絡瀏覽器使用各種技術通過猜測用戶接下來可能會做什麼來幫助提高頁面加載性能。 但是，瀏覽器對我們的網站或整個應用程序知之甚少，而且關於用戶可能會做什麼的最佳見解通常來自我們，即開發人員。
以分頁內容為例，例如相冊。 我們知道，如果用戶正在查看相冊中的照片，他們點擊“下一個”鏈接以查看相冊中以下圖像的機會非常高。 然而，瀏覽器並不真正知道頁面上的所有鏈接中用戶最有可能點擊的鏈接。 對於瀏覽器來說，所有這些鏈接都具有相同的權重。
如果瀏覽器能夠以某種方式知道用戶下一步要去哪裡，並且可以提前獲取下一頁，那麼當用戶點擊鏈接時，頁面加載速度會快很多，快得多？ 這就是資源提示的主要內容。 它們是開發人員告訴瀏覽器未來可能發生的事情的一種方式，以便瀏覽器可以將其納入其加載資源的選擇中。
所有這些資源提示都使用<link>元素的rel屬性，您將熟悉在 HTML 文檔的<head>中找到該屬性。 在本文中，我們將了解資源提示的主要類型以及我們可以在頁面中何時何地使用它們。 我們將從小而微妙的提示到最後的大槍。
DNS 預取
DNS 查找是將人類友好的域名（如example.com ）轉換為機器友好的 IP 地址（如123.54.92.4 ）的過程，該地址實際上是獲取資源所需的。
每次您在瀏覽器地址欄中鍵入 URL，點擊頁面中的鏈接，甚至從不同域加載資源（如圖像）時，瀏覽器都需要進行 DNS 查找以找到保存我們所擁有資源的服務器請求。 對於具有大量外部資源的繁忙頁面（例如可能包含大量廣告和跟踪器的新聞網站），每個頁面可能需要進行數十次 DNS 查找。
瀏覽器緩存這些查找的結果，但它們可能很慢。 一種性能優化技術是通過將資源組織到更少的域來減少所需的 DNS 查找次數。 如果無法做到這一點，您可以使用dns-prefetch資源提示警告瀏覽器需要查找的域。
<link rel="dns-prefetch" href="https://images.example.com"> 當瀏覽器遇到這個提示時，它可以盡快開始解析images.example.com域名，即使它還不知道它會被如何使用。 這使瀏覽器能夠領先於遊戲並並行執行更多工作，從而減少整體加載時間。
我什麼時候應該使用dns-prefetch ？
當您的頁面使用來自不同域的資源時，請使用dns-prefetch ，以使瀏覽器領先一步。 瀏覽器支持真的很棒，但是如果瀏覽器不支持它，那麼也沒有什麼壞處——預取就不會發生。
不要預取任何您不使用的域，如果您發現自己想要預取大量域，您最好看看為什麼需要所有這些域，以及是否可以採取任何措施來減少數量。
預連接
DNS 預取的一個步驟是預連接到服務器。 建立與託管資源的服務器的連接需要幾個步驟：
- DNS 查找（正如我們剛剛討論過的）；
- TCP 握手
瀏覽器和服務器之間的簡短“對話”以創建連接。 - HTTPS 站點上的 TLS 協商
這將驗證證書信息對於連接是否有效且正確。
這通常會在每台服務器上發生一次，並且會佔用寶貴的時間——尤其是在服務器離瀏覽器很遠且網絡延遲很高的情況下。 （這就是全球分佈式 CDN 真正有用的地方！）與預取 DNS 可以幫助瀏覽器在看到即將發生的事情之前領先於遊戲一樣，預連接到服務器可以確保瀏覽器何時到達該部分在需要資源的頁面中，建立連接的緩慢工作已經發生，線路已打開並準備就緒。
<link rel="preconnect" href="https://scripts.example.com"> 我什麼時候應該使用preconnect ？
同樣，瀏覽器支持很強大，如果瀏覽器不支持預連接也沒有什麼壞處——結果將和以前一樣。 當您確定將要訪問資源並且想要取得成功時，請考慮使用預連接。
注意不要預先連接然後不要使用連接，因為這會減慢您的頁面速度並佔用您連接的服務器上的少量資源。
預取下一頁
到目前為止，我們看到的兩個提示主要集中在正在加載的頁面中的資源上。 例如，它們可能有助於幫助瀏覽器在圖像、腳本或字體方面取得領先。 接下來的幾個提示更多地涉及導航和預測用戶在當前正在加載的頁面之後可能會去哪裡。
其中第一個是預取，它的鏈接標籤可能如下所示：
<link rel="prefetch" href="https://example.com/news/?page=2" as="document">這告訴瀏覽器它可以繼續並在後台獲取頁面，以便在請求時準備好運行。 這裡有一點賭注，因為您必須搶占您認為用戶接下來將導航的位置。 做對了，下一頁可能看起來加載得很快。 弄錯了，你就浪費了時間和資源來下載一些不會被使用的東西。 如果用戶使用的是計量連接（例如有限的手機套餐），您實際上可能會花費他們真金白銀。
當發生預取時，瀏覽器會進行 DNS 查找並建立我們在前兩種提示中看到的服務器連接，但隨後會更進一步，實際請求並下載文件。 但是，它會在該點停止，並且文件不會被解析或執行，並且它們絕不會應用於當前頁面。 他們只是被要求並做好準備。
您可能認為預取有點像將文件添加到瀏覽器的緩存中。 當用戶點擊鏈接時，不需要去服務器下載它，文件可以從內存中提取出來並更快地使用。
as屬性
在上面的示例中，您可以看到我們將as屬性設置為as="document" 。 這是一個可選屬性，它告訴瀏覽器我們正在獲取的內容應該作為文檔（即網頁）處理。 這使瀏覽器能夠設置相同類型的請求標頭和安全策略，就好像我們剛剛點擊了指向新頁面的鏈接一樣。
通過使瀏覽器能夠以適當的方式處理不同類型的預取， as屬性有很多可能的值。
as的值 | 資源類型 |
|---|---|
audio | 聲音和音樂文件 |
video | 視頻 |
Track | 視頻或音頻 WebVTT 軌道 |
script | JavaScript 文件 |
style | CSS 樣式表 |
font | 網頁字體 |
image | 圖片 |
fetch | XHR 和 Fetch API 請求 |
worker | 網絡工作者 |
embed | 多媒體<embed>請求 |
object | 多媒體<object>請求 |
document | 網頁 |
可用於使用as屬性指定資源類型的不同值。
我什麼時候應該使用prefetch ？
再次prefetch具有很好的瀏覽器支持。 如果您認為加快導航速度會對用戶體驗產生積極影響，那麼您應該在有合理程度的確定用戶可能會瀏覽您的網站時使用它。 這應該與通過可能獲取未使用的資源而浪費資源的風險進行權衡。
預渲染下一頁
使用prefetch ，我們已經看到瀏覽器如何在後台下載準備使用的文件，但也注意到此時沒有對它們進行任何其他操作。 預渲染更進一步並執行文件，幾乎完成了顯示頁面所需的所有工作，除了實際顯示它。
這可能包括解析任何子資源（例如 JavaScript 文件和圖像）的資源並預取這些資源。
<link rel="prerender" href="https://example.com/news/?page=2">這確實可以使以下頁面加載感覺是即時的，具有您在點擊瀏覽器的後退按鈕時可能會看到的那種快速加載性能。 然而，這裡的賭注更大，因為您不僅要花時間請求和下載文件，還要與任何 JavaScript 等一起執行它們。 這可能會耗盡內存和 CPU（以及電池），如果他們最終不請求頁面，用戶將看不到這些好處。
我什麼時候應該使用prerender ？
瀏覽器對prerender的支持目前非常有限，實際上只有 Chrome 和舊 IE（不是 Edge）提供對該選項的支持。 除非您碰巧專門針對 Chrome，否則這可能會限制其用途。 這又是一個“沒有傷害，沒有犯規”的案例，因為用戶不會看到好處，但如果沒有，也不會給他們帶來任何問題。
使用資源提示
我們已經看到瞭如何使用<link>標籤在 HTML 文檔的<head>中使用資源提示。 這可能是最方便的方法，但您也可以使用Link: HTTP 標頭實現相同的目的。
例如，使用 HTTP 標頭預取：
Link: <https://example.com/logo.png>; rel=prefetch; as=image;您還可以使用 JavaScript 動態應用資源提示，也許是為了響應使用交互。 要使用 W3C 規範文檔中的示例：
var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);這開闢了一些有趣的可能性，因為它可能更容易根據用戶與頁面的交互方式來預測用戶下一步可能導航的位置。
注意事項
我們已經研究了四種更激進的預加載資源的方法，從最簡單的解析 DNS 到在後台準備好完整的頁面。 重要的是要記住這些提示就是這樣； 它們暗示了瀏覽器可以優化性能的方式。 它們不是指令。 瀏覽器可以接受我們的建議並使用其最佳判斷來決定如何響應。
這可能意味著在繁忙或過度使用的設備上，瀏覽器根本不會嘗試響應提示。 例如，如果瀏覽器知道它在計量連接上，它可能會預取 DNS，但不會預取全部資源。 如果內存不足，瀏覽器可能會再次決定在當前頁面被卸載之前不值得獲取下一頁。
現實情況是，在桌面瀏覽器上，提示可能會按照開發人員的建議全部遵循，但請注意，在每種情況下都取決於瀏覽器。
維護的重要性
如果您已經使用網絡超過幾年，您就會熟悉這樣一個事實：如果頁面上的某些內容是看不見的，那麼它通常會被忽略。 隱藏的元數據（例如頁面描述）就是一個很好的例子。 如果維護站點的人不能輕易看到數據，那麼它很容易被忽視和過時。
這是資源提示的真正風險。 由於代碼被隱藏起來並且在使用中幾乎未被檢測到，因此頁面很容易更改並且任何資源提示都不會更新。 說，預取您不使用的頁面的結果意味著您為提高網站性能而實施的工具正在積極地損害它。 因此，制定良好的程序來更新您的資源提示變得非常非常重要。
資源
- “資源提示規範”，W3C
- “通過預取加快下一頁導航，”Addy Osmani