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