整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、什么是應(yīng)用程序緩存:
HTML5引入了應(yīng)用程序緩存，這意味著web應(yīng)用可進(jìn)行緩存，并可在沒有因特網(wǎng)
連接時(shí)進(jìn)行訪問
2、應(yīng)用緩存的優(yōu)勢:
1): 離線瀏覽-用戶可在應(yīng)用離線時(shí)使用它們
2):速度-已緩存資源加載得更快
3):減少服務(wù)器負(fù)載-瀏覽器將只從服務(wù)器下載更新過或更改過的資源
3、實(shí)現(xiàn)緩存:
如需啟用應(yīng)用程序緩存，請?jiān)谖臋n的<html>標(biāo)簽中包含manifest屬性
manifest文件的建議的文件擴(kuò)展名是:’.appcache'"
4、Manifest 文件:
1): CACHE MANIFEST-在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
2): NETWORK -在此標(biāo)題下列出的文件需要與服務(wù)器的連接， 且不會被緩存
3): FALLBACK -在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面(比如
404頁面)
具體使用：1、在html頁面的html標(biāo)簽里面添加.appcache 的文件
2、創(chuàng)建對應(yīng)的.appcache文件
3、在緩存文件里面寫上 CACHE MANIFEST 注意是大寫哦
接著寫上CACHE:../db.html
db.js
db.html頁面里面：<html manifest="js/db.appcache">db.appcache文件創(chuàng)建在js文件夾里面，創(chuàng)建的時(shí)候，選擇創(chuàng)建文件即可
頁面加上緩存后，本地打開服務(wù)器html5頁面速度會變快，或者服務(wù)器沒有連接上，本地也可以顯示頁面數(shù)據(jù)
ocalStorage（本地存儲）,可以長期存儲數(shù)據(jù)，沒有時(shí)間限制，一天，一年，兩年甚至更長，數(shù)據(jù)都可以使用。sessionStorage（會話存儲），只有在瀏覽器被關(guān)閉之前使用，創(chuàng)建另一個(gè)頁面時(shí)同意可以使用，關(guān)閉瀏覽器之后數(shù)據(jù)就會消失。
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區(qū)別在于 sessionStorage 在關(guān)閉頁面后即被清空，而 localStorage 則會一直保存。我們這里以 localStorage 為例，簡要介紹下 HTML5 的本地存儲，并針對如遍歷等常見問題作一些示例說明。 localStorage 是 HTML5 本地存儲的 API，使用鍵值對的方式進(jìn)行存取數(shù)據(jù)，存取的數(shù)據(jù)只能是字符串。不同瀏覽器對該 API 支持情況有所差異，如使用方法、最大存儲空間等。
下面我們用sessionStorage寫一個(gè)本地緩存類
先建一個(gè)緩存對象
2.這個(gè)對象里有以下方法
整體代碼
3.使用
var ArtStorage = new ArtStorage();
//設(shè)置
ArtStorage.set(key,value,0)//鍵，值，緩存時(shí)間（單位秒，0表示不超時(shí)）
獲取
alert(ArtStorage.get(key));
SDN移動將持續(xù)為您優(yōu)選移動開發(fā)的精華內(nèi)容，共同探討移動開發(fā)的技術(shù)熱點(diǎn)話題，涵蓋移動應(yīng)用、開發(fā)工具、移動游戲及引擎、智能硬件、物聯(lián)網(wǎng)等方方面面。如果您想投稿、尋求《近匠》報(bào)道，或給文章挑錯(cuò)，歡迎發(fā)送郵件至tangxy#csdn.net（請把#改成@）。
HTML5是新一代的HTML標(biāo)準(zhǔn)，加入很多新的特性。離線存儲（也可稱為緩存機(jī)制）是其中一個(gè)非常重要的特性。HTML5引入的離線存儲，這意味著Web應(yīng)用可進(jìn)行緩存，并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。
HTML5應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢：
根據(jù)標(biāo)準(zhǔn)，到目前為止，HTML5一共有6種緩存機(jī)制，有些是之前已有，有些是HTML5才新加入的。
下面我們首先分析各種緩存機(jī)制的原理、用法及特點(diǎn)；然后針對Android移動端Web性能加載優(yōu)化的需求，看如何適當(dāng)利用緩存機(jī)制來提高Web的加載性能。
瀏覽器緩存機(jī)制是指通過HTTP協(xié)議頭里的Cache-Control（或Expires）和Last-Modified（或Etag）等字段來控制文件緩存的機(jī)制。這應(yīng)該是Web中最早的緩存機(jī)制了，是在HTTP協(xié)議中實(shí)現(xiàn)的，有點(diǎn)不同于Dom Storage、AppCache等緩存機(jī)制，但本質(zhì)上是一樣的。可以理解為，一個(gè)是協(xié)議層實(shí)現(xiàn)的，一個(gè)是應(yīng)用層實(shí)現(xiàn)的。
Cache-Control用于控制文件在本地緩存有效時(shí)長。最常見的，比如服務(wù)器回包：Cache-Control:max-age=600表示文件在本地應(yīng)該緩存，且有效時(shí)長是600秒（從發(fā)出請求算起）。在接下來600秒內(nèi)，如果有請求這個(gè)資源，瀏覽器不會發(fā)出HTTP請求，而是直接使用本地緩存的文件。
Last-Modified是標(biāo)識文件在服務(wù)器上的最新更新時(shí)間。下次請求時(shí)，如果文件緩存過期，瀏覽器通過If-Modified-Since字段帶上這個(gè)時(shí)間，發(fā)送給服務(wù)器，由服務(wù)器比較時(shí)間戳來判斷文件是否有修改。如果沒有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時(shí)返回最新的文件。
Cache-Control通常與Last-Modified一起使用。一個(gè)用于控制緩存有效時(shí)間，一個(gè)在緩存失效后，向服務(wù)查詢是否有更新。
Cache-Control還有一個(gè)同功能的字段：Expires。Expires的值一個(gè)絕對的時(shí)間點(diǎn)，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在這個(gè)時(shí)間點(diǎn)之前，緩存都是有效的。
Expires是HTTP1.0標(biāo)準(zhǔn)中的字段，Cache-Control是HTTP1.1標(biāo)準(zhǔn)中新加的字段，功能一樣，都是控制緩存的有效時(shí)間。當(dāng)這兩個(gè)字段同時(shí)出現(xiàn)時(shí)，Cache-Control是高優(yōu)化級的。
Etag也是和Last-Modified一樣，對文件進(jìn)行標(biāo)識的字段。不同的是，Etag的取值是一個(gè)對文件進(jìn)行標(biāo)識的特征字串。在向服務(wù)器查詢文件是否有更新時(shí)，瀏覽器通過If-None-Match字段把特征字串發(fā)送給服務(wù)器，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag和Last-Modified可根據(jù)需求使用一個(gè)或兩個(gè)同時(shí)使用。兩個(gè)同時(shí)使用時(shí)，只要滿足基中一個(gè)條件，就認(rèn)為文件沒有更新。
另外有兩種特殊的情況：
下面是通過Google Chrome瀏覽器（用其他瀏覽器+抓包工具也可以）自帶的開發(fā)者工具，對一個(gè)資源文件不同情況請求與回包的截圖。
首次請求：200
緩存有效期內(nèi)請求：200(from cache)
緩存過期后請求：304（Not Modified)
一般瀏覽器會將緩存記錄及緩存文件存在本地Cache文件夾中。Android下App如果使用Webview，緩存的文件記錄及文件內(nèi)容會存在當(dāng)前App的Data目錄中。
分析：Cache-Control和Last-Modified一般用在Web的靜態(tài)資源文件上，如JS、CSS 和一些圖像文件。通過設(shè)置資源文件緩存屬性，對提高資源文件加載速度，節(jié)省流量很有意義，特別是移動網(wǎng)絡(luò)環(huán)境。但問題是：緩存有效時(shí)長該如何設(shè)置？如果設(shè)置太短，就起不到緩存的使用；如果設(shè)置的太長，在資源文件有更新時(shí)，瀏覽器如果有緩存，則不能及時(shí)取到最新的文件。
Last-Modified需要向服務(wù)器發(fā)起查詢請求，才能知道資源文件有沒有更新。雖然服務(wù)器可能返回304告訴沒有更新，但也還有一個(gè)請求的過程。對于移動網(wǎng)絡(luò)，這個(gè)請求可能是比較耗時(shí)的。有一種說法叫“消滅304”，指的就是優(yōu)化掉304的請求。
抓包發(fā)現(xiàn)，帶if-Modified-Since字段的請求，如果服務(wù)器回包304，回包帶有Cache-Control:max-age或Expires字段，文件的緩存有效時(shí)間會更新，就是文件的緩存會重新有效。304回包后如果再請求，則又直接使用緩存文件了，不再向服務(wù)器查詢文件是否更新了，除非新的緩存時(shí)間再次過期。
另外，Cache-Control與Last-Modified是瀏覽器內(nèi)核的機(jī)制，一般都是標(biāo)準(zhǔn)的實(shí)現(xiàn)，不能更改或設(shè)置。以QQ瀏覽器的X5為例，Cache-Control與Last-Modified緩存不能禁用。緩存容量是12MB，不分Host，過期的緩存會最先被清除。如果都沒過期，應(yīng)該優(yōu)先清最早的緩存或最快到期的或文件大小最大的；過期緩存也有可能還是有效的，清除緩存會導(dǎo)致資源文件的重新拉取。
還有，瀏覽器，如X5，在使用緩存文件時(shí)，是沒有對緩存文件內(nèi)容進(jìn)行校驗(yàn)的，這樣緩存文件內(nèi)容被修改的可能。
分析發(fā)現(xiàn)，瀏覽器的緩存機(jī)制還不是非常完美的緩存機(jī)制。完美的緩存機(jī)制應(yīng)該是這樣的：
在實(shí)際應(yīng)用中，為了解決Cache-Control緩存時(shí)長不好設(shè)置的問題，以及為了“消滅304”，Web前端采用的方式是：
通過這種方式，實(shí)現(xiàn)了：緩存文件沒有更新，則使用緩存；緩存文件有更新，則第一時(shí)間使用最新文件的目的。即上面說的第1、2條。第3、4條由于瀏覽器內(nèi)部機(jī)制，目前還無法滿足。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
