瀏覽器緩存和壓縮優化技術
一、HTTP緩存機制
緩存分類
1、200 from cache：直接從本地緩存中獲取響應，最快速，最省流量，因為根本沒有向服務器發送請求；
2、304 NOT Modified：協商緩存，瀏覽器在本地沒有命中的情況下，請求頭發送一定的校檢數據到服務端，如果服務端數據沒有改變瀏覽器從本地緩存響應，返回304
快速，發送的數據很少，只返回一些基本的響應頭信息，數據量很小，不發送實際的響應體；
3、200 OK：以上兩種緩存失敗，服務器返回完整的響應。沒有用到緩存，相對較慢；
相關的頭信息：
Pragma：HTTP1.0時代遺留的產物，該字段被設置no-cache時，會告知瀏覽器禁用本地緩存，即每次都要向服務器發送請求；
Expires
Cache-control：HTTP1.1針對Expires時間不一致的解決方案，告知瀏覽器緩存過期時間不是時間間隔而是秒，這樣就會解決時間不一致的問題；
no-store：禁止瀏覽器緩存響應
no-cache：不允許直接使用緩存，先發起請求和服務器協商
max-age=單位：秒，告知瀏覽器該響應本地緩存有效的最大期限，以秒為單位；
優先級：Pragma > cache-control > Expires
Last-modified
if-Modified-Since：得到資源最後的修改時間，會將這個信息提交到服務器做檢查，如果沒有修改，返回304狀態碼；
Etag：HTTP1.1推出，文件指紋標識符，如果文件內容修改指紋會改變；
if-None-Match：本地緩存失效，會攜帶此值去請求服務器，服務器判斷該資源是否改變，如果沒有改變，直接使用本地緩存，返回304；
緩存策略的選擇：
適合做本地緩存：
1、不變的圖像，如logo，圖標等；
2、js、css靜態文件；
3、可下載的內容，媒體文件；
適合做協商緩存：
1、HTML文件；
2、經常替換的圖片；
3、經常修改的js、css文件；
4、js、css文件的加載可以加入文件的簽名來拒絕緩存；
不建議緩存的內容：
1、用戶隱私等敏感的信息；
2、經常改變的api數據接口
二、Nginx配置緩存策略
本地緩存配置：
expires time； 通知瀏覽器過期的時長
為負值時表示Cache-Control：no-cache
為正值或者為0，就表示Cache-Control：max-age=指定的時間
協商緩存：
Etag：指定簽名 on|off 默認開啟
三、前端代碼和前端的壓縮
優勢：讓資源文件更小，加快文件在網絡的傳輸，讓網頁更快的展現，降低帶寬和流量的開銷；
壓縮方式：js、css、圖片、html的代碼壓縮、gzip壓縮
js代碼壓縮：一般就是去除多余的空格和回車、替換長變量名、簡化一些代碼寫法等；
常用的壓縮工具：UglifyJS（壓縮、語法檢查、美化代碼、代碼縮減、轉化）、YUI Compressor（只有壓縮）、Closure（和UglifyJS類似，壓縮方式不一樣）、Compiler
css壓縮：去除空白符、註釋優化一些css語義規則；
常用的壓縮工具：YUI Compressor（只有壓縮）、CSS Compressor
HTML壓縮：不建議使用代碼壓縮，建議使用gzip壓縮
圖片壓縮工具：tinypng、jepgMini、ImageOptim
gzip壓縮
Nginx配置：
瀏覽器緩存和壓縮優化技術