高併發大流量專題---四、瀏覽器緩存和數據壓縮

高併發大流量專題---四、瀏覽器緩存和數據壓縮

1、總結

一句話總結：

http請求頭裏面的設置都是能夠在php或者服務器（好比nginx）中設置的，好比設置expire，好比設置是否開啓ETag

 

一、高併發下只能經過提高服務器解決負載麼？

不是：有不少種方式，好比前端，好比數據庫，好比緩存，好比代碼等等等等

 

二、緩存只能作數據庫緩存嗎？

不是：還能夠作數據緩存，前端能夠設置文件緩存

 

三、如何啓用瀏覽器緩存？

在服務器（好比nginx）中設置Pragma，Cache-Control，Expires等

 

四、如何設置本地緩存和協商緩存（注意之間的區別）？

都是設置文件過時時間：其實都是設置Pragma，Cache-Control，Expires來設置文件的過時時間

協商緩存是本地文件過時了：向服務器發起請求看文件是否改變，若是沒改變就用本地的

本地緩存和協商緩存是串行：是優先進行本地緩存，本地緩存的文件過時了才進行的協商緩存，協商緩存的文件改變了才從服務器獲取

 

五、緩存分類（HTTP緩存模型中，若是請求成功會有三種狀況）？

200 from cache：直接從本地緩存中獲取響應，最快速，最省流量，由於根本沒有向服務器發送請求

304 Not Modified：協商緩存，瀏覽器在本地沒有命中的狀況下請求頭中發送必定的校驗數據到服務端，若是服務端數據沒有改變瀏覽器從本地緩存響應，返回304（）

200 OK：以上兩種緩存全都失敗，服務器返回完整響應。沒有用到緩存，相對最慢。

 

六、協商緩存的特色是什麼？

快速，發送的數據不多：400B左右：只返回一些基本的響應頭信息，數據量很小，不發送實際響應體

 

七、設置前端瀏覽器本地緩存須要設置的相關Header ？

Pragma：HTTP1.0時代的遺留產物，該字段被設置爲no-cache時，會告知瀏覽器禁用本地緩存，即每次都向服務器發送請求。

Expires：HTTP1.0時代用來啓用本地緩存的字段，expires值對應一個形如Thu，31Dec2037 23：55：55GMT的格林威治時間，告訴瀏覽器緩存實現的時刻，若是還沒到該時刻，標明緩存有效，無需發送請求。

Cache-Control：HTTP1.1針對Expires時間不一致的解決方案，運用Cache-Control告知瀏覽器緩存過時的時間間隔而不是時刻，即便具體時間不一致，也不影響緩存的管理。

 

八、Cache-Control和Expires的關係是什麼？

Expires有問題：瀏覽器與服務器的時間沒法保持一致，若是時間差距大，就會影響緩存結果。

Cache-Control解決問題：HTTP1.1針對Expires時間不一致的解決方案，運用Cache-Control告知瀏覽器緩存過時的時間間隔而不是時刻，即便具體時間不一致，也不影響緩存的管理。

 

九、Cache-Control  常見設置？

no-store：禁止瀏覽器緩存響應

no-cache：不容許直接使用本地緩存，先發起請求和服務器協商

max-age=delta-seconds：告知瀏覽器該響應本地緩存有效的最長期限，以秒爲單位

 

十、Pragma，Cache-Control，Expires的執行優先級是怎樣？

Pragma>Cache-Control>Expires

 

十一、協商緩存 的步驟？

一、沒有命中本地緩存：當瀏覽器沒有命中本地緩存，如本地緩存過時或者響應中聲明不容許直接使用本地緩存，那麼瀏覽器確定會發起服務端請求

二、驗證數據是否修改：服務端會驗證數據是否修改，若是沒有，通知瀏覽器使用本地緩存

 

十二、協商緩存 相關Header？

Last-Modified：通知瀏覽器資源的最後修改時間；Last-Modified：Mon,28 Sep 2015 08:06:43 GMT

If-Modified-Since：獲得資源的最後修改時間後，會將這個信息經過If-Modified-Since提交到服務器作檢查，若是沒有修改，返回304狀態碼

 

1三、http請求中文件的ETag是什麼及相關？

文件的指紋標識符：HTTP1.1推出，文件的指紋標識符，若是文件內容修改，指紋會改變；Etag："78437822c-6739"

If-None-Match：本地緩存失效，會攜帶此值去請求服務端，服務端判斷該資源是否改變，若是沒有改變，直接使用本地緩存，返回304

 

1四、前端適合緩存的內容？

不變的圖像，如logo，圖標等

js、css靜態文件

可下載的內容，媒體文件

 

1五、前端建議使用協商緩存的內容？

HTML文件

常常替換的圖片

常常修改的js、Css文件

 

1六、js、css文件如何拒絕緩存？

加簽名：js、css文件的加載能夠加入文件的簽名來拒絕緩存；實例：index.css？簽名；index.簽名.js

 

1七、前端不建議緩存的內容？

用戶隱私等敏感數據

常常改變的api數據接口

 

1八、php中控制瀏覽器緩存實例 啓示？

|||-begin

$since=$_SERVER['HTTP_IF_MODIFIED_SINCE'];
$lifetime=3600; 
if(strtotime(ssince)+$lifetime>time()){
    header(' HTTP/1.1 304 Not Modified');
    exit;
}
header('Last-Modified:'. gmdate('D,d MY H:i:s', time()).' GMT');

|||-end

http請求頭裏面的設置都是能夠在php或者服務器（好比nginx）中設置的，好比設置expire，好比設置是否開啓ETag

 

 

1九、前端瀏覽器本地緩存配置（Nginx配置緩存策略）？

add_header指令：添加狀態碼爲2XX和3XX的響應頭信息；add header name value[always]；

能夠設置Pragma/Expires/Cache-Control，能夠繼承

 

20、expires指令設置及和Cache-Control的關係？

expires time；expires指令：通知瀏覽器過時時長；

爲負值時表示：Cache-Control:no-cache；當爲正或者0時，就表示：Cache-Control:max-age=指定的時間；

 

2一、nginx中設置expires給咱們的啓示？

|||-begin

location ~* \.(jpg|png|gif|jpeg)$ {
    expires 30d;
}
#當爲max時，會把Expires設置爲"Thu，31Dec 2037 23：55：55 GMT"，Cache-Control 設置到10年；

|||-end

http請求頭裏面的設置都是能夠在php或者服務器（好比nginx）中設置的，好比設置expire，好比設置是否開啓ETag

 

2二、協商緩存相關配置？

Etag指令：指定簽名；實例：能夠在nginx配置的location中配置：etag on | off；默認是on

 

2三、前端代碼和資源的壓縮 優點？

讓資源文件更小，加快文件在網絡中的傳輸，讓網頁更快的展示，下降帶寬和流量開銷

 

2四、前端資源 壓縮方式有哪些？

JS、CSS、圖片、HTML代碼的壓縮

Gzip壓縮：服務器

 

2五、JavaScript代碼壓縮原理？

去掉多餘的空格和回車、替換長變量名、簡化一些代碼寫法等

JavaScript壓縮的原理通常是去掉多餘的空格和回車、替換長變量名、簡化一些代碼寫法等。

 

2六、圖片壓縮工具？

tinypng、JpegMini、ImageOptim

 

2七、Nginx如何配置gzip壓縮？

直接在nginx的配置的location中加上這句話便可：gzip on|off； #是否開啓gzip

gzip on|off； #是否開啓gzip 
gzip_buffers 324K|168K #緩衝（在內存中緩衝幾塊？每塊多大）
gzip_comp_level[1-9] #推薦6壓縮級別（級別越高，壓的越小，越浪費CPU計算資源）

gzip_disable#正則匹配UA什麼樣的Uri不進行gzip 
gzip_min_length 200#開始壓縮的最小長度
gzip_http_version 1.0|1.1#開始壓縮的http協議版本
gzip_proxied#設置請求者代理服務器，該如何緩存內容

gzip_types text/plain application/xml#對哪些類型的文件用壓縮如txt，xml，html，css 
gzip_vary onloff#是否傳輸gzip壓縮標誌

 

 

 

2、內容在總結中

一、相關知識

 

 

二、代碼