當前位置:首頁 » 硬碟大全 » 瀏覽器怎麼實現緩存
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

瀏覽器怎麼實現緩存

發布時間: 2023-06-15 09:27:22

⑴ 如何有效利用瀏覽器本地緩存

資源在瀏覽器端的本地緩存可以通過Expires和Last-Modified返回頭信息進行有效控制。
1)Expires告訴瀏覽器在該指定過期時間前再次訪問同一URL時,直接從本地緩存讀取,無需再向伺服器發起http請求;
優點是:瀏覽器直接讀取緩存信息無需發起http請求。
缺點是:當用戶按F5或Ctl+F5刷新頁面時瀏覽器會再次發起http請求。
2)當伺服器返回設置了Last-Modified頭,下次發起同一URL的請求時,請求頭會自動包含If-Modified-Since頭信息,伺服器對靜態內容會根據該信息跟文件的最後修改時間做比較,如果最後修改時間不大於If-Modified-Since頭信息,則返回304。告訴瀏覽器請求內容未更新可直接使用本地緩存。(注意:只對靜態內容有效,如js/css/image/html等,不包括動態內容,如JSP)
優點:無論用戶行為如何都有效;
缺點:仍需向伺服器發起一次http請求;

對IE來說,本地緩存一般是在這個位置:
C:\Documents and Settings\<user name>\Local Settings\Temporary Internet Files

下面我用一個圖片緩存的例子來說明,如何結合這兩個參數來有效利用本地緩存,例子中圖片存儲在一個分布式文件系統,需要通過特定API才能獲取而非直接存儲在伺服器上靜態文件:

response.setContentType("image/jpeg");

response.setHeader("Cache-Control", "public");
response.setHeader("Pragma", "Pragma");
//本地緩存10分鍾過期
response.setDateHeader("Expires", System.currentTimeMillis()+10*60*1000);
//設置Last-Modified
response.setDateHeader("Last-Modified", System.currentTimeMillis());
//判斷請求中的If-Modified-Since頭信息
if(request.getHeader("If-Modified-Since") == null){
//首次訪問或者用戶按Ctl+F5,從文件系統重新讀取圖片
//...get file from dfs
} else {
//返回304,告訴瀏覽器使用本地緩存
response.setStatus(HttpServletResponse.SC_NOT_MODIFIED);
}

這種做法的一個缺點就是假設用戶在第一次圖片下載過程中網路有異常,下載的照片不完整,那用戶在刷新,甚至重啟瀏覽器後還是無法獲取完整的照片,可能會影響極小部分用戶的體驗,雖然可以通過ctl+f5忽略Last-Modified或者清空緩存重新下載照片但是大部分普通用戶可能不了解這些技巧。

參考資料:
http://longrujun.name/index.php/2009/03/04/etag%E5%92%8Cexpires/

⑵ 關於瀏覽器緩存

首先瀏覽器緩存分為 內存緩存 文件緩存
內存緩存是瀏覽器自己控制的,不受 Cache-Control 影響,跟計算機內存空間大小有關,並且關閉瀏覽器就會消失。

文件緩存 就是我們常說的瀏覽器緩存。
文件緩存分為2種: 強制緩存 協商緩存

強制緩存 就是通過Header上配置Cache-Control:public,max-age=300這種形式實現的,Cache-Control可以客戶端在請求Header配置,也可以服務端在響應Header配置。

強制緩存 比較適合用在變化頻率比較低的文件上,比如圖片,js,css都可以,通常我們都使用這種緩存再配合文件hash後綴實現緩存文件的即時更新。

協商緩存 是一種服務端控制文件緩存的策略,機制是服務端會根據最新更改時間和文件標識判斷響應的時候是否要返回內容。雖然每次都會向服務端發起請求,但是如果服務端確定緩存,會返回很少響應內容。
這種方式比較適合需要頻繁更新的文件,需要配合Cache-Control:no-cache阻止強制緩存。另外html不要配置強制緩存,通常我們請求的html文件地址不會加hash。

協商緩存 主要通過2組Header標簽讓客戶端與服務端確認來達成:首先服務端在響應的時候會加上 Last-Modified Etag ,前者表示文件最後更新時間,後者表示文件唯一標識;然後客戶端再次請求的時候會帶上 If-Modified-Since If-None-Match ,值分別跟服務端的 Last-Modified Etag 一致。

參考:
瀏覽器緩存

⑶ 瀏覽器緩存和伺服器緩存

一、瀏覽器緩存

瀏覽器緩存即http緩存;瀏覽器緩存根據是否需要向伺服器重新發起HTTP請求將緩存過程分為兩個部分,分別是 強制緩存 和 協商緩存  。

瀏覽器第一次請求資源的時候伺服器會告訴客戶端是否應該緩存資源,根據響應報文中HTTP頭的緩存標識,決定是否緩存結果,是則將請求結果和緩存標識存入瀏覽器緩存中。如下圖:

1.強制緩存 :瀏覽器會對緩存進行查找,並根據一定的規則確定是否使用緩存。

強制緩存的緩存規則?

HTTP/1.0 Expires 這個欄位是絕對時間,比如2018年6月30日12:30,然後在這個時間點之前的請求都會使用瀏覽器緩存,除非清除了緩存。

這個欄位的缺點就是只會同步客戶端的時間,這就有可能修改客戶端時間導致緩存失效。

HTTP/1.1 cache-Control       這個是1.1的時候替換Expires的,它會有幾種取值:

public :所有內容都將被緩存(客戶端和代理伺服器都可緩存)

private :所有內容只有客戶端可以緩存, Cache-Control的默認取值

no-cache :客戶端緩存內容,但是是否使用緩存則需要經過協商緩存來驗證決定

no-store :所有內容都不會被緩存,即不使用強制緩存,也不使用協商緩存

max-age=xxx (xxx is numeric) :緩存內容將在xxx秒後失效

比如max-age=500,則在500秒內再次請求會直接只用緩存。

優先性:cache-Control > Expires

如果同時存在,cache-Control會覆蓋Expires。

這個欄位的缺點就是:

如果資源更新的速度是秒以下單位,那麼該緩存是不能被使用的,因為它的時間單位最低是秒。

如果文件是通過伺服器動態生成的,那麼該方法的更新時間永遠是生成的時間,盡管文件可能沒有變化,所以起不到緩存的作用。

上圖中瀏覽器緩存中存在該資源的緩存結果,並且沒有失效,就會直接使用緩存的內容。

上圖中瀏覽器緩存中沒有該資源的緩存結果和標識,就會直接向伺服器發起HTTP請求。

2.協商緩存: 瀏覽器的強制緩存失效後(時間過期),瀏覽器攜帶緩存標識請求伺服器,由伺服器決定是否使用緩存。

伺服器決定的規則?

控制協商緩存的欄位有 Last-Modified / If-Modified-Since 和 Etag / If-None-Match。

①Last-Modified 是伺服器返回給瀏覽器的本資源的最後修改時間。

當下次再次請求的時候,瀏覽器會在請求頭中帶 If-Modified-Since ,即上次請求下來的 Last-Modified 的值,

然後伺服器會用這個值和該資源最後修改的時間比較,如果最後修改時間大於這個值,則會重新請求該資源,返回狀態碼200。

如果這個值和最後修改時間相等,則會返回304,告訴瀏覽器繼續使用緩存。

② Etag 是伺服器返回的一個hash值。

當下次再次請求的時候,瀏覽器會在請求頭中帶 If-None-Match ,即上次請求下來的 Etag 值,

然後伺服器會用這個值和該資源在伺服器的 Etag 值比較,如果一致則會返回304,繼續使用緩存;如果不一致,則會重新請求,返回200。

二、伺服器緩存

上面是一個簡單的流程圖:

用戶1訪問A頁面,伺服器解析A頁面返回給用戶1,同時在伺服器內存上做一定映射,把A頁面緩存在硬碟上面

用戶2訪問A頁面,伺服器直接根據內存上的映射找到對應的頁面緩存,直接返回給用戶2,這樣就減少了伺服器對同一頁面的重復解析

伺服器緩存和瀏覽器緩存的區別:

伺服器緩存是把頁面緩存到伺服器上的硬碟里,而瀏覽器緩存是把頁面緩存到用戶自己的電腦里

Nginx伺服器 

Nginx是一個高性能的HTTP和反向代理伺服器。具有非常多的優越性:

在連接高並發的情況下,Nginx是Apache伺服器不錯的替代品,Nginx在美國是做虛擬主機生意的老闆們經常選擇的軟體平台之一。

Nginx提供了expires、etag、if-modified-since指令來實現瀏覽器緩存控制。

nginx -s reload#重新載入配置文件 

nginx -s reopen#重新打開log文件 

nginx -s stop#快速關閉nginx服務 

nginx -s quit #優雅的關閉nginx服務,等待工作進程處理完所有的請求

Nginx設置靜態文件的緩存過期時間 

location ~.*\.(js|css|html|png|jpg)$ {

  expires 3d;

}

 expires    3d;//表示緩存3天

expires    3h;//表示緩存3小時

expires    max;//表示緩存10年

expires    -1;//表示永遠過期。

如果設置為-1在js、css等靜態文件在沒有修改的情況下返回的是http 304,如果修改返回http 200

對於靜態資源會自動添加ETag,可以通過添加etag off指令禁止生成ETag。如果是靜態文件,那麼Last-Modified值為文件的最後修改時間。

在開發調試web的時候,經常會碰到因瀏覽器緩存(cache)而經常要去清空緩存或者強制刷新來測試的煩惱,提供下apache不緩存配置和nginx不緩存配置的設置。在常用的緩存設置裡面有兩種方式,都是使用add_header來設置:分別為Cache-Control和Pragma。

location ~ .*\.(css|js|swf|php|htm|html )$ {

  add_header Cache-Control no-store;

  add_header Pragma no-cache;

  }

nginx gzip壓縮

使用 gzip 壓縮可以降低網站帶寬消耗,同時提升訪問速度。

主要在nginx服務端將頁面進行壓縮,然後在瀏覽器端進行解壓和解析,

目前大多數流行的瀏覽器都遲滯gzip格式的壓縮,所以不用擔心。

默認情況下,Nginx的gzip壓縮是關閉的,同時,Nginx默認只對text/html進行壓縮

gzip on;

ersio #開啟gzip壓縮輸出

gzip_http_vn 1.0 ;#默認1.1

#其中的gzip_http_version的設置,它的默認值是1.1,就是說對HTTP/1.1協議的請求才會進行gzip壓縮

#如果我們使用了proxy_pass進行反向代理,那麼nginx和後端的upstream server之間是用HTTP/1.0協議通信的。

gzip_vary on ;

#和http頭有關系,加個vary頭,給代理伺服器用的,有的瀏覽器支持壓縮,有的不支持,

#所以避免浪費不支持的也壓縮,所以根據客戶端的HTTP頭來判斷,是否需要壓縮

gzip_comp_level 6;

#設置gzip壓縮等級,等級越底壓縮速度越快文件壓縮比越小,反之速度越慢文件壓縮比越大 1-9

gzip_proxied any;

#Ngnix作為反向代理的時候啟用

#expample:gzip_proxied no-cache;

# off – 關閉所有的代理結果數據壓縮

# expired – 啟用壓縮,如果header中包含」Expires」頭信息

# no-cache – 啟用壓縮,如果header中包含」Cache-Control:no-cache」頭信息

# no-store – 啟用壓縮,如果header中包含」Cache-Control:no-store」頭信息

# private – 啟用壓縮,如果header中包含」Cache-Control:private」頭信息

# no_last_modified – 啟用壓縮,如果header中包含」Last_Modified」頭信息

# no_etag – 啟用壓縮,如果header中包含「ETag」頭信息

# auth – 啟用壓縮,如果header中包含「Authorization」頭信息

# any – 無條件壓縮所有結果數據

gzip_types text/html ;#壓縮的文件類型

#設置需要壓縮的MIME類型,非設置值不進行壓縮

#param:text/html|application/x-javascript|text/css|application/xml

gzip_buffers 16 8k; #設置gzip申請內存的大小,其作用是按塊大小的倍數申請內存空間設置gzip申請內存的大小,其作用是按塊大小的倍數申請內存空間

#設置gzip申請內存的大小,其作用是按塊大小的倍數申請內存空間

# param1:int 增加的倍數

# param2:int(k) 後面單位是k

# example: gzip_buffers 4 8k;

# Disable gzip for certain browsers.

gzip_disable 「MSIE [1-6].(?!.*SV1)」; #ie6不支持gzip,需要禁用掉ie6

⑷ 怎樣把瀏覽器里的視頻緩存

瀏覽器會自動保存視頻緩存,點開緩存又可以播放或刪除視頻。在電腦中找到緩存的視頻,可以重復觀看,節省流量,也可以刪除它,節約電腦存儲空間。下面介紹通過「Internet選項」和「選項」兩種比較常用的辦法。

  • ⑸ 瀏覽器緩存原理簡述

    緩存文件存儲方式有2種:內存和硬碟。為了提高文件讀取速度,瀏覽器優先讀內存中的緩存文件(如果存在的話)。

    按照本地緩存階段和協商緩存階段分類:

    緩存的策略由http消息頭Cache-Control確定,以下為各個值對應的效果:
    Cache-Control:public :所有內容都將被緩存(客戶端和代理伺服器都可緩存)
    Cache-Control:private :所有內容只有客戶端可以緩存
    Cache-Control:no-cache :默認值。客戶端緩存內容,但是是否使用緩存則需要經過協商緩存來驗證決定
    Cache-Control:no-store :所有內容都不會被緩存,即不使用強制緩存,也不使用協商緩存
    Cache-Control:max-age=xxx (xxx is numeric) :緩存內容將在xxx秒後失效

    HTTP1.0 的特性,標識該資源過期的時間點,它是一個絕對值,格林威治時間(Greenwich Mean Time, GMT),即在這個時間點之後,緩存的資源過期; 優先順序:Cache-Control 優先順序高於 Expires ,為了兼容,通常兩個頭部同時設置;瀏覽器默認行為:其實就算 Response Header 中沒有設置 Cache-Control 和 Expires,瀏覽器仍然會緩存某些資源,這是瀏覽器的默認行為,是為了提升性能進行的優化,每個瀏覽器的行為可能不一致,有些瀏覽器甚至沒有這樣的優化。

    Last-Modified (Response Header)與 If-Modified-Since (Request Header)是一對報文頭,屬於 http 1.0。

    If-Modified-Since 是一個請求首部欄位,並且只能用在 GET 或者 HEAD 請求中。Last-Modified 是一個響應首部欄位,包含伺服器認定的資源作出修改的日期及時間。當帶著 If-Modified-Since 頭訪問伺服器請求資源時,伺服器會檢查 Last-Modified,如果 Last-Modified 的時間早於或等於 If-Modified-Since 則會返回一個不帶主體的 304 響應,否則將重新返回資源。

    ETag 與 If-None-Match 是一對報文頭,屬於 http 1.1。

    ETag 是一個響應首部欄位,它是根據實體內容生成的一段 hash 字元串,標識資源的狀態,由服務端產生。If-None-Match 是一個條件式的請求首部。如果請求資源時在請求首部加上這個欄位,值為之前伺服器端返回的資源上的 ETag,則當且僅當伺服器上沒有任何資源的 ETag 屬性值與這個首部中列出的時候,伺服器才會返回帶有所請求資源實體的 200 響應,否則伺服器會返回不帶實體的 304 響應。

    ⑹ 瀏覽器緩存的強緩存

    瀏覽器的緩存分為強緩存和協商緩存。
    1、瀏覽器在載入資源時,先根據 這個資源的一些http header 判斷它是否命中強緩存,強緩存如果命中,瀏覽器直接從自己的緩存中讀取資源, 不會發請求到伺服器 。比如某個css文件,如果瀏覽器在載入它所在的網頁時,這個css文件的緩存配置命中了強緩存,瀏覽器就直接從緩存中載入這個css,連請求都不會發送到網頁所在伺服器。
    2、當強緩存沒有命中的時候, 瀏覽器一定會發送一個請求到伺服器,通過伺服器端依據資源的另外一些http header驗證這個資源是否命中協商緩存 ,如果協商緩存命中,伺服器會將這個請求返回,但是不會返回這個資源的數據,而是告訴客戶端可以直接從緩存中載入這個資源,於是瀏覽器就又會從自己的緩存中去載入這個資源。 強緩存與協商緩存的共同點是:如果命中,都是從客戶端緩存中載入資源,而不是從伺服器載入資源數據;區別是:強緩存不發請求到伺服器,協商緩存會發請求到伺服器。
    3、當協商緩存也沒有命中的時候,瀏覽器直接從伺服器載入資源數據。

    這里僅介紹一下強緩存的實現:
    強緩存是利用Expires或者Cache-Control這兩個http response header實現的,它們都用來表示資源在客戶端緩存的有效期。
    Expires是較老的強緩存管理header,由於它是伺服器返回的一個絕對時間,在伺服器時間與客戶端時間相差較大時,緩存管理容易出現問題,比如隨意修改下客戶端時間,就能影響緩存命中的結果。所以在http1.1的時候,提出了一個新的header,就是Cache-Control,這是一個相對時間,在配置緩存的時候,以秒為單位,用數值表示,如:Cache-Control:max-age=315360000
    這兩個header可以只啟用一個,也可以同時啟用,當response header中,Expires和Cache-Control同時存在時,Cache-Control優先順序高於Expires:

    ⑺ 瀏覽器怎麼設置緩存功能

    ,即所記的網頁多少。緩存設置里大概是緩存清理和緩存容量設置,這個可以根據你的需要進行設置。如果長時間不進行清理,可能手機會變慢。

    再解釋cookie
    指你在網頁對你輸入的文字信息的記憶,它的設置大概就是刪除和記憶方式選項,有些不想叫人知道的網頁搜索記錄,可以經過它刪除

    GSM是指二代移動通信,說白了就是2G網,我們一般使用的就是它的網路。
    GSM數據大概就是通信數據。它怎麼用???我沒明白你什麼意思?怎麼打電話?

    gprs是手機在GSM網路中的一種應用,通常稱為2.5G,是通過增加相應的功能實體和對現有的基站系統進行部分改造來實現分組交換的一種業務。用法就是開通GPRS業務,一般選擇包月使用。
    不知道我的解釋怎麼樣,但希望你明白

    ⑻ 九種瀏覽器端緩存方法知多少

    一、http緩存
      http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重復請求情況下,瀏覽器可以根據協議頭判斷從伺服器端請求文件還是從本地讀取文件,chrome控制台下的Frames即展示的是瀏覽器的http文件級緩存。以下是瀏覽器緩存的整個機制流程。主要是針對重復的http請求,在有緩存的情況下判斷過程主要分3步:
    判斷expires,如果未過期,直接讀取http緩存文件,不發http請求,否則進入下一步
    判斷是否含有etag,有則帶上if-none-match發送請求,未修改返回304,修改返回200,否則進入下一步
    判斷是否含有last-modified,有則帶上if-modified-since發送請求,無效返回200,有效返回304,否則直接向伺服器請求
      
    如果通過etag和last-modified判斷,即使返回304有至少有一次http請求,只不過返回的是304的返回內容,而不是文件內容。所以合理設計實現expires參數可以減少較多的瀏覽器請求。
    二、websql
       websql這種方式只有較新的chrome瀏覽器支持,並以一個獨立規范形式出現,主要有以下特點
    Web Sql 資料庫API 實際上不是HTML5規范的組成部分;
    在HTML5之前就已經存在了,是單獨的規范;
    它是將數據以資料庫的形式存儲在客戶端,根據需求去讀取;
    跟Storage的區別是: Storage和Cookie都是以鍵值對的形式存在的;
    Web Sql 更方便於檢索,允許sql語句查詢;
    讓瀏覽器實現小型資料庫存儲功能;
    這個資料庫是集成在瀏覽器裡面的,目前主流瀏覽器基本都已支持;
      websql API主要包含三個核心方法:
    openDatabase : 這個方法使用現有資料庫或創建新資料庫創建資料庫對象。
    transaction : 這個方法允許我們根據情況控制事務提交或回滾。
    executeSql : 這個方法用於執行真實的SQL查詢。
       openDatabase方法可以打開已經存在的資料庫,不存在則創建
    var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
      openDatabasek中五個參數分別為:資料庫名、版本號、描述、數據