效能優化 ajax快取

2021-07-11 05:10:32 字數 2441 閱讀 6445

在現代web應用程式中,前端**充斥著大量的ajax請求,如果對於ajax請求可以使用瀏覽器快取,那麼可以顯著地減少網路請求,提高程式響應速度。

1. ajax request

使用jquery框架可以很方便的進行ajax請求,示例**如下:

1

$.ajax(

7 });

非常簡單,注意其中的第4行**:cache:true,顯式的要求如果當前請求有快取的話,直接使用快取。如果該屬性設定為 false,則每次都會向伺服器請求,jquery的comments如下:

前端的工作也就這麼多了,這樣的話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

public

response getproducts()

新增cache控制後,進行測試,一切ok。

最後的**如下:

@get

public

response getproducts()

以上只是示例**,還可以進行更精細的控制,例如使用cachecontrol、last-modified等等。

前端效能優化 快取優化

控制瀏覽器強快取主要靠兩個響應頭部欄位來實現 expires和cache control,瀏覽器在訪問靜態資源時,會首先判斷該資源是否做了強快取。如果發現是強快取並且快取還在有效期內,那就不會去傳送http請求,而直接使用本地的快取 這個快取可能來自於記憶體,也可能來自本地磁碟空間 其中expire...

PHP 效能 優化 快取

在php中有的時候為了減少資料庫的訪問,常把有些資料內容以檔案快取的方式快取到磁碟上。這是一種不錯的方法,從某種角度來看。但是這種問題有一些特別需要注意的弊病,php是以 的方式快取物件,乙個物件如果有6個屬性,你快取了20條資料,那麼你的快取頁面大概會有200行的 有的時候在某些頁面連續快取幾個表...

web前端效能優化 快取

雅虎的16條優化準則,作為前端開發工程師,都是耳熟能詳,信手拈來。但很多時候也能難完全的做得到,一些準則跟工程原則是衝突的,難以落實起來。js檔案放尾部,css檔案放頭部等,這些基本的優化點還是可以做到,但是有時候遇到網速慢的情況,會出現一段時間的白屏,從使用者體驗的角度來說,還是有提公升的空間。根...