1. 程式人生 > >HTML5中的prefetch預載入功能初探

HTML5中的prefetch預載入功能初探

 在HTML5中,有個很有用但常被忽略的特性,就是預先載入(prefetch),它的原理是:
利用瀏覽器的空閒時間去先下載使用者指定需要的內容,然後快取起來,這樣使用者下次載入時,就直接從快取中取出來,效率就快了.
  目前,只有firefox和chrome支援這兩個特性,chrome是在version 13後開始支援的,
safri和ie依然不支援.
  舉個例子說明:比如要預先載入某個頁面,可以這樣:
<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->
但如果是google的話,要用另外的一個名稱,即:
<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->
  即使在不支援的瀏覽器,用了這個特性其實是不會出錯的,只不過瀏覽器解析不到而已,
所以,如果你感覺能有辦法預先預測到使用者期望點的頁面(比如使用者看最新的受歡迎的熱圖,他
可能看了第一頁後,會繼續看下一頁,這個時候就可以用預先載入這個特性了).比如
  <link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">
  而單獨取一張圖片也是可以的,比如:
   <link rel="prefetch" href="/images/test.jpg"/>