標籤：style blog http io color ar os 使用 sp
最近在APP裡新增一個論壇模組，為了快速地完成，決定將整個論壇模組做成WEB APP，WEB APP最致命的就是使用者體驗問題，頁面跳轉和過多的請求，大大影響了載入速度和使用者體驗，這時候我想到了HTML5的離線儲存。 經過簡單的瞭解之後，覺得這個可以有，但很快我又就發現，HTML5離線儲存並不適於這次的項目。 原因如下： 1、 一旦頁面指定了manifest，那麼這個頁面就一定被儲存下來。如果有一個動態網頁面，不想快取頁面面的內容，只想快取頁面面所引用的css,js,img，但抱歉，這個沒有辦法做到。我想是因為瀏覽器與伺服器既定的互動邏輯導致必須要這樣設計，否則我就很不理解設計者了。 2、page.html?id=1和page.html?id=2被儲存成了兩個html不同的頁面，想想當使用者瀏覽了1000個不同的貼子的時候，瀏覽器就下載儲存了1000個沒有意義的頁面。 3、第一次訪問page.html?id=1，緩衝成功後。再訪問 page.html?id=2，不會去讀緩衝，這是因為由於參數變了，被認為地址不一樣，不算是第二次請求，所以請求page.html?id=2時依然會重新載入manifest指定的檔案。 4、而我為了快速完成，進出層級時都做成了頁面跳轉，免不了傳很多參數，而且每個貼子不一樣的id，所以這種情況下離線緩衝基本上沒有意義，因為相當大部份請求都屬於第一次訪問。 5、再且，根據網上的資料，進行離線儲存時會再次下載一次對應的資料，意思就是說，第一次訪問時，使用了離線儲存技術的頁面載入時所消耗的時間比沒有使用這個技術的頁面要多，而且耗的流量更大。 因此，manifest極不適合含有動態參數頁面跳轉的情況下使用，最好是一個頁面，然後完全的ajax請求。 另附帶資料:http://www.cnblogs.com/svage/archive/2011/11/24/2261365.html html5離線應用application cache一、應用情境
我們通常使用瀏覽器緩衝在使用者磁碟上儲存web單頁，在使用者再次瀏覽的時候已節省頻寬，但即便這樣，依然無法在沒有Internet的情況下訪問Web。為了讓web應用程式在離線狀態也能被訪問。html5通過application cache API提供離線儲存功能。前提是你需要訪問的web頁面至少被線上訪問過一次。
離線本機存放區和傳統的瀏覽器緩衝有什麼不同呢？
1、瀏覽器緩衝主要包含兩類：
a.緩衝協商：Last-modified,Etag
瀏覽器向伺服器詢問頁面是否被修改過，如果沒有修改就返回304，瀏覽器直接瀏覽本機快取檔案。否則伺服器返回新內容。
b.徹底緩衝：cache-control,Expires
通過Expires設定緩衝失效時間，在失效之前不需要再跟伺服器請求互動。
2、離線儲存為整個web提供服務，瀏覽器緩衝只緩衝單個頁面；
3、離線儲存可以指定需要緩衝的檔案和哪些檔案只能線上瀏覽，瀏覽器緩衝無法指定；
4、離線儲存可以動態通知使用者進行更新。
二、如何?
離線儲存是通過manifest檔案來管理的，需要伺服器端的支援，不同的伺服器開啟支援的方式也是不同的。
CACHE MANIFEST//必須以這個開頭 version 1.0 //最好定義版本，更新的時候只需修改版本號碼 CACHE: m.png test.js test.css NETWORK: * FALLBACK online.html offline.html
CACHE指定需要緩衝的檔案；NETWORK指定只有通過連網才能瀏覽的檔案，*代表除了在CACHE中的檔案；FALLBACK每行分別指定線上和離線時使用的檔案
要讓manifest管理儲存，還需要在html標籤中定義manifest屬性，如下：
<!DOCTYPE HTML> <html lang="en" manifest=‘test.manifest‘> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
最後別忘了，這些應用需要伺服器支援。
Apache伺服器開啟支援的方式是：在conf/mime.types中添加一段代碼：
test/cache-manifest manifest
IIS伺服器開啟方式：
右鍵--HTTP---MIME映射下，單擊檔案類型---建立---副檔名輸入manifest，類型中輸入test/cache-manifest
三、通過JS動態控制更新
applicationCache對象提供個了一些方法和事件，管理離線儲存的互動過程。通過在firefox8.0的控制台中輸入window.applicationCache可以看到這個對象的所
有屬性和事件方法。
applicationCache.onchecking = function(){ //檢查manifest檔案是否存在 }
applicationCache.ondownloading = function(){ //檢查到有manifest或者manifest檔案 //已更新就執行下載操作 //即使需要緩衝的檔案在請求時伺服器已經返回過了 }
applicationCache.onnoupdate = function(){ //返回304表示沒有更新，通知瀏覽器直接使用本地檔案 }
applicationCache.onprogress = function(){ //下載的時候周期性的觸發，可以通過它 //擷取已經下載的檔案個數 }
applicationCache.oncached = function(){ //下載結束後觸發，表示緩衝成功 }
application.onupdateready = function(){ //第二次載入，如果manifest被更新 //在下載結束時候觸發 //不觸發onchched alert("本機快取正在更新中。。。"); if(confirm("是否重新載入已更新檔案")){ applicationCache.swapCache(); location.reload(); } }
applicationCache.onobsolete = function(){ //未找到檔案，返回404或者401時候觸發 }
applicationCache.onerror = function(){ //其他和離線儲存有關的錯誤 }
四、瀏覽器與伺服器的互動
曾經有面試題是這樣的："描述在瀏覽器的地址欄中輸入:http://www.baidu.com 後發生了什嗎？"。
1、服務端返回baidu頁面資源，瀏覽器載入html
2、瀏覽器開始解析
3、發現link，發送請求載入css檔案
4、瀏覽器渲染頁面
5、發現圖片，發送請求載入圖片，並重新渲染
6、發送請求js檔案，阻塞渲染。如果js對dom進行了操作，則會進行rerender
對於支援離線儲存的頁面，瀏覽器和伺服器的互動又是如何呢？
首次載入頁面：
1-6 ： 同上
7：請求頁面中需要緩衝的頁面和資料，就算在之前的步驟中已經請求過（這是個耗能的地方）
8：伺服器返回所有請求檔案，瀏覽器進行本機存放區
再次載入頁面：
1：發送請求
2：使用本機存放區的離線檔案
3：解析頁面
4：請求服務端的manifest檔案，判斷是否有改變，返回304則表示沒有改變進入步驟5，否則進入步驟6（jaykon:這裡是不是錯了？304時會進入6才對）
5：進入首次載入頁面的7-8（jaykon:這裡注意，就算此次請求manifest檔案更新了，也只是在頁面宣染完成後重新下載裡面路徑的檔案，這些新檔案要在下一次訪問時才會體現出來，比如再次重新整理時。）
6：使用本機存放區，不重新請求
轉自http://jaykong.blog.163.com/blog/static/889541201272733456323/
【轉】html5離線儲存,application cache,manifest使用體驗
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
