在現代web應用程式中,前端**充斥著大量的ajax請求,如果對於ajax請求可以使用瀏覽器快取,那麼可以顯著地減少網路請求,提高程式響應速度。
1. ajax request
使用jquery框架可以很方便的進行ajax請求,示例**如下:
1非常簡單,注意其中的第4行**:cache:true,顯式的要求如果當前請求有快取的話,直接使用快取。如果該屬性設定為 false,則每次都會向伺服器請求,jquery的comments如下:$.ajax(
7 });
前端的工作也就這麼多了,這樣的話ajax請求就可以利用瀏覽器快取了嗎?
繼續看。
2. http 協議
http協議的header部分定義了關於客戶端是否應該做cache,以及如何做cache。具體參見http header field definitions 的 14.9 cache-control 和 14.21 expires。這裡簡單說一下:
cache-control
cache-control用於控制http快取(在http/1.0中可能部分沒實現,僅僅實現了pragma: no-cache)
資料報中的格式:
cache-control: cache-directive
cache-directive可以為以下:
request時用到:
| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response時用到:
| "public"
| "private" [ "=" field-name ]
| "no-cache" [ "=" field-name ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"
說明:-public 指示響應可被任何快取區快取。
-private 指示對於單個使用者的整個或部分響應訊息,不能被共享快取處理。這允許伺服器僅僅描述當使用者的部分響應訊息,此響應訊息對於其他使用者的請求無效。
-no-cache 指示請求或響應訊息不能快取(http/1.0用pragma的no-cache替換)
-no-store 用於防止重要的資訊被無意的發布。在請求訊息中傳送將使得請求和響應訊息都不使用快取。
-max-age 指示客戶端可以接收生存期不大於指定時間(以秒為單位)的響應。
-min-fresh 指示客戶端可以接收響應時間小於當前時間加上指定時間的響應。
-max-stale 指示客戶端可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值,那麼客戶端可以
接收超出超時期指定值之內的響應訊息。
expires
expires 表示cache的有效時間,允許客戶端在這個時間之前不去發請求,等同max-age的效果。但是如果同時存在,則被cache-control的max-age覆蓋。
格式:expires = "expires" ":" http-date
示例:expires: thu, 01 dec 1994 16:00:00 gmt
last-modified
last-modified用gmt格式表明了文件的最後修改時間,客戶端第二次請求此url時,會在頭部加入乙個屬性,詢問該時間之後檔案是否有被修改過。如果伺服器端的檔案沒有被修改過,則返回狀態是304,內容為空,這樣就節省了傳輸資料量。
3. 我的問題
這幾天在做web前端的時候,發現客戶端的每次ajax都會從伺服器端請求資料,而這些資料的即時性沒有那麼高,沒必要每次都請求。
在顯式的給ajax加上cache為true後,發現問題依舊。於是懷疑是服務端的問題,服務端使用 jersey 搭建了基於restful的服務,**片段如下:
@get新增cache控制後,進行測試,一切ok。public
response getproducts()
最後的**如下:
@get以上只是示例**,還可以進行更精細的控制,例如使用cachecontrol、last-modified等等。public
response getproducts()
前端效能優化 快取優化
控制瀏覽器強快取主要靠兩個響應頭部欄位來實現 expires和cache control,瀏覽器在訪問靜態資源時,會首先判斷該資源是否做了強快取。如果發現是強快取並且快取還在有效期內,那就不會去傳送http請求,而直接使用本地的快取 這個快取可能來自於記憶體,也可能來自本地磁碟空間 其中expire...
PHP 效能 優化 快取
在php中有的時候為了減少資料庫的訪問,常把有些資料內容以檔案快取的方式快取到磁碟上。這是一種不錯的方法,從某種角度來看。但是這種問題有一些特別需要注意的弊病,php是以 的方式快取物件,乙個物件如果有6個屬性,你快取了20條資料,那麼你的快取頁面大概會有200行的 有的時候在某些頁面連續快取幾個表...
web前端效能優化 快取
雅虎的16條優化準則,作為前端開發工程師,都是耳熟能詳,信手拈來。但很多時候也能難完全的做得到,一些準則跟工程原則是衝突的,難以落實起來。js檔案放尾部,css檔案放頭部等,這些基本的優化點還是可以做到,但是有時候遇到網速慢的情況,會出現一段時間的白屏,從使用者體驗的角度來說,還是有提公升的空間。根...