瀏覽器端的九大快取

2022-07-09 06:45:11 字數 2635 閱讀 6363

http快取是基於http協議的瀏覽器檔案級快取機制。即針對檔案的重複請求情況下,瀏覽器可以根據協議頭判斷從伺服器端請求檔案還是從本地讀取檔案,chrome控制台下的network即展示的是瀏覽器的http檔案級快取。以下是瀏覽器快取的整個機制流程。主要是針對重複的http請求,在有快取的情況下判斷過程主要分3步:

如果通過etag和last-modified判斷,即使返回304有至少有一次http請求,只不過返回的是304的返回內容,而不是檔案內容。所以合理設計實現expires引數可以減少較多的瀏覽器請求。

websql這種方式只有較新的chrome瀏覽器支援,並以乙個獨立規範形式出現,主要有以下特點:

websql api主要包含三個核心方法:

opendatabase : 這個方法使用現有資料庫或建立新資料庫建立資料庫物件。

transaction : 這個方法允許我們根據情況控制事務提交或回滾。

executesql : 這個方法用於執行真實的sql查詢。

opendatabase方法可以開啟已經存在的資料庫,不存在則建立:

var db = opendatabase('mydatabase', '2.0', my db',2*1024); 

opendatabasek中五個引數分別為:資料庫名、版本號、描述、資料庫大小、建立**。建立**沒有也可以建立資料庫。

database.transaction() 函式用來查詢,executesql()用於執行sql語句。

indexeddb 是乙個為了能夠在客戶端儲存可觀數量的結構化資料,並且在這些資料上使用索引進行高效能檢索的 api。雖然 dom 儲存,對於儲存少量資料是非常有用的,但是它對大量結構化資料的儲存就顯得力不從心了。indexeddb 則提供了這樣的乙個解決方案。

indexeddb 分別為同步和非同步訪問提供了單獨的 api。同步 api 本來是要用於僅供 web workers 內部使用,但是還沒有被任何瀏覽器所實現。非同步 api 在 web workers 內部和外部都可以使用,另外瀏覽器可能對indexdb有50m大小的限制,一般使用者儲存大量使用者資料並要求資料之間有搜尋需要的場景。

cookie(或者cookies),指一般**為了辨別使用者身份、進行session跟蹤而儲存在使用者本地終端上的資料(通常經過加密)。cookie一般通過http請求中在頭部一起傳送到伺服器端。一條cookie記錄主要由鍵、值、域、過期時間、大小組成,一般使用者儲存使用者的認證資訊。cookie最大長度和網域名稱個數由不同瀏覽器決定,具體如下:

瀏覽器 支援網域名稱個數 最大長度 ie7以上 50個 4095b firefox 50個 4097b opera 30個 4096b safari/webkit 無限制 4097b

不同網域名稱之間的cookie資訊是獨立的,如果需要設定共享可以在伺服器端設定cookie的path和domain來實現共享。瀏覽器端也可以通過document.cookie來獲取cookie,並通過js瀏覽器端也可以方便地讀取/設定cookie的值。

localstorage是html5的一種新的本地快取方案,目前用的比較多,一般用來儲存ajax返回的資料,加快下次頁面開啟時的渲染速度。

瀏覽器 最大長度 ie9以上 5m firefox 8以上 5.24m opera 2m safari/webkit 2.6m //localstorage核心api: localstorage.setitem(key, value) //設定記錄 localstorage.getitem(key) //獲取記錄 localstorage.removeitem(key) //刪除該網域名稱下單條記錄 localstorage.clear() //刪除該網域名稱下所有記錄 

值得注意的是,localstorage大小有限制,不適合存放過多的資料,如果資料存放超過最大限制會報錯,並移除最先儲存的資料。

sessionstorage和localstorage類似,但是瀏覽器關閉則會全部刪除,api和localstorage相同,實際專案中使用較少。

使用快取介面可為您的應用帶來以下三個優勢:

資源搜尋**大全

廣州vi設計公司

cachestorage是在serviceworker的規範中定義的。cachestorage 可以儲存每個serverworker申明的cache物件,cachestorage有open、match、has、delete、keys五個核心方法,可以對cache物件的不同匹配進行不同的響應。

cachestorage.has():如果包含cache物件,則返回乙個promise物件。

cachestorage.open():開啟乙個cache物件,則返回乙個promise物件。

cachestorage.delete():刪除cache物件,成功則返回乙個promise物件,否則返回false。

cachestorage.keys():含有keys中字串的任意乙個,則返回乙個promise物件。

cachestorage.delete():匹配key中含有該字串的cache物件,返回乙個promise物件。

這種方式基本不用,這一方法主要基於flash有讀寫瀏覽器端本地目錄的功能,同時也可以向js提供呼叫的api,則頁面可以通過js呼叫flash去讀寫特定的磁碟目錄,達到本地資料快取的目的。

Filter的瀏覽器端快取設定

前段時間做了個filter,對jar包中的靜態資源進行處理。做了伺服器端快取,雖然檔案不用每次都提取了,但是還是需要每次通過網路將頁面傳送給瀏覽器。最好是做到瀏覽器端快取。參考了struts2的org.apache.struts2.dispatcher.defaultstaticcontentloa...

瀏覽器端的快取localStorage應用

伺服器傳輸大量資訊到客戶端 瀏覽器 即使有了伺服器端快取,使用者每次開啟web頁面都需要請求伺服器,傳輸大量資訊,然後渲染。主要存在網路傳輸成本,如果我們將大量的不太會變動的字典資訊儲存於localstorage,就能實現高效能的操作。由於localstorage是永久的,自身沒有過期時間,這對我們...

快取 瀏覽器快取

瀏覽器快取 brower caching 是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁碟載入文件 1 瀏覽器第一次請求時,會發出一組 http 頭,用來指導瀏覽器如何進行快取。伺服器規定乙個資源是否要進行快取,主要由響應頭中的expires...