HTTP報(bào)文：

報(bào)文信息主要分為兩部分
1.包含屬性的首部(header)--------------------------附加信息（cookie，緩存信息等）與緩存相關(guān)的規(guī)則信息，均包含在header中
2.包含數(shù)據(jù)的主體部分(body)-----------------------HTTP請(qǐng)求真正想要傳輸?shù)牟糠?/p>

緩存位置分類：

緩存的位置.png

Service Worker
Memory Cache
Disk Cache
Push Cache

• 實(shí)際上，HTTP 協(xié)議頭的那些字段，都屬于 disk cache 的范疇，是幾個(gè)緩存位置的其中之一。
• 我們可以在 Chrome 的開(kāi)發(fā)者工具中·Network -> Size 一列看到一個(gè)請(qǐng)求最終的處理方式：如果是大小 (多少 K， 多少 M 等) 就表示是網(wǎng)絡(luò)請(qǐng)求粘捎，否則會(huì)列出 from memory cache, from disk cache 和 from ServiceWorker。

1危彩、 Service Worker:

• Service Worker 是運(yùn)行在瀏覽器背后的獨(dú)立線程攒磨，一般可以用來(lái)實(shí)現(xiàn)緩存功能。使用 Service Worker的話汤徽，傳輸協(xié)議必須為 HTTPS

• Service Worker 能夠操作的緩存是有別于瀏覽器內(nèi)部的 memory cache 或者 disk cache 的娩缰。
  我們可以從 Chrome 的 F12 中，Application -> Cache Storage 找到這個(gè)單獨(dú)的“小金庫(kù)”谒府。
  如果 Service Worker 沒(méi)能命中緩存拼坎，一般情況會(huì)使用 fetch() 方法繼續(xù)獲取資源浮毯。這時(shí)候，瀏覽器就去 memory cache 或者 disk cache 進(jìn)行下一次找緩存的工作了泰鸡。注意：經(jīng)過(guò) Service Worker 的 fetch() 方法獲取的資源债蓝，即便它并沒(méi)有命中 Service Worker 緩存，甚至實(shí)際走了網(wǎng)絡(luò)請(qǐng)求盛龄，也會(huì)標(biāo)注為 from ServiceWorker

2饰迹、Memory Cache:

Memory Cache 也就是內(nèi)存中的緩存，主要包含的是當(dāng)前中頁(yè)面中已經(jīng)抓取到的資源,例如頁(yè)面上已經(jīng)下載的樣式余舶、腳本啊鸭、圖片等。 讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤(pán)快,內(nèi)存緩存雖然讀取高效匿值，可是緩存持續(xù)性很短赠制，會(huì)隨著進(jìn)程的釋放而釋放。 一旦我們關(guān)閉 Tab 頁(yè)面挟憔，內(nèi)存中的緩存也就被釋放了憎妙。內(nèi)存比硬盤(pán)小很多，所以不能全部都放進(jìn)來(lái)

3曲楚、Disk Cache :

disk cache 也叫 HTTP cache，顧名思義是存儲(chǔ)在硬盤(pán)上的緩存褥符，因此它是持久存儲(chǔ)的龙誊，是實(shí)際存在于文件系統(tǒng)中的。而且它允許相同的資源在跨會(huì)話喷楣，甚至跨站點(diǎn)的情況下使用趟大，例如兩個(gè)站點(diǎn)都使用了同一張圖片

Disk Cache 也就是存儲(chǔ)在硬盤(pán)中的緩存，讀取速度慢點(diǎn)铣焊，但是什么都能存儲(chǔ)到磁盤(pán)中逊朽，比之 Memory Cache 勝在容量和存儲(chǔ)時(shí)效性上。
它會(huì)根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存曲伊，哪些資源可以不請(qǐng)求直接使用叽讳，哪些資源已經(jīng)過(guò)期需要重新請(qǐng)求。并且即使在跨站點(diǎn)的情況下坟募，相同地址的資源一旦被硬盤(pán)緩存下來(lái)岛蚤，就不會(huì)再次去請(qǐng)求數(shù)據(jù)

4.Push Cache：
Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容，當(dāng)以上三種緩存都沒(méi)有命中時(shí)懈糯，它才會(huì)被使用涤妒。

• 網(wǎng)絡(luò)請(qǐng)求:
  1、根據(jù) Service Worker 中的 handler 決定是否存入 Cache Storage (額外的緩存位置)
  2赚哗、根據(jù) HTTP 頭部的相關(guān)字段(Cache-control, Pragma 等)決定是否存入 disk cache
  3她紫、memory cache 保存一份資源 的引用硅堆，以備下次使用

http 緩存機(jī)制：

Web緩存器(Web cache)也叫代理服務(wù)器(proxy server)，它能夠代表初始web服務(wù)器來(lái)滿足http請(qǐng)求的網(wǎng)絡(luò)實(shí)體

緩存策略.png

強(qiáng)制緩存：

Cache-Control && Expires

Expires用時(shí)刻來(lái)標(biāo)識(shí)失效時(shí)間贿讹，不免收到時(shí)間同步的影響渐逃，而Cache-Control使用時(shí)間間隔很好的解決了這個(gè)問(wèn)題.
Cache-Control 是 HTTP1.1 才有的，不適用于 HTTP1.0围详，而 Expires 既適用于 HTTP1.0朴乖，也適用于 HTTP1.1。
當(dāng)客戶端兩種頭都能解析的時(shí)候助赞，會(huì)優(yōu)先使用 Cache-Control

• Cache-Control：
  • private 客戶端可以緩存
  • public 客戶端和代理服務(wù)器都可以緩存
  • max-age=60 緩存內(nèi)容將在60s后失效
  • no-cache 需要使用對(duì)比緩存驗(yàn)證數(shù)據(jù)买羞，強(qiáng)制向源服務(wù)器再次驗(yàn)證(沒(méi)有強(qiáng)制緩存)
  • no-store 所有內(nèi)容都不會(huì)緩存，強(qiáng)制緩存和對(duì)比緩存都不會(huì)觸發(fā)(不緩存)

cache-control 的
no-cache ：強(qiáng)制每次請(qǐng)求直接發(fā)送給源服務(wù)器雹食，而不經(jīng)過(guò)本地緩存版本的校驗(yàn)畜普。
max-age<=0 時(shí) 向server 發(fā)送http 請(qǐng)求確認(rèn) ,該資源是否有修改,在重新獲取資源之前，先檢驗(yàn)ETag/Last-Modified
no-store: 那瀏覽器不會(huì)存儲(chǔ)這次相應(yīng)的數(shù)據(jù)群叶，當(dāng)下次請(qǐng)求時(shí)吃挑，瀏覽器會(huì)在請(qǐng)求一次，就是說(shuō)不會(huì)對(duì)比Etag街立，不論什么情況都不會(huì)緩存舶衬。
不管是max-age=0還是no-cache，都會(huì)返回304（資源無(wú)修改的情況下）赎离，no-store才是真正的不進(jìn)行緩存逛犹。

請(qǐng)求中cache-control 中的它可選的值：

20180921155944100.png

在響應(yīng)中使用Cache-Control 時(shí)，它可選的值有：

2018092116013247.png

對(duì)比緩存：

• 1梁剔、 Last-Modified & If-Modified-Since

服務(wù)端再返回資源的時(shí)候虽画，會(huì)將該資源修改的時(shí)間 Last-Modified 返回給客戶端，然后客戶端下次再請(qǐng)求的時(shí)候荣病，通過(guò)If-Modified-Since或者If-Unmodified-Since帶上Last-Modified码撰，服務(wù)端檢查該時(shí)間是否與服務(wù)器的最后修改時(shí)間一致：
如果一致，則返回304狀態(tài)碼个盆，不返回資源脖岛；
如果不一致則返回200和修改后的資源，并帶上新的時(shí)間

• 2颊亮、 ETag & If-None-Match

Etag : 服務(wù)器響應(yīng)請(qǐng)求時(shí)鸡岗，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)（生成規(guī)則由服務(wù)器決定）

If-None-Match：
再次請(qǐng)求服務(wù)器時(shí)魏宽，通過(guò)此字段通知服務(wù)器客戶段緩存數(shù)據(jù)的唯一標(biāo)識(shí)稍途。
服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match 則與被請(qǐng)求資源的唯一標(biāo)識(shí)進(jìn)行比對(duì)，
不同格遭，說(shuō)明資源又被改動(dòng)過(guò)，則響應(yīng)整片資源內(nèi)容揣苏，返回狀態(tài)碼200悯嗓；
相同，說(shuō)明資源無(wú)新修改卸察，則響應(yīng)HTTP 304脯厨，告知瀏覽器繼續(xù)使用所保存的cache

如果 文件的最后修改時(shí)間變了，但內(nèi)容沒(méi)變坑质。對(duì)于這樣的情況合武，我們可以使用etag來(lái)處理。
服務(wù)器通過(guò)某個(gè)算法對(duì)資源進(jìn)行計(jì)算涡扼，取得一串值(類似于文件的md5值)稼跳，之后將該值通過(guò)etag返回給客戶端，客戶端下次請(qǐng)求時(shí)通過(guò)If-None-Match或If-Match帶上該值吃沪，服務(wù)器對(duì)該值進(jìn)行對(duì)比校驗(yàn)：如果一致則不要返回資源汤善。

請(qǐng)求報(bào)文中有條件請(qǐng)求頭字段。if-Modified-Since 的值是第一次報(bào)文中 last-modified 的值票彪； if-None-Match 的值是第一次報(bào)文中 etag 的值红淡。

既生Last-Modified 何生Etag?

HTTP1.1中Etag的出現(xiàn)主要是為了解決幾個(gè)Last-Modified比較難解決的問(wèn)題：

1、Last-Modified標(biāo)注的最后修改只能精確到秒級(jí)降铸，如果某些文件在1秒鐘以內(nèi)在旱，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間
2推掸、如果某些文件會(huì)被定期生成桶蝎，當(dāng)有時(shí)內(nèi)容并沒(méi)有任何變化，但Last-Modified卻改變了终佛，導(dǎo)致文件沒(méi)法使用緩存
3、Etag是服務(wù)器自動(dòng)生成或者由開(kāi)發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符雾家，能夠更加準(zhǔn)確的控制緩存铃彰。Last-Modified與ETag是可以一起使用的，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag芯咧，一致的情況下牙捉，才會(huì)繼續(xù)比對(duì)Last-Modified，最后才決定是否返回304

20180306185346314583481.png

1敬飒、當(dāng)?shù)谝淮握?qǐng)求某一個(gè)文件的時(shí)候邪铲，就會(huì)傳遞回來(lái)一個(gè)Last-Modified 字段，其內(nèi)容是這個(gè)文件的修改時(shí)間无拗。
2带到、當(dāng)這個(gè)文件緩存過(guò)期，瀏覽器又向服務(wù)器請(qǐng)求這個(gè)文件的時(shí)候英染，會(huì)自動(dòng)帶一個(gè)請(qǐng)求頭字段If-Modified-Since揽惹，其值是上一次傳遞過(guò)來(lái)的Last-Modified的值被饿，
3、拿這個(gè)值去和服務(wù)器中現(xiàn)在這個(gè)文件的最后修改時(shí)間做對(duì)比搪搏，如果相等狭握，那么就不會(huì)重新拉取這個(gè)文件了，返回304讓瀏覽器讀過(guò)期緩存疯溺。如果不相等就重新拉取论颅。

首部字段.png

用戶行為對(duì)緩存影響：

所謂瀏覽器的行為，指的就是用戶在瀏覽器如何操作時(shí)囱嫩，會(huì)觸發(fā)怎樣的緩存策略恃疯。主要有 3 種：

• 打開(kāi)網(wǎng)頁(yè)，地址欄輸入地址： 查找 disk cache 中是否有匹配挠说。如有則使用澡谭；如沒(méi)有則發(fā)送網(wǎng)絡(luò)請(qǐng)求。

• 普通刷新 (F5)：因?yàn)?TAB 并沒(méi)有關(guān)閉损俭，因此 memory cache 是可用的蛙奖，會(huì)被優(yōu)先使用(如果匹配的話)。其次才是 disk cache杆兵。

• 強(qiáng)制刷新 (Ctrl + F5)：瀏覽器不使用緩存雁仲，因此發(fā)送的請(qǐng)求頭部均帶有 Cache-control: no-cache(為了兼容，還帶了 Pragma: no-cache)琐脏。服務(wù)器直接返回 200 和最新內(nèi)容攒砖。

用戶行為.png

DNS

DNS是域名解析系統(tǒng) Domain Name System：

就像 IP 地址必須轉(zhuǎn)換成 MAC 地址才能訪問(wèn)主機(jī)一樣，域名也必須要轉(zhuǎn)換成 IP 地址日裙，這個(gè)過(guò)程就是“域名解析”吹艇。

https://www.baidu.com/ 中‘www’ 表示萬(wàn)維網(wǎng)服務(wù)；‘baidu’ 是主機(jī)名昂拂；
極客時(shí)間的域名“time.geekbang.org”受神，這里的“org”就是頂級(jí)域名，“geekbang”是二級(jí)域名格侯，“time”則是主機(jī)名

DNS 的核心系統(tǒng)是一個(gè)三層的樹(shù)狀鼻听、分布式服務(wù)，基本對(duì)應(yīng)域名的結(jié)構(gòu)：

1联四、根域名服務(wù)器（Root DNS Server）：管理頂級(jí)域名服務(wù)器撑碴，返回“com”“net”“cn”等頂級(jí)域名服務(wù)器的 IP 地址；
2朝墩、頂級(jí)域名服務(wù)器（Top-level DNS Server）：管理各自域名下的權(quán)威域名服務(wù)器醉拓，比如 com 頂級(jí)域名服務(wù)器可以返回 apple.com 域名服務(wù)器的 IP 地址；
3、權(quán)威域名服務(wù)器（Authoritative DNS Server）：管理自己域名下主機(jī)的 IP 地址廉嚼，比如 apple.com 權(quán)威域名服務(wù)器可以返回 www.apple.com 的 IP 地址玫镐。

DNS工作原理

• 分布式層次數(shù)據(jù)庫(kù)
  • 根DNS服務(wù)器
  • TLD頂級(jí)域(DNS)服務(wù)器 com org edu
  • 權(quán)威DNS服務(wù)器
  • 本地DNS服務(wù)器與三個(gè)服務(wù)器的查詢關(guān)系 從請(qǐng)求主機(jī)向本地DNS服務(wù)器發(fā)出
    的查詢是遞歸查詢，從本地DNS服務(wù)器向其他三種服務(wù)器查詢?yōu)榈樵?/li>

比如： 你訪問(wèn)你要訪問(wèn)“www.apple.com”怠噪，
1恐似、問(wèn)根域名服務(wù)器，它會(huì)告訴你“com”頂級(jí)域名服務(wù)器的地址傍念；
2矫夷、訪問(wèn)“com”頂級(jí)域名服務(wù)器，它再告訴你“apple.com”域名服務(wù)器的地址憋槐；
3双藕、最后訪問(wèn)“apple.com”域名服務(wù)器，就得到了“www.apple.com”的地址阳仔。

DNS.png

DNS 緩存：

1忧陪、 瀏覽器先檢查自身緩存中有沒(méi)有被解析過(guò)的這個(gè)域名對(duì)應(yīng)的ip地址，如果有近范，解析結(jié)束嘶摊。

2、操作系統(tǒng)里也會(huì)對(duì) DNS 解析結(jié)果做緩存评矩，如果你之前訪問(wèn)過(guò)“www.apple.com”叶堆，那么下一次在瀏覽器里再輸入這個(gè)網(wǎng)址的時(shí)候就不會(huì)再跑到 DNS 那里去問(wèn)了，直接在操作系統(tǒng)里就可以拿到 IP 地址斥杜。

3虱颗、操作系統(tǒng)里還有一個(gè)特殊的“主機(jī)映射”文件，通常是一個(gè)可編輯的文本蔗喂，在 Linux 里是“/etc/hosts”忘渔，在 Windows 里是“C:\WINDOWS\system32\drivers\etc\hosts”，如果操作系統(tǒng)在緩存里找不到 DNS 記錄缰儿，就會(huì)找這個(gè)文件畦粮。

4、如果至此還沒(méi)有命中域名返弹，才會(huì)真正的請(qǐng)求本地域名服務(wù)器（LDNS）來(lái)解析這個(gè)域名锈玉，這臺(tái)服務(wù)器一般在你的城市的某個(gè)角落爪飘。

5义起、如果LDNS仍然沒(méi)有命中，就直接跳到Root Server 域名服務(wù)器請(qǐng)求解析

6师崎、根域名服務(wù)器返回給本地域服務(wù)器 一個(gè)所查詢域的主域名服務(wù)器（gTLD Server默终，國(guó)際頂尖域名服務(wù)器，如.com .cn .org等）地址；

7齐蔽、此時(shí)LDNS再發(fā)送請(qǐng)求給上一步返回的gTLD

8两疚、接受請(qǐng)求的gTLD查找并返回這個(gè)域名對(duì)應(yīng)的Name Server的地址，這個(gè)Name Server就是網(wǎng)站注冊(cè)的域名服務(wù)器

9含滴、Name Server根據(jù)映射關(guān)系表找到目標(biāo)ip诱渤，返回給LDNS

10、 LDNS緩存這個(gè)域名和對(duì)應(yīng)的ip

DNS 域名解析.jpeg

WechatIMG591.png

因域名解析可以返回多個(gè) IP 地址谈况，所以一個(gè)域名可以對(duì)應(yīng)多臺(tái)主機(jī)勺美，客戶端收到多個(gè) IP 地址后，就可以自己使用輪詢算法依次向服務(wù)器發(fā)起請(qǐng)求碑韵，實(shí)現(xiàn)負(fù)載均衡.

如果輸入 一個(gè)不存在的域名：
1赡茸、首先查詢?yōu)g覽器緩存：一段時(shí)間內(nèi)訪問(wèn)過(guò)的一些網(wǎng)址的DNS信息，不同瀏覽器保存的時(shí)常不同
2祝闻、如果沒(méi)有找到對(duì)應(yīng)的記錄占卧，這個(gè)時(shí)候?yàn)g覽器會(huì)嘗試調(diào)用操作系統(tǒng)緩存來(lái)繼續(xù)查找這個(gè)網(wǎng)址的對(duì)應(yīng)DNS信息
3、host文件
4联喘、根域名 頂級(jí)域名
5华蜒、 返回失敗

TCP連接

TCP報(bào)文段結(jié)構(gòu)

• 源端口號(hào)+目的端口號(hào)
• 序號(hào)
• 確認(rèn)號(hào)
• 首部長(zhǎng)度+保留未用+URG+ACK+PSH+RST+SYN+FIN+接收窗口
• 因特網(wǎng)校驗(yàn)和+緊急數(shù)據(jù)指針
• 選項(xiàng)
• 數(shù)據(jù)

總結(jié)

http請(qǐng)求.png

Http 緩存
HTTP 緩存控制小結(jié)
徹底弄懂HTTP緩存機(jī)制及原理
瀏覽器緩存機(jī)制剖析
前端緩存
瀏覽器緩存機(jī)制