采用预取（Prefetch）来加速你的网站(转)
一、DNS預(yù)取
如果你像我一樣想在網(wǎng)站上有一個(gè)Twitter小程序，還有網(wǎng)站分析，再也許一些網(wǎng)頁字體，那么你必須要鏈接到一些其它域名，這意味著你將不得不引發(fā)DNS查詢。我的建議通常是，不要還沒有先適當(dāng)?shù)目紤]性能影響就使用某個(gè)或任何一個(gè)小程序，但對(duì)于你認(rèn)為確實(shí)需要的，下面的將很有用……
因?yàn)檫@些東西都存在于其它域名，比方說這就意味著你的網(wǎng)站字體CSS將會(huì)同你自己的CSS并行下載，從某種意義上說是一種好處，但是腳本將仍會(huì)阻塞（除非它們是異步的）
事實(shí)上，這里的問題是DNS查詢牽涉到了第三方域名。幸運(yùn)的是，有一個(gè)相當(dāng)快又簡(jiǎn)單的辦法來加速這個(gè)過程：DNS預(yù)取。
DNS預(yù)取所做的恰恰就是憑證領(lǐng)餐(on the tin)，它不能被簡(jiǎn)單實(shí)現(xiàn)。比方說，如果你需要請(qǐng)求來自widget.foo.com的資源，那么你可以通過簡(jiǎn)單的在頁面的<head>里先增加下面這個(gè)來預(yù)取那個(gè)主機(jī)的DNS：
<link href="//my.domain.com" rel="dns-prefetch" /> <link href="http://my.domain.com/" rel="prefetch" /> <!– IE9+ –>那行簡(jiǎn)單的內(nèi)容將會(huì)告訴支持的瀏覽器去開始預(yù)取那個(gè)域名的DNS，這要稍稍早于它實(shí)際需要的時(shí)刻。它意味著DNS查詢過程，在瀏覽器<script>元素真正請(qǐng)求小程序的時(shí)候就已經(jīng)在進(jìn)行中了。這僅僅給瀏覽器增加了一個(gè)很小的開頭。
這種簡(jiǎn)單的鏈接元素（就是我在CSS魔法上用到的）完全后向兼容，而且不會(huì)忽略性能影響。將它看作是性能提升增強(qiáng)吧！
二、資源預(yù)取
和DNS預(yù)取一樣，也可對(duì)站點(diǎn)需要的其它資源進(jìn)行預(yù)取。為了弄清楚我們想要預(yù)取哪些資源， 首先我們需要了解瀏覽器通常會(huì)在什么時(shí)候以什么方式對(duì)資源發(fā)出請(qǐng)求。
CSS中引用的Web字體和圖片表現(xiàn)基本相同；瀏覽器在碰到需要它們的HTML時(shí)開始對(duì)它們進(jìn)行下載。就和我在前面提到那樣，瀏覽器非常聰明，這又是一個(gè)例證。想象一下，瀏覽器一看到下面的CSS聲明就開始下載其中所引用的圖片：
.page--home { background-image:url(home.jpg); } .page--about { background-image:url(about.jpg); } .page--portfolio { background-image:url(portfolio.jpg); } .page--contact { background-image:url(contact.jpg); }如果瀏覽器不是等碰到需要這些圖片的HTML再下載它們，那么訪問主頁就會(huì)立即下載所有這四個(gè)圖片。這會(huì)造成浪費(fèi)，所以瀏覽器一定會(huì)確保在需要這些圖片時(shí)才會(huì)開始下載它們。所以，這里有個(gè)問題在于，圖片下載直到很晚才會(huì)開始。
如果我們可以完全確認(rèn)某個(gè)CSS圖片肯定會(huì)在每個(gè)頁面都會(huì)用到的話，我們就可以用個(gè)小把戲讓瀏覽器早早下載好這個(gè)圖片，無需等到讓瀏覽器碰到需要使用該圖片的HTML才開始下載。想做到這一點(diǎn)也非常簡(jiǎn)單，但所用的方法可能會(huì)有點(diǎn)糙，就看你怎么弄了。
比較糙的方法和大多數(shù)笨拙的萬全之法類似，就是在每個(gè)頁面放置一個(gè)隱藏的<div>，在該div中使用帶有空的alt屬性的<img>標(biāo)簽。我在CSS Wizardry項(xiàng)目中的精靈中就是這么干的；因?yàn)槲抑?#xff0c;每個(gè)頁面都要使用該精靈，所以我就通過在HTML中對(duì)其進(jìn)行引用對(duì)它進(jìn)行預(yù)取。瀏覽器處理內(nèi)聯(lián)（inline）<img>的方式非常好，瀏覽器會(huì)早早地對(duì)它們進(jìn)行預(yù)取，所以通過讓瀏覽器將我的精靈作為HTML中的<img>進(jìn)行載入，瀏覽器就可以在使用需要精靈的CSS之前將其下載好。通過首先在我的HTML中引用該精靈（隱藏起來的），我就能夠搶先把精靈下載好。
還有第二種方法比較“優(yōu)雅”，但會(huì)讓人有些困惑。它和DNS預(yù)取的例子非常相似
<link rel="prefetch" href="sprite.png">這會(huì)顯式地告訴瀏覽器，馬上開始預(yù)取我的精靈圖片，而不要考慮在它處理CSS時(shí)可能會(huì)做的任何決定。
令人感到困惑之處在于有兩篇文章似乎有不同的觀點(diǎn)；基于來自MDN的這篇文章，貌似這種預(yù)取指令只是示意瀏覽器僅在它空閑時(shí)才有可能會(huì)對(duì)href所指的資源進(jìn)行預(yù)取。然而，與此矛盾的是，來自Planet Performance的這篇文章貌似在說，如果瀏覽器支持rel="prefetch"的話，它就一定會(huì)預(yù)取href中所指的資源，并沒有提及是否要在瀏覽器空閑時(shí)才進(jìn)行預(yù)取。我在WebKit的Inpsector中的瀑布圖中所看到的情況是后者說得是對(duì)的，但是在打開Developer Tools的情況下（薛定諤測(cè)不準(zhǔn)。。。）WebKit的表現(xiàn)及其怪異，我就觀察不到預(yù)取動(dòng)作的情況了，這也就是我說，我無法100%保證我說的是對(duì)的。要是誰能解釋清楚這方面的情況，我將不勝感激。
我在前面說過，字體和圖片表現(xiàn)非常相似，上面所說的規(guī)則同樣也適用于字體文件，但你無法使用隱藏的<div>載入字體文件（你需要使用預(yù)取link）。
<link rel="prefetch" href="webfont.woff">所以，基本可以這么說，我們這里所作的一切，只能算是讓瀏覽器提前下載資源的“小把戲”而已，耍了小把戲之后，在瀏覽器碰到要使用CSS的時(shí)候，其中所引用的資源就早已下載好了（或者至少已經(jīng)在下載中了）。?漂亮極了！
三、頁面預(yù)取
和資源預(yù)取非常類似，我們也可以進(jìn)行頁面預(yù)取。該功能是firefox首先實(shí)現(xiàn)的。
<linkrel="prefetch"href="/my-next-page.htm">頁面預(yù)取的時(shí)候?yàn)g覽器不但下載新的頁面，而且下載該新頁面所需的所有資源，并同時(shí)開始渲染該新頁面（渲染過程對(duì)用戶不可見），以確保整個(gè)頁面包括新頁面對(duì)用戶是連續(xù)性呈現(xiàn)。
對(duì)于Chrome，使用
<linkrel="prerender"href="http://mydomain.com/my-next-page.htm">頁面預(yù)取技術(shù)目前還是有爭(zhēng)議的，很多人認(rèn)為其中最大風(fēng)險(xiǎn)是，在轉(zhuǎn)到下一個(gè)頁面之前進(jìn)行渲染的對(duì)該新頁面是否信任的問題。
轉(zhuǎn)載翻譯自：Speed Up Your Site Using Prefetching
轉(zhuǎn)載于:https://www.cnblogs.com/JoannaQ/p/3157881.html
總結(jié)
以上是生活随笔為你收集整理的采用预取（Prefetch）来加速你的网站(转)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【转】NuGet学习笔记(2)——使用图
- 下一篇： 运营一个网站，新增加一个功能，容易忽视哪