說明使用前連接和DNS-prefetch資源提示的使用。

預(yù)處理和DNS-prefetch是Web開發(fā)人員用來優(yōu)化其網(wǎng)站加載速度的兩種類型的資源提示。這些提示為瀏覽器提供了有關(guān)如何處理與外部資源的連接的說明，從而減少了延遲并改善用戶體驗。

• 預(yù)連接： preconnect提示指示瀏覽器盡早啟動與特定原點的連接。這包括DNS分辨率，TCP握手以及可選的TLS談判。通過提前啟動這些步驟，在時間到來時，可以更快地從該來源提出資源的實際請求。前連接對于很快需要的重要資源特別有用，例如連接到第三方API或CDN。
• dns-prefetch： dns-prefetch提示告訴瀏覽器預(yù)先對指定域執(zhí)行DNS分辨率。 DNS分辨率是將域名轉(zhuǎn)換為IP地址的過程，這可能需要一些時間。通過較早解決DNS，隨著IP地址已經(jīng)知道，稍后從該域中獲取資源所需的時間就會減少。

這兩個提示均使用HTML <link>標(biāo)簽實現(xiàn)， rel屬性分別設(shè)置為“前連接”或“ DNS-Prefetch”，并將href屬性設(shè)置為目標(biāo)域。

使用前連接和DNS-prefetch有哪些性能好處？

使用前連接和DNS-prefetch資源提示提供了幾種性能好處：

• 延遲減少：通過啟動DNS解決方案，TCP握手和TLS協(xié)商，以前連續(xù)連接或僅通過DNS-Prefetch進行DNS解決方案，建立聯(lián)系和Fetch資源所花費的時間大大減少。這可能會導(dǎo)致頁面加載時間更快，尤其是對于擁有許多外部資源的網(wǎng)站。
• 改進的用戶體驗：加載時間更快意味著用戶的等待時間較小，這可能會導(dǎo)致跳出率較低和參與度更高。內(nèi)容的無縫負(fù)載對于保持用戶的興趣和滿意度至關(guān)重要。
• 有效的資源加載：前連接有助于更快地加載關(guān)鍵資源，以確保在請求資源時已經(jīng)建立連接。 DNS-Prefetch確保瀏覽器知道要去哪里獲取其他資源，從而減少了初始等待時間。
• 更好的移動性能：由于網(wǎng)絡(luò)連接較慢，移動設(shè)備通常具有較高的延遲。預(yù)處理和DNS-prefetch可以通過較早開始連接過程來幫助減輕這種情況，從而在移動設(shè)備上的性能有明顯的影響。

前連接和DNS-prefetch的功能有何不同？

雖然預(yù)處理和DNS-prefetch均旨在優(yōu)化外部資源的負(fù)載，但它們的范圍和功能不同：

• 操作范圍：

  • 預(yù)連接：超越DNS的分辨率，包括啟動TCP握手，如果資源為HTTPS，則TLS談判。當(dāng)您知道需要資源并希望準(zhǔn)備好連接時，就會使用此提示。
  • dns-prefetch：僅執(zhí)行DNS分辨率。這對于暗示您可能需要資源的域很有用，但是您不確定何時或是否要求它們。這不如前固定連接侵略性，并且需要更少的網(wǎng)絡(luò)開銷。

• 用法方案：

  • 預(yù)連接：絕對需要的關(guān)鍵資源的理想選擇，例如CDN的圖像或第三方服務(wù)的腳本。
  • DNS-prefetch：最適合在頁面加載過程中可能需要的域，例如指向外部頁面的鏈接或可能在用戶交互中加載的資源。

• 網(wǎng)絡(luò)開銷：

  • 預(yù)連續(xù)連接：具有較高的網(wǎng)絡(luò)開銷，因為它在連接過程中遵循了更多步驟。應(yīng)明智地使用它以避免不必要的聯(lián)系。
  • DNS-Prefetch：由于僅解決DNS，因此網(wǎng)絡(luò)開銷較低。它可以更自由地用于可能需要的域。

可以將前連接和DNS合并用于優(yōu)化網(wǎng)站加載時間嗎？

是的，可以將前連接和DNS-Prefetch一起使用，以進一步優(yōu)化網(wǎng)站加載時間。結(jié)合使用它們來利用每種方法的優(yōu)勢：

• 戰(zhàn)略用途：使用前連接進行關(guān)鍵資源，這些資源肯定會很快需要，而DNS-Prefetch以減少關(guān)鍵或有條件的資源。例如，在使用DNS-prefetch進行次級或后備域時，您可以預(yù)先連接到主CDN。
• 分層優(yōu)化：從您預(yù)計需要的域的DNS-prefetch開始，然后在實際需要資源時更接近前連接。這種分層方法可以通過DNS分辨率提早開始，然后進行更徹底的連接準(zhǔn)備，從而節(jié)省時間。
• 平衡資源使用情況：雖然預(yù)連接可以大大加快資源加載，但它的開銷比DNS-Prefetch更具開銷。在適當(dāng)?shù)那闆r下，通過使用DNS-Prefetch，您可以平衡資源使用量，同時仍然獲得一些績效好處。

• 示例實現(xiàn)：您可以在HTML中實現(xiàn)這兩個：

   <code class="html"> <!-- Preconnect for critical resources --> <link rel="preconnect" href="https://cdn.example.com"> <link rel="preconnect" href="https://api.example.com"> <!-- DNS-Prefetch for potential resources --> <link rel="dns-prefetch" href="https://secondarycdn.example.com"> <link rel="dns-prefetch" href="https://fallbackapi.example.com"> </code>

通過結(jié)合前連接和DNS-Prefetch，開發(fā)人員可以創(chuàng)建更有效的加載策略，以滿足某些和潛在的資源需求，最終改善其網(wǎng)站的性能和用戶體驗。

以上是說明使用前連接和DNS-prefetch資源提示的使用。的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！