在本文中，讓我們看一下預連線Preconnect——它們是什麼、為什麼以及如何使用它們，以及審計和擴充套件它們的最佳實踐。
什麼是預連線？
預連線是一種資源提示，它告訴瀏覽器與瀏覽器尚未確定需要建立的域建立主動HTTP連線。建立HTTP連線需要很多步驟，包括：
- 進行DNS查詢。
- 連線TCP。
- 協商安全的TLS連線。
這可能需要數十甚至數百毫秒。預連線提高了效能，因為當瀏覽器確實意識到它需要建立一個連線來下載資源時，那個連線已經發生了！
示例和真實案例研究
讓我們看一個例子。下面的螢幕截圖顯示了來自Google的CSS檔案請求：
此資源稍後會在瀑布中發現，並且現有的HTTP連線不存在。瀏覽器知道它需要下載這個CSS檔案，但首先它必須完成DNS查詢，然後建立TCP連線，最後協商一個加密的TLS連線。這些會在請求CSS檔案之前增加大約100毫秒的延遲。我們可以通過在HTML檔案的<head>中新增預連線資源提示來優化這一點，如下所示：
<link href="https://fonts.googleapis.com/">
我們可以在下面的瀑布截圖中看到結果。預連線提示指示瀏覽器主動連線到Google字型域。當瀏覽器稍後發現它需要請求的CSS檔案時，已經建立了連線。這使得CSS檔案可以立即下載，將整個瀑布流向左移動：
這是一個很好的例子，但是有哪些真實世界的例子來說明預連線的好處呢？
- 一家線上商店通過使用產品影象目錄預連線到域，將他們的關鍵繪畫指標提高了500毫秒至1秒以上。
- Aaron Peters 有一個示例，其中預連線將CDN Planet的初始渲染效能提高了大約10%。
下面這個例子，這是一家媒體網站，擁有大量用於各種第三方域的JavaScript。通過分析他們的站點並實施資源提示（例如預連線和預載入），將互動時間提高了37%，從12.8秒的中位數降低到7.9秒。
一般來說，資源提示——尤其是預連線——是所有網站都應該考慮的。
如何使用預連線來提高效能
鑑於上述令人印象深刻的收穫，我知道您一定在想什麼：
如果預連線資源提示提高了整體效能和使用者體驗，為什麼我不預連線到我的網站使用的所有域？
不幸的是，這會損害效能。為什麼？這很簡單：瀏覽器使用大量複雜的邏輯來決定需要下載什麼以及何時下載，因此頁面可以儘快呈現並響應訪問者。（如果你想要所有書呆子的細節， Pat Meenan已經詳盡地記錄並展示了它。）
使用資源提示的站點本質上是要求覆蓋瀏覽器通常會執行的操作。如果使用不小心，這可能是不同效能問題的根源。
過多的預連線提示
瀏覽器會限制它們將維持的HTTP連線數。使用過多的預連線資源提示將限制瀏覽器進行所需的連線。實際上，過多的預連線會損害效能。
一個好的經驗法則是不超過6-8個預連線資源提示。
預連線到未使用的域
唯一比進行太多預連線更糟糕的是，要求瀏覽器預連線到一個甚至沒有使用過的域！然而，這可能非常普遍。站點更改其內容的來源，或者在不刪除該域的預連線資源提示的情況下停止使用第三方提供商。預連線到未使用的域會以兩種方式導致效能問題：
- 未使用的預連線會損害瀏覽器，因為它們會阻礙與其他域的連線。
- 即使未使用，開啟的TCP和加密的TLS連線也會使用伺服器資源。Akamai研究發現，多達6%的加密HTTP連線實際上並不發出任何請求。
過早關閉的預連線
因為瀏覽器限制了它們將保持的HTTP連線數，所以如果10秒內沒有請求發生，瀏覽器將關閉HTTP連線。當 預連線提示告訴瀏覽器開啟到域的HTTP連線，但在10秒內沒有向該域傳送請求時，會發生Premature Preconnect 。瀏覽器然後關閉此連線，只有在需要從該域請求資源時才需要再次連線。這很糟糕，原因有兩個：
- 過早的預連線會損害瀏覽器，因為它會阻礙與其他域的連線。
- 一旦實際遇到對該域的請求，瀏覽器必須開啟另一個到該域的連線。因此，進行預連線根本沒有任何淨收益！
Safari的rel資源提示問題
許多站點採用了在同一 <link> 標記內同時指定預連線提示和 dns-prefetch 提示的模式，如下所示。（有關詳細討論，請參閱我們的DNS預取資源提示指南。）
<link href="https://example.com/">
這種做法之所以開始，是因為瀏覽器支援的資源提示型別不同。截至2020年，支援預連線的瀏覽器多於支援DNS預取的瀏覽器，所有支援DNS預取的主流瀏覽器也支援預連線。
在同一個<link>標籤內指定兩個不同的資源提示確實沒有什麼好處，實際上，這樣做有很大的負面影響。Safari只允許在<link>標籤的rel屬性中指定一個資源提示 。在同一個rel屬性中指定兩個提示會導致Safari完全跳過<link>標記，並且不會嘗試任何一個資源提示。
實際上，指定多個資源提示會禁用Safari的提示！相反，您應該只使用<link>提示。
何時使用預連線提示
通常，應為以下內容提供預連線提示：
- 後來在瀑布中發現的領域
- 具有對頁面呈現或互動至關重要的資源的域
- 具有大量請求或下載大量內容的域
很好的例子包括：
- 關鍵渲染路徑中需要的具有CSS和JS包的其他域
- Web字型由CSS引用，需要下載
- 用於初始載入或呈現頁面的API端點的第一方域
一旦確定了應該預連線哪些域， 您仍然需要對其進行測試！ 僅僅因為某些東西應該可以改善您網站的效能或體驗，並不意味著它會。確保始終進行測試以驗證：
- 使用工具來衡量您的表現。
- 實施你的改變。
- 比較“之前”和“之後”的效能指標。
預連線資源提示的最佳實踐
我們已經看到使用預連線資源提示有很多好處，但如果使用不當，也會有很多缺陷會影響效能。這意味著稽覈頁面如何使用資源提示以確保您遵循所有最佳實踐非常重要。
- 首先，確定頁面當前正在使用的所有預連線資源提示。您將需要在基本HTML頁面中查詢<link>標記，以及連結： 也可以包含資源提示的HTTP標頭。還要記住，包含資源提示的連結標頭可以出現在基本HTML頁面之外的其他響應中！
- 使用上述指南，確定應預連線哪些域。它們是否在頁面已經使用的提示列表中？如果不是，為什麼不呢？
- 您是否使用超過6-8個預連線？如果是這樣，那就太多了，您應該考慮刪除它們。
- 接下來，對於每個預連線的域，驗證是否向其傳送了請求，並且請求在10秒內發生，以避免過早關閉連線。大多數瀑布圖將允許您按域或部分URL進行過濾，如下所示。這使得檢視請求是否以及何時發生在域中變得更加容易。
- 最後，檢視每個資源提示並確保<link>標記中沒有多個提示。
評論留言