有以下集中方法
方法一：針對瀏覽器設置過期時間，在這個時間內的請求都會先請求本地緩存的文件和數據。另外jquery的ajax請求方式可以設置是否緩存，可以充分利用該選項。
方法二：js請求限制，可以設計成多少秒以內都不響應響應的操作，過期後的操作才會有效。點擊後僅返回一個模擬的結果。
方法三：ajax做dom緩存策略，比如在頁面放一個不可見的textarea,請求過來的數據同時寫入textarea的value，並且在一定時間內（可設置）的請求只去讀取textarea的內容，並將結果展示到頁面上。
B. ios前端有緩存
ios前端有緩存的解決方法：
1.此時在ios app的沙盒文件中將保存好已經緩存的文件，如果此時沒有退出APP,那麼緩存的內容同時也會保存在內存中；如下圖（此處針對的UIWebView）
2.此時可以看到這Caches文件中，後面的Paul.H5下面多了Cache.db的資料庫，打開資料庫可以看到以下內容；注意 此時的圖片資源也是保存在Paul.H5下面的文件中
C. web前端緩存機制
前端緩存機制有多種，如瀏覽器緩存、CDN緩存、DNS緩存、代理伺服器緩存等。
CDN全稱是Content Delivery Network，即內容分發網路。CDN的原理是將資源存放在各地的緩存伺服器上，當用戶請求資源時，從就近的伺服器上返回緩存的資源，而不需要每次都從源伺服器獲取，減輕源伺服器的壓力，又能提升用戶的訪問速度。
瀏覽器可以將用戶請求的資源進行緩存，存放在本地。瀏覽器緩存一般通過請求頭來設置。
與瀏覽器緩存有關的頭部有：
瀏覽器會將伺服器的域名與IP地址的映射緩存在本地，這樣用戶在訪問網站時，不用每次都去查詢DNS映射表。
在瀏覽器和伺服器之間架設的一個伺服器 ，這個代理伺服器會幫助瀏覽器去請求頁面，然後將頁面進行處理和壓縮(例如壓縮圖片和文件)，使頁面變小，再傳輸給瀏覽器。大部分代理伺服器都有緩存的功能，如果瀏覽器所請求的文件在它本機中存在且是最新的，就不需要再從源伺服器請求數據，提高了瀏覽速度。
在瀏覽某個頁面時，瀏覽器會判斷頁面的關聯內容，進行預載入。用戶在瀏覽A頁面時，就載入好B頁面，這樣當用戶去訪問B頁面時，B頁面很快就出來，提升了用戶體驗。但這個機制有一定的缺陷，就是預判不一定準確，可能會造成流量和資源的浪費。
D. 前端HTTP緩存
在面試的時候總是遇到緩存相關問題，回答總是停留緩存就是從瀏覽器中獲取，不向伺服器發送請求，回答的不讓面試官滿意，索性抽點時間整理一下前端相關的緩存，希望下次回答的時候能夠多講點。
前端緩存分為 強緩存 和 協商緩存 ，強緩存就是在緩存未失效時，不在請求服務端，協商緩存就是去跟伺服器比較是否需要重新獲取資源 。
強緩存分為兩種， Cache-control 和 Expires ， Expires 是HTTP1.0的東西，它的值是一個格林時間，比如 Expires: Wed, 21 Oct 2015 07:28:00 GMT ，由於伺服器端和瀏覽器端的時間差異問題，瀏覽器比伺服器時間快，會導致緩存失效。 Cache-control 是HTTP1.1時代的新東西，設置的是一個相對時間， Cache-Control:public, max-age=31536000 ，在31536000秒後才緩存才失效， Cache-control 有很多取值。
強緩存在緩存失效內，不會從原始伺服器獲取新的數據，假如在緩存時段內伺服器有資源更新，會導致資源獲取不及時。
協商緩存有兩組報文
E. 前端緩存介面數據的實現
前端緩存 API 介面數據，前端怎麼知道數據是否變了，該不該取緩存的數據呢。
可以採用 HTTP 協商緩存 ETag 來實現:
在後台每次修改需要緩存的數據時都進行一次 hash（當然也可以使用其他演算法生成唯一標識）
將介面地址與 hash 值存為鍵值對
邏輯大概為：
F. 後端代碼修改了怎麼更新前端的緩存sessionstorage
用的是html5的技術，你看下你的瀏覽器是否支持html5,的API，現在谷歌瀏覽器支持的比較好 可以使用 if(window.localStorage){alert("瀏覽支持localStorage")}else{alert("瀏覽暫不支持localStorage")}//或者if(typeofwindow.localStorage=='undef...
G. 能用JS或者前端的什麼方法實現清除瀏覽器緩存嗎
可以用JS實現清除瀏覽器緩存，解決方法如下：
1、在靜態頁面也就是以.html，.jsp，.aspx，.php結尾的文件中在<dead></head>中加入以下代碼。
注意事項：
JavaScriptJavaScript基於對象和事件驅動並具有相對安全性的客戶端腳本語言。也是一種廣泛用於客戶端Web開發的腳本語言，常用來給HTML網頁添加動態功能，比如響應用戶的各種操作。
H. 前端緩存--LocalStorage(二)
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。通常為string。
I. 怎麼開發和部署前端代碼
先部署頁面，再部署資源：在二者部署的時間間隔內，如果有用戶訪問頁面，就會在新的頁面結構中載入舊的資源，並且把這個舊版本的資源當做新版本緩存起來，其結果就是：用戶訪問到了一個樣式錯亂的頁面，除非手動刷新，否則在資源緩存過期之前，頁面會一直執行錯誤。
先部署資源，再部署頁面：在部署時間間隔之內，有舊版本資源本地緩存的用戶訪問網站，由於請求的頁面是舊版本的，資源引用沒有改變，瀏覽器將直接使用本地緩存，這種情況下頁面展現正常；但沒有本地緩存或者緩存過期的用戶訪問網站，就會出現舊版本頁面載入新版本資源的情況，導致頁面執行錯誤，但當頁面完成部署，這部分用戶再次訪問頁面又會恢復正常了。
- 總之，前端性能優化絕逼是一個工程問題！
好的，上面一坨分析想說的就是：先部署誰都不成！都會導致部署過程中發生頁面錯亂的問題。所以，訪問量不大的項目，可以讓研發同學苦逼一把，等到半夜偷偷上線，先上靜態資源，再部署頁面，看起來問題少一些。
但是，大公司超變態，沒有這樣的「絕對低峰期」，只有「相對低峰期」。So，為了穩定的服務，還得繼續追求極致啊！
這個奇葩問題，起源於資源的 覆蓋式發布，用 待發布資源 覆蓋 已發布資源，就有這種問題。解決它也好辦，就是實現 非覆蓋式發布。
<img src="https://pic4.mg.com/50/_hd.jpg" data-rawwidth="631" data-rawheight="456" class="origin_image zh-lightbox-thumb" width="631" data-original="https://pic4.mg.com/_r.jpg">
好了，目前我們快速的學習了一下前端工程中關於靜態資源緩存要面臨的優化和部署問題，新的問題又來了：這™讓工程師怎麼寫碼啊！！！
要解釋優化與工程的結合處理思路，又會扯出一堆有關模塊化開發、資源載入、請求合並、前端框架等等的工程問題，以上只是開了個頭，解決方案才是精髓，但要說的太多太多，有空再慢慢展開吧。或者大家可以去我的blog看其中的一些拆解：fouber/blog · GitHub
以上不是我YY的，可以觀察 網路 或者 facebook 的頁面以及靜態資源源代碼，查看它們的資源引用路徑處理，以及網路請中靜態資源的緩存控制部分。再次贊嘆facebook的前端工程建設水平，跪舔了。
建議前端工程師多多關注前端工程領域，也許有人會覺得自己的產品很小，不用這么變態，但很有可能說不定某天你就需要做出這樣的改變了。而且，如果我們能把事情做得更極致，為什麼不去做呢？
另外，也不要覺得這些是運維或者後端工程師要解決的問題。如果由其他角色來解決，大家總是把自己不關心的問題丟給別人，那麼前端工程師的開發過程將受到極大的限制，這種情況甚至在某些大公司都不少見！