Pre技術(shù)：預(yù)加載技術(shù)。提供在不影響當(dāng)前頁(yè)面情況下，瀏覽器預(yù)加載資源的性能優(yōu)化方案惹盼。
比較出名的Pre是dns-prefetch，用于告知瀏覽器預(yù)先獲取指定的域名的DNS惫确，以便在使用時(shí)可以減少DNS查找逻锐。除了dns-prefetch外，還有幾個(gè)“不出名”的Prer技術(shù)雕薪，本文將對(duì)現(xiàn)有的幾個(gè)Pre技術(shù)做一個(gè)簡(jiǎn)單的介紹，這些技術(shù)都是使用link標(biāo)簽定義晓淀。
DNS Prefetch
就是上述提到的所袁，用于告知瀏覽器，盡可能預(yù)先解析指定域名的DNS凶掰。使用方式：
<link rel="dns-prefetch" href="http://the-domain-to-be-prefetched.com" />
至于兼容性燥爷，可以說(shuō)是目前為止所有的Pre技術(shù)里最好的了，具體可以查看http://caniuse.com/#search=dns-prefetch
IE是從IE9開始支持DNS Prefetch的懦窘，但是前翎，是從IE10開始支持dns-prefetch。IE9里畅涂，并不是使用dns-prefetch來(lái)定義一個(gè)DNS的預(yù)解析港华，而是使用prefetch。挺尷尬的午衰，因?yàn)閜refetch在w3規(guī)范里又被用到了另一個(gè)Pre技術(shù)立宜，下面會(huì)講到。臊岸。
Preconnect
預(yù)連接橙数。和DNS Prefetch類似，但是帅戒，更進(jìn)一步灯帮。它不僅要求瀏覽器預(yù)解析指定域名的DNS，還需要預(yù)先與服務(wù)器握手以及TLS協(xié)商（如果使用了HTTPS）。使用方式：
<link rel="preconnect" href="http://the-domain-to-be-preconnect.com" crossorigin="anonymous" />
兼容性查看http://caniuse.com/#search=preconnect
由于會(huì)與服務(wù)器握手钟哥，因此迎献，就需要確定“是否跨域”。和script類似瞪醋，帶crossorigin屬性忿晕，以告知瀏覽器如何處理跨域和cookie。
Prefetch
上述DNS Prefetch里提到過银受，IE9里使用的DNS Prefetch類型名是prefetch践盼，但是，這個(gè)類型名在規(guī)范里又被用于另外一個(gè)意圖宾巍。
Prefetch：預(yù)獲取咕幻，在Preconnect基礎(chǔ)上更進(jìn)一步，它要求瀏覽器獲取整個(gè)的指定資源顶霞，link[href]值指定的是某個(gè)具體資源肄程，而不是簡(jiǎn)單的一個(gè)域名了。除了和Preconnect一樣擁有rel选浑、href和crossorigin外蓝厌，還有as，可用于告知瀏覽器資源類型古徒，這個(gè)類型和MIME不一樣拓提，是一個(gè)統(tǒng)稱類型，比如：所有的圖片都是as="image"隧膘，JS的是as="script"代态，HTML的是 as="html"等，具體可以參考https://fetch.spec.whatwg.org/#concept-request-destination疹吃。使用方式：
<link rel="prefetch" crossorigin as="script" />
as屬性并不是必須的蹦疑，但是建議加上，以便瀏覽器能更好的添加請(qǐng)求Header來(lái)優(yōu)化資源的獲取萨驶。
使用Prefetch歉摧，整個(gè)資源都會(huì)被加載，但是腔呜，瀏覽器不允許對(duì)資源預(yù)處理或執(zhí)行判莉，資源只是被提前加載，并緩存起來(lái)育谬，以便將來(lái)使用券盅。
兼容性查看http://caniuse.com/#search=prefetch
Prerender
預(yù)渲染。與Prefetch類似膛檀，瀏覽器會(huì)下載整個(gè)資源锰镀，但是娘侍，Prefetch不允許瀏覽器對(duì)資源做預(yù)處理和執(zhí)行，而Prerender則會(huì)告知瀏覽器泳炉，下載資源（HTML）并解析/執(zhí)行它憾筏，包括被解析資源的子資源，這意味著會(huì)下載該HTML中的圖片花鹅、樣式氧腰、腳本等等。
Prerender沒有as屬性刨肃，它下載的是HTML古拴，使用方式
<link rel="preconnect" href="http://the-domain-to-be-preconnect.com" />
由于不允許對(duì)當(dāng)前頁(yè)面產(chǎn)生影響，瀏覽器設(shè)置預(yù)渲染的頁(yè)面visibilityState屬性為hidden真友。
兼容性查看http://caniuse.com/#search=prerender
建議少用這個(gè)黄痪，太耗資源。而且盔然，查看上述兼容性桅打，你會(huì)看到Chrome 58里又把這個(gè)功能干掉了。愈案。挺尾。。站绪。潦嘶。
Preload
預(yù)加載。這是一個(gè)和Prefetch幾乎一模一樣的功能崇众，但是，其加載的資源適用的場(chǎng)景又完全不一樣航厚。使用方式只是將上述Prefetch中的prefetch改成preload顷歌。其他的完全一樣：
<link rel="preload" crossorigin as="image" />
與Prefetch*不同之處在于：
- Prefetch的優(yōu)先級(jí)很低，低到瀏覽器
可以不加載- Preload的優(yōu)先級(jí)很高幔睬，瀏覽器
一定要加載- Prefetch加載的資源用于
將來(lái)某個(gè)頁(yè)面中（這意味著它可能壓根不會(huì)被用到）- Preload加載的資源用于
當(dāng)前頁(yè)面中
所以眯漩，在使用prefetch還是preload時(shí)候，需要考慮上述的不同點(diǎn)麻顶，而不應(yīng)該盲目使用赦抖。[Preload以前叫Subresource]
兼容性查看http://caniuse.com/#search=preload
最后，上述Pre技術(shù)辅肾，除了Preload队萤，其他的Pre都可能“不被瀏覽器執(zhí)行”，這不是兼容性的問題矫钓，而是要尔，這些Pre都不是瀏覽器必須行為舍杜，瀏覽器會(huì)根據(jù)一定的策略決定是否Pre相應(yīng)的資源或操作，這些策略包括：CPU赵辕、內(nèi)存等的占用率既绩。
有空的話，我再另外寫個(gè)文章还惠，介紹一下具體使用Prefetch和Preload的優(yōu)化效果吧饲握。
P.S. 參考
- https://w3c.github.io/resource-hints/
- IE10 now supports LINK REL=dns-prefetch. In IE9, we only would perform DNS prefetch for LINK REL=prefetch as the dns-prefetch token was not yet defined. (see https://blogs.msdn.microsoft.com/ieinternals/2012/03/01/internet-explorer-10-consumer-preview-minor-changes-list/)
