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

簡(jiǎn)介

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

一、preload

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

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

二、prefetch

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

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

prefetch有prefetch和dns-prefetch兩種

1. prefetch

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

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

2. dns-prefetch

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

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

三、preconnect

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

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

四、prerender

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

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

來(lái)個(gè)【分享、點(diǎn)贊、在看】三連支持一下吧

   “分享、點(diǎn)贊、在看” 支持一波