前端靜態資源緩存是什麼呢？爲了描述方便，在這裏只討論瀏覽器緩存。瀏覽器緩存就是瀏覽器在訪問網頁時將當前訪問的網頁中所涉及到的靜態文件(css, js, png, jpg等等)下載到本地，後續再次訪問該網頁時瀏覽器直接用緩存下來的靜態文件就行了，而不用再去網絡上下載。就好比你在網上看電影，第一次看的時候緩存下來，第二次再看的時候播放的就是本地緩存好的，就不卡了。
爲什麼
爲什麼要做好前端靜態資源緩存控制呢，對公司來講可以節約帶寬，減輕服務器壓力；對用戶來講可以提升用戶體驗，加快網頁的訪問速度。也就是說公司這邊省錢，用戶這邊省流量又不卡。
怎麼做
現在已經知道什麼是前端靜態資源緩存了，也知道很有必要做好緩存控制，那如何做好緩存控制呢？也就是在渲染網頁(html)的時候引用的靜態文件(css, js, png, jpg等等)是用本地緩存下來的呢，還是用網上服務器那邊的呢？有人說用本地緩存下來的，這樣加載的最快，但如果服務器那邊對這個文件的內容做修改了怎麼辦(比如說這張圖片底色從白色的變成黃色)，可以發現，用本地緩存的雖然能保證加載最快，但可能並不是服務器最新版本的資源；有人說那就用服務器那邊的，這樣肯定是最新的，但萬一服務器那邊這個文件根本沒做改動，那下載下來的文件就和本地緩存的文件一模一樣，那這一次下載豈不是白白浪費了下載時間和流量，也就是說，每次都請求服務器那邊的雖然能保證資源最新，但可能不是最快。這個時候就得想個法子，實現文件沒變動的時候就用本地緩存的，文件發生變動了就用服務器那邊最新的，這樣就完美了。
關於緩存的問題早在http協議制定之初就被想到了，屬於協議層面的東西，所以大家平時編寫具體的頁面肯定是接觸不到了。瀏覽器其實提供了兩種控制策略，分別是強制緩存和協商緩存。顧名思義，強制緩存就是強制使用瀏覽器緩存下來的資源，協商緩存就是瀏覽器和服務器需要協商一下才能確定是用瀏覽器緩存的還是用服務器的。
強制緩存是這樣實施的：瀏覽器在第一次請求資源的時候服務器會在返回結果上附帶一句話，告訴瀏覽器說明天晚上24:00之前這個文件就用你緩存的就好了，不要TMD再來煩LZ。瀏覽器看到這句話心裏一陣暗爽（我還TMD懶得去請求你呢）。其實就是服務器命令瀏覽器在指定的一段時間內用自己緩存的文件就行，不需要再次發出請求。具體的實現就是在該次請求的返回頭部(Response Headers)加上一個字段標識這段不需要請求的時間有多長，這個字段在http1.0是Expires，在http1.1是Cache-Control，倆字段同時存在的話1.1優先級肯定大於1.0啦。
協商緩存則是這樣實施的：瀏覽器在第一次請求資源的時候服務器在返回結果上會附帶一句話，告訴瀏覽器說下次使用這個資源文件之前得先問問我能不能用本地緩存的。幾分鐘後用戶再次訪問這個頁面，又需要用到這個資源文件了，這次瀏覽器乖乖地先給服務器發了個請求問現在能不能用我自己的緩存啊，服務器會先查看這個資源文件有沒有做過修改，如果沒有修改過，就會告訴瀏覽器說，這個文件沒有修改，用你自己緩存的吧。否則就會告訴瀏覽器說，這個文件修改了，我把最新的發給你，服務器就會返回最新的文件給瀏覽器，順帶再叮囑瀏覽器一句說下次還得先問我喲。具體的實現就是在該次請求的返回頭部(Response Headers)加上一個字段標識這個文件的版本，這個字段在http1.0是Last-Modified，在http1.1是Etag，倆字段同時存在的話1.1優先級肯定大於1.0啦。如果強制緩存和協商緩存的字段同時存在，強制緩存優先。
強制緩存的缺點就是可能在強制的這段時間裏服務器文件更新了，那瀏覽器就讀不到最新的資源了；協商緩存也有缺點，就是每次都要發個請求去問服務器資源是否更新，可能造成不必要的時間和流量浪費；那怎麼辦呢？一個好法子就是添加文件指紋並且進行文件名關聯（附兩張百度首頁的截圖），
文件指紋關聯到文件名之後的文件(百度首頁)
在html中引用添加了文件指紋的文件
一般訪問網頁的入口文件都是html(後端模板文件也可視爲html)，這個策略是對html永遠不進行緩存，始終使用服務端的最新版，瀏覽器在渲染該html時會去加載裏面引用到的資源文件，然後將每個資源文件的都設置爲強制緩存，並且設置成超長過期時間，那文件發生修改瀏覽器如何獲取最新版本的文件呢？很簡單，比如說一張圖片發生了修改，那麼這張圖片的文件指紋就會改變，隨之涉及所有資源文件都會發生級聯改變，引用了這張圖片的樣式表css文件也會改變(因爲這張圖片名字變了)，而引用了該樣式表的入口文件html隨之也會改變(因爲樣式表名字變了)，而用戶再次訪問該入口html文件時，自然就會去加載這些改變了名字的”新文件”。這樣就完美了，實現文件沒變動的時候就用本地緩存的，文件發生變動了就用服務器那邊最新的，始終保持最新最快。