手機瀏覽器緩衝和電腦瀏覽器緩衝的問題記錄

標籤：style   http   使用   sp   strong   on   檔案   資料   問題   

　　一、背景描述：

　　為了最佳化web網頁速度，我們採取了js,css合并壓縮，並在服務端控制。所以我就學習了一下，瀏覽器緩衝的原理。

　　因為我不想使用版本號碼控制，版本號碼具有諸多弊端：

       1.每次修改都得修改版本號碼。

       2.如果所有頁面的引用，單獨配置版本號碼，那麼每次的修改量很大；

       3.如果為了避免2的問題，針對所有頁面使用同一個熟悉配置，那麼每次修改一個檔案並更新版本號碼之後，所有的引用的版本號碼都更新了，太傻了。

    所以，不採取版本號碼控制，使用時間控制，頁面引用不用變，目標檔案發生了變化，伺服器能告訴用戶端瀏覽器。

     頁面使用如下方式請求當前頁面的css樣式檔案:

    <link type="text/css" rel="stylesheet"  href="<s:text name=‘compressURL‘/>/dynamic.css?p=dd&urls=xxx,yyy" />

     伺服器處理方法：

　　1.由於使用版本號碼，在每次修改的時候都得修改版本號碼，嫌麻煩，所以採取在服務端使用檔案修改時間控制，利用http的If-Modified-Since。

     2.檢測檔案修改時間，和瀏覽器傳過來的If-Modified-Since比較，如果需要更新，返回200，向瀏覽器發送最新資料；

     3.如果不需要更新返回304 ，瀏覽器就會拿本地的緩衝，不需要消耗流量和等待資料轉送，節約時間和流量 （此處不詳細描述，如何控制304和200具體實現）

    二、 出現問題

    PC端瀏覽器：一切正常，達到了最初的目的：樣式檔案沒有更新則返回304，瀏覽器繼續使用緩衝；

　　　　　　　　下次樣式檔案更新了，用戶端瀏覽器請求時，將得到200的傳回值並接收新的檔案；

    手機端內建瀏覽器/裡邊的瀏覽器：部分手機行，部分手機不行。表現的現象為：第一次請求在本機快取了樣式檔案，第二次樣式檔案修改了他也沒有更新。

           我用多部手機測試，發現當服務端檔案變動之後，小米2S手機能及時得到檔案更新，同事三星機型也能及時得到最新檔案，而IPHONE和華為的不行。

 經測試總結髮現：IPHONE和華為的手機在第一次訪問網頁之後，就把樣式檔案快取起來了，第二次直接沒有變動（實際上根本就沒有向伺服器發送請求，沒有詢問伺服器是否更新）

   即：1.電腦第一次訪問的時候下載檔案，以後每次會每次詢問伺服器是否更新，304則不更新，200則更新（可以完全在服務端控制）     

         2.部分手機端瀏覽器和裡的瀏覽器，只在第一次訪問的時候下載檔案，只要url不改變，以後根本就沒有再次請求（可能是瀏覽器為了給省流量，和提速）；

    三、解決辦法

    如果是電腦端使用，我這個解決方案，沒問題，用的很爽；

   如果是手機訪問，還是得加版本號碼，我之前就是嫌棄加版本號碼麻煩，所以才沒採用，實在是沒辦法，只有讓url地址發生改變 那個傻逼瀏覽器才發送請求，才能拿到新的檔案。

  

 

 

手機瀏覽器緩衝和電腦瀏覽器緩衝的問題記錄