優(yōu)秀的網(wǎng)站都用了這幾個屬性

簡介

得益于瀏覽器技術(shù)的不斷發(fā)展，現(xiàn)代網(wǎng)頁應(yīng)用體驗已經(jīng)不斷接近原生應(yīng)用，許多大公司也將原生應(yīng)用遷移到瀏覽器，甚至更極端的，放棄原生應(yīng)用，只提供網(wǎng)頁應(yīng)用。隨之而來的，網(wǎng)頁應(yīng)用的代碼量在不斷增加，如果還像以前的樣子，將所有代碼放到一兩個文件中，勢必會影響網(wǎng)頁加載和渲染的速度。所以網(wǎng)頁應(yīng)用一般都會利用構(gòu)建工具，如webpack、gulp和rollup等，將代碼按模塊、路由或者命名空間進行分割，然后生成一個個比較小的js、css和html文件。但是問題又隨之而來了，在如此眾多的資源文件中，該如何決定加載的先后順序和優(yōu)先級呢？幸運的是，瀏覽器提供了preload、prefetch、preconnect和prerender等指令用來幫助網(wǎng)頁優(yōu)化資源的加載。這些指令用于<link>標(biāo)簽中，可以用來加載圖像、css、js和字體等關(guān)鍵資源。

一、preload

<link rel="prelaod" as="script" href="https://xxx.xxx.com/xxx.js">

指定了preload的link標(biāo)簽將會告訴瀏覽器，提高該資源的加載優(yōu)先級，必須而且要提前進行資源加載，不管該資源是否被使用。同時，preload不會阻塞頁面的渲染過程，避免了下載資源對頁面渲染造成的延遲。preload主要用于網(wǎng)頁必須的關(guān)鍵資源加載，對于不確定是否使用的資源，使用preload可能會造成帶寬的浪費，以及性能損耗。

二、prefetch

<link rel="prefetch" as="script" href="https://xxx.xxx.com/xxx.js">

與preload不同，prefetch是一個低優(yōu)先級的資源提示，它的作用是告訴瀏覽器加載可能會用到的資源，比如其他網(wǎng)頁、繼續(xù)滾動才會加載的資源等等。

prefetch有prefetch和dns-prefetch兩種

1. prefetch

<link rel="prefetch" href="https://fonts.gstatic.com/" >

提前加載未來可能會用到的資源，瀏覽器將會在空閑時獲取資源，獲取完成后，將會存儲在瀏覽器緩存中，等到真正使用時，直接從內(nèi)存中讀取即可。

2. dns-prefetch

<link rel="dns-prefetch" href="https://fonts.gstatic.com/" >

標(biāo)識了dns-prefetch的資源，在真正獲取之前，將會提前進行dns解析，可以加快請求的速度。一般dns-prefetch針對的是跨域資源，同域資源其實是無效的。道理也很簡單，同域的資源在請求html頁面的時候已經(jīng)解析完成了，所以dns-prefetch一般用于CDN、以及請求第三方資源，比如google font、google analytics等。

三、preconnect

<link rel="preconnect" href="https://cdn.example.com">

preconnect 允許瀏覽器在一個 HTTP 請求正式發(fā)給服務(wù)器前預(yù)先執(zhí)行一些操作，這包括 DNS 解析，TLS 協(xié)商，TCP 握手，這消除了往返延遲并為用戶節(jié)省了時間?？梢岳斫鉃閜reconnect是升級版的dns-prefetch，預(yù)執(zhí)行更多動作，同時也消耗更多的性能，請謹(jǐn)慎使用。

四、prerender

<link rel="prerender" href="http://example.com">

prerender，也就是預(yù)渲染，將會下載完整的網(wǎng)頁資源，然后在后臺進行渲染，這時會創(chuàng)建DOM結(jié)構(gòu)，執(zhí)行CSS和JavaScript，結(jié)果將會被放置在內(nèi)存中。注意此指令將會加載鏈接包含的所有資源，會消耗大量的網(wǎng)絡(luò)帶寬、內(nèi)存和cpu，建議只用于用戶肯定會訪問的頁面鏈接。