資訊專(zhuān)欄INFORMATION COLUMN
摘要：所以，如何確定這些資源沒(méi)有發(fā)生變更如何控制緩存過(guò)期的時(shí)間成了必須解決的問(wèn)題。瀏覽器接收到響應(yīng)后，會(huì)記錄這些信息，方便之后的緩存控制。也就是說(shuō)，就算服務(wù)器端該資源已經(jīng)發(fā)生變化，只要緩存未過(guò)期，就不會(huì)重新請(qǐng)求資源，所以刷新的作用就體現(xiàn)出來(lái)了。
前幾天按照Node.js中文社區(qū)上的教程，用Node.js搭了一個(gè)簡(jiǎn)單的靜態(tài)文件服務(wù)器，其中有一個(gè)功能是提供緩存支持，在實(shí)踐這一部分的過(guò)程中，我重新學(xué)習(xí)了緩存的相關(guān)知識(shí)，在這里作簡(jiǎn)單的梳理。
關(guān)于緩存的相關(guān)介紹，網(wǎng)上有不少文章，這里推薦三篇我認(rèn)為不錯(cuò)的文章：
http://blog.csdn.net/eroswang/article/details/8302191
http://www.oschina.net/news/41397/web-cache-knowledge
http://cloudbbs.org/forum.php?mod=viewthread&tid=15790
緩存是什么，簡(jiǎn)單的說(shuō)，就是訪問(wèn)頁(yè)面時(shí)不需要重新請(qǐng)求瀏覽器已經(jīng)緩存的資源（如圖片、css、js等)，前提是這些位于服務(wù)器的資源并沒(méi)有發(fā)生變更。所以，如何確定這些資源沒(méi)有發(fā)生變更、如何控制緩存過(guò)期的時(shí)間成了必須解決的問(wèn)題。這些內(nèi)容在以上三篇文章中都有詳細(xì)的介紹，我這里僅從四種使用情景來(lái)分析瀏覽器和服務(wù)器的交互過(guò)程。
情景一：用戶(hù)第一次在瀏覽器中輸入網(wǎng)址，或者通過(guò)鏈接訪問(wèn)某個(gè)網(wǎng)站
瀏覽器（客戶(hù)端）發(fā)出請(qǐng)求，請(qǐng)求網(wǎng)頁(yè)上的所有資源，一個(gè)資源對(duì)應(yīng)一個(gè)請(qǐng)求，服務(wù)器端收到請(qǐng)求后，向客戶(hù)端發(fā)送200的狀態(tài)碼，表示該資源請(qǐng)求成功，并返回響應(yīng)頭（response header）和數(shù)據(jù)體。其中，響應(yīng)頭包含了以下幾個(gè)重要的頭信息：
last-modified：該資源（文件）的最后修改時(shí)間，為UTC格式
Expires：該資源的緩存過(guò)期時(shí)間，為絕對(duì)時(shí)間，即過(guò)了這個(gè)指定時(shí)間后緩存失效，為UTC格式
Cache-Control：通常通過(guò)max-age指定緩存過(guò)期時(shí)間，為相對(duì)時(shí)間，表示某次請(qǐng)求成功后多少秒內(nèi)緩存可用，單位為秒
Cache-Control的出現(xiàn)是因?yàn)榉?wù)器端的時(shí)間可能存在誤差，其優(yōu)先級(jí)高于Expires。瀏覽器接收到響應(yīng)后，會(huì)記錄這些信息，方便之后的緩存控制。
情景二：用戶(hù)第N次（N大于1）在瀏覽器中輸入網(wǎng)址，或者通過(guò)鏈接訪問(wèn)某個(gè)網(wǎng)站
瀏覽器首先檢查待請(qǐng)求的資源的狀態(tài)，先檢查Cache-Control，沒(méi)有則檢查Expires，如果緩存未過(guò)期，則瀏覽器不向服務(wù)器端發(fā)送請(qǐng)求，直接返回200 from cache，表明是從緩存中獲取的資源。也就是說(shuō)，就算服務(wù)器端該資源已經(jīng)發(fā)生變化，只要緩存未過(guò)期，就不會(huì)重新請(qǐng)求資源，所以刷新的作用就體現(xiàn)出來(lái)了。
情景三：資源已經(jīng)緩存，用戶(hù)刷新頁(yè)面（按F5）
瀏覽器向服務(wù)器發(fā)送資源請(qǐng)求，請(qǐng)求頭中包含以下兩個(gè)頭信息：
Cache-Control：其中max-age=0（刷新時(shí)置為0），表示本地緩存已過(guò)期，要向服務(wù)器確認(rèn)
if-modified-since：這是時(shí)間等于上一次成功請(qǐng)求該資源后從last-modified獲取的時(shí)間，為UTC格式
服務(wù)器接收到請(qǐng)求，將待請(qǐng)求資源的最后一次修改時(shí)間和if-modified-since進(jìn)行對(duì)比。如果前者與后者不相等，則說(shuō)明文件已經(jīng)變動(dòng)，則重新下載該資源，并返回200狀態(tài)碼；如果前者與后者相等，則從本地緩存中獲取，并返回304 Not Modified。
情景四：資源已經(jīng)緩存，用戶(hù)強(qiáng)制刷新頁(yè)面（按Ctrl + F5）
強(qiáng)制刷新時(shí)，請(qǐng)求頭中的Cache-Control的值設(shè)為no-cache，表示強(qiáng)制發(fā)送請(qǐng)求，此外請(qǐng)求頭中無(wú)If-Modified-Since頭信息，這樣，無(wú)論緩存是否過(guò)期，無(wú)論服務(wù)器端文件是否發(fā)生變更，都會(huì)強(qiáng)制下載請(qǐng)求的資源，這就是所謂的“強(qiáng)制刷新”。
最后，附上用node.js實(shí)現(xiàn)靜態(tài)文件服務(wù)器的教程：
用NodeJS打造你的靜態(tài)文件服務(wù)器
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/61758.html
摘要：演員表角色名稱(chēng)扮演者小劉瀏覽器小李普通用戶(hù)小川傳輸層快遞小哥小汪網(wǎng)絡(luò)層老四目標(biāo)服務(wù)器比特大叔電流 ??小劉（瀏覽器）是一個(gè)批發(fā)商， 小李（普通用戶(hù)）是一個(gè)超市的進(jìn)貨經(jīng)理，一天小李經(jīng)理來(lái)到了小劉老板的店鋪，說(shuō)：我‘要（www.baidu.com）類(lèi)的所有東西’，小劉老板說(shuō)：‘我得用我們的行話(huà)（IP）告訴底下的人你要的東西他才知道你要啥’，小劉老板從身上掏出一個(gè)本本（瀏覽器緩存的DNS），...
摘要：演員表角色名稱(chēng)扮演者小劉瀏覽器小李普通用戶(hù)小川傳輸層快遞小哥小汪網(wǎng)絡(luò)層老四目標(biāo)服務(wù)器比特大叔電流 ??小劉（瀏覽器）是一個(gè)批發(fā)商， 小李（普通用戶(hù)）是一個(gè)超市的進(jìn)貨經(jīng)理，一天小李經(jīng)理來(lái)到了小劉老板的店鋪，說(shuō)：我‘要（www.baidu.com）類(lèi)的所有東西’，小劉老板說(shuō)：‘我得用我們的行話(huà)（IP）告訴底下的人你要的東西他才知道你要啥’，小劉老板從身上掏出一個(gè)本本（瀏覽器緩存的DNS），...
摘要：為何不設(shè)置頭的時(shí)候默認(rèn)輸出如下的緩存頭呢答案來(lái)自這是用于嘗試禁用瀏覽器緩存請(qǐng)求的這個(gè)日期是這個(gè)塊代碼開(kāi)發(fā)者的生日那么問(wèn)題來(lái)了把個(gè)人的事情帶到項(xiàng)目中來(lái)真的好嗎以后看到就可以認(rèn)為這程序是寫(xiě)的啦有意思的是也是有這頭的 為何PHP不設(shè)置Expires頭的時(shí)候, 默認(rèn)輸出如下的緩存頭呢？: Expires: Thu, 19 Nov 1981 08:52:00 GMT 答案來(lái)自stac...
閱讀 4017·2021-09-27 14:02
閱讀 1863·2019-08-30 15:56
閱讀 1800·2019-08-29 18:44
閱讀 3353·2019-08-29 17:21
閱讀 541·2019-08-26 17:15
閱讀 1224·2019-08-26 13:57
閱讀 1298·2019-08-26 13:56
閱讀 2958·2019-08-26 11:30
