預(yù)取的概念相當(dāng)簡單。我們通常能知道在瀏覽器運(yùn)行之前可能需要的資源。預(yù)取技術(shù)包括將可能需要的頁面或資源信息傳達(dá)給瀏覽器以便其提前下載，或者在瀏覽器調(diào)用之前將資源下載到瀏覽器緩存里，這樣請求和下載對象這些系統(tǒng)開銷可以優(yōu)先得到處理或以一個(gè)無阻礙的方式完成。
預(yù)取內(nèi)容有很多方法，這里有三個(gè)簡單的選擇。
DNS預(yù)解析
DNS是實(shí)現(xiàn)人類可讀的域名（mysite.com）到計(jì)算機(jī)可讀的IP（123.123.123.123）的映射的協(xié)議。DNS解析非常快，每次都在100毫秒內(nèi)，它必須在任何請求發(fā)送到服務(wù)器之前進(jìn)行，這就會引起一個(gè)對頁面整體加載時(shí)間有實(shí)際影響的級聯(lián)反應(yīng)。我們都知道其他一些域名在隨后的頁面或者用戶會話需要加載資源，例如靜態(tài)內(nèi)容的二級域名（images.mydomain.com）或第三方內(nèi)容的域名。有一些瀏覽器支持使用meta標(biāo)簽來識別需要被解析的域名，這樣一來瀏覽器可以提前解析它們。通過使用下列的標(biāo)簽做到這一點(diǎn)是十分簡單的。
<link rel="dns-prefetch" />
<link href=http://my.domain.com/ rel="prefetch" /> <!– IE9+ –>
添加這一標(biāo)簽使得瀏覽器可以提前解析DNS，而不是等到資源請求之后才開始解析。對網(wǎng)站上游客可能會訪問的其他頁面進(jìn)行DNS預(yù)取可能是最有價(jià)值的一項(xiàng)技術(shù)。Chrome、Firefox以及9.0以上版本的IE瀏覽器都支持這一特性。
盡管減少幾百毫秒看起來微不足道，但匯總起來之后就是一個(gè)值得注意的收益。這也是一個(gè)安全的優(yōu)化方法并且易于實(shí)現(xiàn)。我很好奇這種技術(shù)的使用率，于是我訪問了Alexa網(wǎng)站上排名前十萬的網(wǎng)站。事實(shí)表明只有552個(gè)網(wǎng)站（0.55%）目前正在使用DNS預(yù)解析技術(shù)。這只是成功的一小步，還有更多的網(wǎng)站需利用這種技術(shù)。
資源預(yù)取
現(xiàn)在，圖像占據(jù)了很多主流網(wǎng)站總字節(jié)數(shù)的一大部分。通常，發(fā)出請求和下載圖像這兩個(gè)系統(tǒng)開銷對性能有顯著的影響。不過許多情況下，網(wǎng)站開發(fā)人員都知道在什么情況下圖像需要不被瀏覽器過早地檢測到，例如通過ajax請求或其他用戶在頁面操作而加載的圖像。資源預(yù)取是提前將圖像、腳本、樣式表或其他資源加載進(jìn)瀏覽器。這經(jīng)常用來處理圖像，但也可以處理其他可放在瀏覽器緩存的資源。
我在這里所提到的三種技術(shù)目前為止都是最經(jīng)典和最常用的。可惜我不能給出一個(gè)具體的使用數(shù)，因?yàn)橥ㄟ^我在訪問Alexa時(shí)檢測到有太多方法可以實(shí)現(xiàn)。然而，許多網(wǎng)站沒有正確利用這種技術(shù)，甚至只預(yù)加載一些會引起巨大的用戶體驗(yàn)差異的圖像。
頁面預(yù)取/預(yù)渲染
頁面預(yù)取和資源預(yù)取十分相似,除了我們實(shí)際上讓新頁面提前自行加載這一點(diǎn)之外。Firefox是第一個(gè)使用此技術(shù)的瀏覽器。通過使用下列的標(biāo)簽，你可以提示瀏覽器預(yù)取某個(gè)頁面（或個(gè)別資源）。
<linkrel="prefetch" href="/my-next-page.htm">
在預(yù)渲染的情況下，瀏覽器不僅下載頁面還下載頁面所需的資源。它也開始在內(nèi)存里渲染頁面（用戶不可見），如此一來當(dāng)頁面請求發(fā)出時(shí)，瀏覽器就能將頁面瞬時(shí)呈現(xiàn)給用戶。Chrome是首個(gè)采用這種技術(shù)的瀏覽器。通過使用下列的標(biāo)簽，你可以提示瀏覽器預(yù)渲染某個(gè)頁面。
<linkrel="prerender"href=http://mydomain.com/my-next-page.htm>
目前為止，與另外兩種技術(shù)相比，這一技術(shù)目是風(fēng)險(xiǎn)最高并最飽受爭議的。只有在十分確定用戶接下來將瀏覽哪一個(gè)頁面的情況下才能進(jìn)行預(yù)渲染。谷歌在這方面是最有名的例子，在有十足把握的情況下它將會預(yù)渲染第一個(gè)結(jié)果頁。在我所訪問Alexa排名前十萬的網(wǎng)站中，我僅發(fā)現(xiàn)有95個(gè)這樣做的網(wǎng)站。盡管這一技術(shù)顯然不是針對每一個(gè)用例，但我認(rèn)為更多的網(wǎng)站應(yīng)充分利用這種技術(shù)以便改善用戶體驗(yàn)。
缺點(diǎn)
通常情況下，預(yù)取往往是一個(gè)有爭議的話題。很多人認(rèn)為預(yù)取不僅效率低下，還導(dǎo)致了帶寬的浪費(fèi)。它還使用了不必要的客戶端資源（特別是在移動(dòng)設(shè)備上）。另外值得一提的是，在某些情況下，由于沒有明顯的方式去辨別是用戶訪問頁面（并瀏覽它）還是瀏覽器在用戶不知情的情況下預(yù)渲染的，預(yù)取或預(yù)渲染頁面會對分析和日志跟蹤造成不良影響。
結(jié)論
不管所有這些警告，預(yù)取可以算得上是一個(gè)巨大的勝利。我們永遠(yuǎn)不必追求最快，但通過將更多的數(shù)據(jù)儲存在緩存里這一技術(shù)，我們能更接近這一目標(biāo)。通過在用戶操作之前發(fā)起這些巨量的請求，即使是用最慢的網(wǎng)絡(luò)訪問最慢的網(wǎng)站，我們也能大大提高它的感知性能。如果你尚未確定這樣做，在你的網(wǎng)站使用這些技術(shù)是值得一試的。結(jié)果會有所不同，請確保使用真實(shí)的用戶測量（如Torbit這一網(wǎng)站）找出你的網(wǎng)站還有多少改善預(yù)取的空間。
本文轉(zhuǎn)載自：http://automationqa.com/forum.php?mod=viewthread&tid=1710