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