|
25-55+（85+65）=,？,，這題答案竟然是5！,，你信么,？ 開始我也不信，盯著圖片看了三分鐘后,，我信了,。答案整的是5！ -----------------------------進(jìn)入正題------------------------- 一,、緩存分類 緩存分為客戶端緩存和服務(wù)端緩存 服務(wù)端緩存又分為 代理服務(wù)器緩存 和 反向代理服務(wù)器緩存（也叫網(wǎng)關(guān)緩存,，比如 Nginx反向代理、Squid等）,，其實(shí)廣泛使用的 CDN （快播貌似就是用的這個(gè)）也是一種服務(wù)端緩存,，目的都是讓用戶的請(qǐng)求走”捷徑“，并且都是緩存圖片,、文件等靜態(tài)資源,。 客戶端緩存一般指的是瀏覽器緩存，瀏覽器緩存控制機(jī)制有兩種：HTML Meta標(biāo)簽 vs. HTTP頭信息,。目的就是加速各種靜態(tài)資源的訪問，想想現(xiàn)在的大型網(wǎng)站,，隨便一個(gè)頁面都是一兩百個(gè)請(qǐng)求,，每天 pv 都是億級(jí)別,，如果沒有緩存，用戶體驗(yàn)會(huì)急劇下降,、同時(shí)服務(wù)器壓力和網(wǎng)絡(luò)帶寬都面臨嚴(yán)重的考驗(yàn),。 本篇主要講http客戶端緩存機(jī)制 二、fiddler查看緩存 打開fiddler抓包,，用瀏覽器打開測(cè)試部落論壇：http://120.25.145.237/upload/forum.php 如果瀏覽器是第一次打開網(wǎng)站（以前沒打開過這個(gè)論壇）,，抓包情況如下：
（這里就是客戶端發(fā)出請(qǐng)求后,，告訴服務(wù)器：“哥們，我這沒緩存啊,，您得發(fā)全部網(wǎng)頁數(shù)據(jù)過來哦~?。 ?，隨后服務(wù)器返回：“200 OK”） 第一次請(qǐng)求后,，我們?cè)俅嗡⑿拢‵5）下這個(gè)頁面，抓包情況如下： 會(huì)看到左側(cè)區(qū)域,，有很多304顯示（右側(cè)cache中已經(jīng)有了參數(shù))說明瀏覽器已經(jīng)使用了緩存數(shù)據(jù) 三,、瀏覽器請(qǐng)求流程圖 瀏覽器第一次請(qǐng)求流程圖：
四、服務(wù)器如何判斷緩存是否過期 Web服務(wù)器通過2種方式來判斷瀏覽器緩存是否是最新的,。 第一種,， 瀏覽器把緩存文件的最后修改時(shí)間通過 header ”If-Modified-Since“來告訴Web服務(wù)器。 第二種,， 瀏覽器把緩存文件的ETag, 通過header 'If-None-Match', 來告訴Web服務(wù)器,。 五、If-Modified-Since 用F5刷新當(dāng)前頁面（找到/upload/data/cache...這項(xiàng)）,，會(huì)發(fā)現(xiàn)不管怎么刷新,，If-Modified-Since后面的請(qǐng)求時(shí)間都沒有變，并且If-Modified-Since時(shí)間大于response headers里的Data時(shí)間,，如下圖： 說明瀏覽器緩存是最新的,，服務(wù)器會(huì)返回304，告訴客戶端使用本地緩存就行了 六,、If-None-Match和ETag Etag： 1.ETag是Web服務(wù)端產(chǎn)生的,，然后發(fā)給瀏覽器客戶端。瀏覽器客戶端是不用關(guān)心Etag是如何產(chǎn)生的,。 2. ETag是實(shí)體標(biāo)簽（Entity Tag）的縮寫,， 根據(jù)實(shí)體內(nèi)容生成的一段hash字符串（類似于MD5或者SHA1之后的結(jié)果），可以標(biāo)識(shí)資源的狀態(tài),。 當(dāng)資源發(fā)送改變時(shí),，ETag也隨之發(fā)生變化,。3. ETag默認(rèn)是對(duì)文件的索引節(jié)（INode），大?。⊿ize）和最后修改時(shí)間（MTime）進(jìn)行Hash后得到的,。 If-None-Match：當(dāng)資源過期時(shí)（使用Cache-Control標(biāo)識(shí)的max-age），發(fā)現(xiàn)資源具有Etage聲明,，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭If-None-Match （Etag的值）,。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match 則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串進(jìn)行比對(duì)，決定返回200或304,。
七,、為什么使用ETag呢？ 1. 某些服務(wù)器不能精確得到文件的最后修改時(shí)間,， 這樣就無法通過最后修改時(shí)間來判斷文件是否更新了,。 2. 某些文件的修改非常頻繁，在秒以下的時(shí)間內(nèi)進(jìn)行修改. Last-Modified只能精確到秒,。 3. 一些文件的最后修改時(shí)間改變了,，但是內(nèi)容并未改變。 我們不希望客戶端認(rèn)為這個(gè)文件修改了
Ctrl+F5是強(qiáng)制刷新頁面,，明確告訴服務(wù)端，不使用緩存 可以再部落論壇主頁ctrl+f5試試,，左側(cè)請(qǐng)求區(qū)域不會(huì)看到304了 Pragma: no-cache的作用和Cache-Control: no-cache一模一樣,。 都是不使用緩存。 Pragma: no-cache 是HTTP 1.0中定義的,， 所以為了兼容HTTP 1.0. 所以會(huì)同時(shí)使用Pragma: no-cache和Cache-Control: no-cache 九,、瀏覽器設(shè)置不使用緩存 打開IE。點(diǎn)擊工具欄上的,， 工具->Internet選項(xiàng)->常規(guī)->瀏覽歷史記錄 設(shè)置. 選擇“從不”,。然后保存。 然后點(diǎn)擊“刪除” 把Internet臨時(shí)文件都刪掉 （IE緩存的文件就是Internet臨時(shí)文件）,。 十,、回車刷新、F5刷新,、Ctrl+F5刷新區(qū)別,？ 看到這里有不少小伙伴要懷疑了，這三種刷新還有區(qū)別么,，不看不知道,，一看嚇一跳,，區(qū)別還挺大哦。 回車刷新：可以先清空fiddler頁面的所有請(qǐng)求（命令行輸入cls,，回車），然后在部落論壇首頁,，回車查看請(qǐng)求結(jié)果,，會(huì)發(fā)現(xiàn)只有16條左右請(qǐng)求發(fā)送出去。而且?guī)缀鯖]有圖片的請(qǐng)求,，這是因?yàn)檎?qǐng)求時(shí)會(huì)先檢查本地是不是緩存了請(qǐng)求的圖片,，如果有緩存而且沒有過期（過期可以通過該圖片請(qǐng)求的header查看），他就不會(huì)發(fā)出這個(gè)圖片request,。 F5刷新：f5刷新比enter略慢,，為什么呢，因?yàn)樗€是把所有請(qǐng)求(大概70多條)都發(fā)給了server,，只是在request里的header里有cache信息,，服務(wù)器判斷還沒有過期，就直接返回304not modified,，在fiddler里看就是這些304的請(qǐng)求都為灰色,。因?yàn)橹苯臃祷?04這樣的信息，而不是圖片等內(nèi)容,，他比ctrl+f5快,，但是比enter慢，因?yàn)樗€是把所有請(qǐng)求都發(fā)了一遍,，比enter的不發(fā)請(qǐng)求自然是慢的,。 Ctrl+F5刷新：這個(gè)就要慢了，應(yīng)為所有的請(qǐng)求都是重新發(fā)送,，重新從server讀取內(nèi)容,，一點(diǎn)cache都沒有讀。為了防止在server的cache里讀取,，在ctrl+f5刷新時(shí),，在request header 里會(huì)加pragma：no-cache cache control：no-cache。這兩個(gè)就是告訴服務(wù)器到瀏覽器中間的所有節(jié)點(diǎn),，沒有cache,，看到這個(gè)中間節(jié)點(diǎn)也不查自己的cache，保證請(qǐng)求都是從server獲得的,。 如果你對(duì)這三種刷新方式已經(jīng)很清楚了,，能清楚說明他們的區(qū)別，說明http的緩存方式,，已經(jīng)基本掌握了,。 十一,、緩存是開發(fā)最大的敵人 先說說緩存的好處： 1. 減少了冗余的數(shù)據(jù)傳輸，節(jié)省了網(wǎng)費(fèi),。 2. 減少了服務(wù)器的負(fù)擔(dān),， 大大提高了網(wǎng)站的性能 3. 加快了客戶端加載網(wǎng)頁的速度 當(dāng)然往往BUG的產(chǎn)生，都是因?yàn)榫彺嫣幚聿划?dāng)導(dǎo)致的,。 學(xué)完這篇你就知道為什么你發(fā)現(xiàn)一個(gè)BUG后,，程序猿喜歡說,，你清空下緩存試試,，然后bug就不見了 |
|
|
