預加載，預取和預處理資源

預緊力是現在需要的關鍵資源，預購預測未來的導航需求，並預先連接速度與第三方服務器的連接升高；使用預加載量來用於具有AS屬性的字體或英雄圖像，例如在空閒時間內預取可能的下一頁資源，並將早期連接設置預取到諸如CDNS或API之類的域，以謹慎和戰略性地應用於範圍內，以避免使用資源爭奪並確保最佳性能。

在優化Web性能時，預加載，預取和預連接是強大的瀏覽器提示，可幫助更快地提供資源並改善感知的負載時間。儘管聽起來相似，但每個人都有一個獨特的目的，應在戰略上使用。

這是每個人的作用，何時使用它們以及實施的實用技巧的細分。

1。預加載（ rel="preload" ）

現在加載關鍵資源

用例：您知道在當前頁面加載中很快就需要資源 - 例如，Web字體，英雄映像或關鍵的CSS/JS文件，否則該文件可能會被瀏覽器發現來太晚。

preload告訴瀏覽器： “即使您還沒有在哪裡使用，也立即下載此信息。”

例子：

 <！ - 預加載網絡字體 - >
<link rel =“ preload” href =“/fonts/myfont.woff2” as =“ font” type =“ font/woff2” crossorigin>

<！ - 預加載一個關鍵腳本 - >
<link rel =“ preload” href =“/js/main.js” as =“ script”>

<！ - 預加載英雄圖像 - >
<link rel =“ preload” href =“/images/hire.jpg” as =“ image”>

關鍵說明：

• as需要屬性 - 它可以幫助瀏覽器優先級並應用正確的加載邏輯。
• 很少使用：過度使用preload可以與更重要的資源競爭並損害性能。
• 僅用於高優先級，渲染阻滯或後期發現的資產。

2。預取（ rel="prefetch" ）

下載用於未來導航的資源

用例：預見下一頁上用戶可能需要的內容 - 例如，如果分析表明下一步訪問特定頁面的可能性很大。

prefetch是一個低優先級請求，在空閒時間內下載資源。

例子：

 <！ - 預取可能的下一頁 - >
<link rel =“ prefetch” href =“/sext-page.html”>

<！ - 在下一頁上預取腳本 - >
<link rel =“ prefetch” href =“/js/detail-page.js”>

關鍵說明：

• 通用導航路徑的理想選擇（例如，登錄後，產品詳細信息頁面）。
• 瀏覽器以低優先級對待prefetch ，因此不會干擾當前的頁面性能。
• 當用戶徘徊在鏈接上或附近的滾動時，可以與交叉觀察者結合使用以預取。

提示：使用importance=low要求類似的行為：

 fetch（'/data.json'，{exuntion：'low'}）;

3。預連接（ rel="preconnect"或dns-prefetch ）

加快連接設置

用例：您正在從第三方域（例如CDN，Google字體，分析）加載資源。建立連接（DNS查找，TCP握手，TLS談判）可能需要數百毫秒。

preconnect告訴瀏覽器： “早點開始建立連接。”

例子：

 <！ - 與CDN的預連接 - >
<link rel =“ prednect” href =“ https://cdn.example.com”>

<！ - 與Google字體前連接 - >
<link rel =“ prednect” href =“ https://fonts.googleapis.com”>
<link rel =“ prednect” href =“ https://fonts.gstatic.com” crossorigin>

替代方案： dns-prefetch （打火機）

如果您只需要DNS分辨率，請使用：

 <link rel =“ dns-prefetch” href =“ https://api.example.com”>

關鍵說明：

• preconnect更具侵略性 - 它設置了完整的TCP/TLS握手。
• 僅用於您絕對需要的域 - 每個連接都會消耗系統資源。
• dns-prefetch資源密集度較低，但僅解決DNS。

什麼時候使用哪個？

最佳實踐

• ✅衡量影響：使用燈塔或Web生命值檢查這些提示是否真的提高了性能。
• ✅避免過度使用：過多的preload標籤可以阻止更多重要的資源。
• ✅使用動態導入：將prefetch與諸如react或vue之類的框架中的代碼分解。
• ✅有條件預取：預取懸停或滾動以節省帶寬。

   link.AddeventListener（'Mouseenter'，（）=> {
    const pref = document.createelement（'link'）;
    pref.rel ='prefetch';
    pref.href ='/next-page.html';
    document.head.head.appendchild（pref）;
  }）;

  ---

  基本上，這樣想到了：

  • preload =“我現在需要這個。”
  • prefetch =“我稍後可能需要。”
  • preconnect =“讓我們準備更快地與該服務器交談。”

  明智地使用這些提示可以刮掉數百毫秒的加載時間，而不會更改代碼結構。

  以上是預加載，預取和預處理資源的詳細內容。更多資訊請關注PHP中文網其他相關文章！