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


  一、背景描述:

  為了優化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地址發生改變 那個傻逼瀏覽器才發送請求,才能拿到新的文件。

  

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM