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

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

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

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

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

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

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

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

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

• 操作範(fàn)圍：

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

• 用法方案：

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

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

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

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

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

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

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

   <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)站的性能和用戶體驗(yàn)。

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