1.瀏覽器接收URL

URL包含的信息：協(xié)議、網(wǎng)絡(luò)地址:端口號(hào)床玻、資源路徑毁涉、查詢字符串？锈死、片段標(biāo)識(shí)符#

2.將URL與緩存進(jìn)行比對(duì)如果請(qǐng)求的頁面在緩存中且未過期贫堰，則直接進(jìn)行第8步

緩存分為徹底緩存和緩存協(xié)商，這里的確認(rèn)是否過期是指徹底緩存（緩存失效之前不再需要跟服務(wù)器交互）待牵。

2.1 徹底緩存的機(jī)制（http首部字段）：cache-control其屏，Expires

--Expires是一個(gè)絕對(duì)時(shí)間，即服務(wù)器時(shí)間缨该。瀏覽器檢查當(dāng)前時(shí)間偎行，如果還沒到失效時(shí)間就直接使用緩存文件。但是該方法存在一個(gè)問題：服務(wù)器時(shí)間與客戶端時(shí)間可能不一致。因此該字段已經(jīng)很少使用蛤袒，現(xiàn)在基本用cache-control進(jìn)行判斷熄云。

--cache-control中的max-age保存一個(gè)相對(duì)時(shí)間。例如Cache-Control: max-age = 484200妙真，表示瀏覽器收到文件后缴允，緩存在484200s內(nèi)均有效。 如果同時(shí)存在cache-control和Expires珍德，瀏覽器總是優(yōu)先使用cache-control练般。

cache-control還有其他指令：
（請(qǐng)求/響應(yīng)指令）
no-cache,使用緩存前必須和服務(wù)器進(jìn)行確認(rèn)，也就是需要發(fā)起請(qǐng)求菱阵。
no-store,不緩存踢俄；
（響應(yīng)指令）
public缩功，緩存文件保存在緩存服務(wù)器上晴及，且其他用戶也可以訪問；
private嫡锌，只有特定用戶才能訪問該緩存資源虑稼。

2.2 當(dāng)緩存過期時(shí)，瀏覽器會(huì)向服務(wù)器發(fā)起請(qǐng)求詢問資源是否真正過期势木，這就是緩存協(xié)商蛛倦。對(duì)應(yīng)http首部字段：last-modified，Etag

--last-modified是第一次請(qǐng)求資源時(shí)啦桌，服務(wù)器返回的字段溯壶，表示最后一次更新的時(shí)間。下一次瀏覽器請(qǐng)求資源時(shí)就發(fā)送if-modified-since字段甫男。服務(wù)器用本地Last-modified時(shí)間與if-modified-since時(shí)間比較且改，如果不一致則認(rèn)為緩存已過期并返回新資源給瀏覽器；如果時(shí)間一致則發(fā)送304狀態(tài)碼板驳，讓瀏覽器繼續(xù)使用緩存又跛。當(dāng)然，用該方法也存在問題若治，比如修改時(shí)間有變化但實(shí)際內(nèi)容沒有變化慨蓝，而服務(wù)器卻再次將資源發(fā)送給瀏覽器。所以端幼，使用Etag進(jìn)行判斷更好礼烈。

--Etag：資源的實(shí)體標(biāo)識(shí)（哈希字符串），當(dāng)資源內(nèi)容更新時(shí)婆跑，Etag會(huì)改變济丘。服務(wù)器會(huì)判斷Etag是否發(fā)生變化，如果變化則返回新資源，否則返回304摹迷。

緩存協(xié)商的過程需要發(fā)起一起HTTP請(qǐng)求疟赊，如果返回304則繼續(xù)使用緩存。對(duì)于移動(dòng)端一次請(qǐng)求還是有代價(jià)的峡碉，所以我們需要避免304近哟。
對(duì)于很少進(jìn)行更改的靜態(tài)文件，可以在文件名中加入版本號(hào)鲫寄，如get.v1.js吉执，并且把Cache-Control的max-age設(shè)置成一年半載，這樣就不會(huì)發(fā)送請(qǐng)求地来。
需要注意的是戳玫，當(dāng)這些文件更新的時(shí)候，我們需要更新其版本號(hào)未斑，這樣瀏覽器才會(huì)到服務(wù)器下載新資源咕宿。

2.3 貼一個(gè)緩存機(jī)制的圖（來自淺談Web緩存）

3.如果網(wǎng)絡(luò)地址不是一個(gè) IP 地址芽突，通過DNS解析域名返回一個(gè)IP地址

3.1 DNS協(xié)議：

DNS數(shù)據(jù)庫是域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫试浙，DNS協(xié)議用來將域名轉(zhuǎn)換為IP地址，它運(yùn)行在UDP協(xié)議之上寞蚌。為什么選擇UDP而非TCP田巴？原因如下：UDP無需連接，時(shí)效性更好挟秤，進(jìn)行一次查詢只需要兩個(gè)DNS包壹哺。而TCP需要先用3個(gè)包建立連接，再用2個(gè)DNS包進(jìn)行查詢煞聪，最后用4個(gè)包斷開連接斗躏，連接成本遠(yuǎn)大于查詢本身，容易讓DNS服務(wù)器不堪重負(fù)昔脯。

3.2 DNS查詢：

操作系統(tǒng)會(huì)先檢查本地hosts文件是否有這個(gè)網(wǎng)址映射關(guān)系啄糙，如果有就調(diào)用這個(gè)IP地址映射，完成域名解析云稚。

否則隧饼，查找本地DNS解析器緩存，如果查找到則返回静陈。

否則燕雁，查找本地DNS服務(wù)器诞丽，如果查找到則返回。

否則拐格，1）未用轉(zhuǎn)發(fā)模式僧免，按根域服務(wù)器 ->頂級(jí)域,.com->第二層域，example.com ->子域捏浊，www.example.com的順序找到IP地址懂衩。2）用轉(zhuǎn)發(fā)模式，按上一級(jí)DNS服務(wù)器->上上級(jí)->....逐級(jí)向上查詢找到IP地址金踪。

4.瀏覽器與服務(wù)器通過三次握手(SYN,SYN/ACK,ACK)建立TCP 連接

為什么需要進(jìn)行三次握手浊洞，而不是兩次握手？

原因是兩次握手不可靠胡岔。比如法希，瀏覽器發(fā)送一個(gè)連接請(qǐng)求包A，但包A在半路上堵車了靶瘸，瀏覽器就認(rèn)為包A丟失了苫亦，所以重新發(fā)生一個(gè)請(qǐng)求包B給服務(wù)器。服務(wù)器收到請(qǐng)求奕锌，建立連接著觉。兩端進(jìn)行通信村生，結(jié)束后關(guān)閉連接惊暴。但是這時(shí)候，包A到達(dá)了服務(wù)器趁桃，服務(wù)器不知道這是一個(gè)無效的包辽话，所以進(jìn)行響應(yīng)。這時(shí)兩次握手已經(jīng)完成卫病，兩端就建立起一個(gè)無效的連接油啤。但瀏覽器認(rèn)為自己沒發(fā)出請(qǐng)求，所以不會(huì)回應(yīng)蟀苛，這樣就讓服務(wù)器白白等待回應(yīng)益咬，浪費(fèi)了服務(wù)器資源。而三次握手的機(jī)制下帜平，瀏覽器知道自己并沒有請(qǐng)求連接幽告，會(huì)發(fā)送拒絕包給服務(wù)器，服務(wù)器收到回應(yīng)后也會(huì)結(jié)束這次無效的連接裆甩。

5.瀏覽器向服務(wù)器發(fā)送HTTP請(qǐng)求冗锁。

數(shù)據(jù)經(jīng)過應(yīng)用層、傳輸層嗤栓、網(wǎng)絡(luò)層冻河、物理層逐層封裝箍邮，傳輸?shù)较乱粋€(gè)目的地。

其中叨叙，每一層的作用如下锭弊。
應(yīng)用層：為應(yīng)用進(jìn)程提供服務(wù)，加應(yīng)用層首部封裝為協(xié)議數(shù)據(jù)單元擂错。
傳輸層：實(shí)現(xiàn)端到端通信廷蓉，加TCP首部封裝為數(shù)據(jù)包，TCP控制了數(shù)據(jù)包的發(fā)送序列的產(chǎn)生马昙，不斷的調(diào)整發(fā)送序列桃犬，實(shí)現(xiàn)流控和數(shù)據(jù)完整。
網(wǎng)絡(luò)層：轉(zhuǎn)發(fā)分組并選擇路由行楞；加IP首部封裝為IP分組攒暇。
數(shù)據(jù)鏈路層：相鄰的節(jié)點(diǎn)間的數(shù)據(jù)傳輸；加首部[mac地址]和尾部封裝為幀子房。
物理層：具體物理媒介中的數(shù)據(jù)傳送形用，數(shù)據(jù)轉(zhuǎn)換為比特流。

下一個(gè)目的地接受到數(shù)據(jù)后证杭，從物理層得到數(shù)據(jù)然后經(jīng)過逐層的解包 到 鏈路層 到 網(wǎng)絡(luò)層田度，然后開始上述的處理，在經(jīng)網(wǎng)絡(luò)層 鏈路層 物理層將數(shù)據(jù)封裝好繼續(xù)傳往下一個(gè)地址解愤。
到達(dá)最終目的地镇饺，再經(jīng)過5層結(jié)構(gòu)，逐層剝離送讲，最終將數(shù)據(jù)送到目的主機(jī)的目的端口奸笤。

6.服務(wù)器收到請(qǐng)求，從它的文檔空間中查找資源并返回HTTP響應(yīng)哼鬓。

7.瀏覽器接受 HTTP 響應(yīng)监右，檢查 HTTP header 里的狀態(tài)碼，并做出不同的處理方式异希。

比如404顯示錯(cuò)誤頁面健盒，304使用緩存，200下一步解碼和渲染称簿， 204頁面不會(huì)發(fā)生更新扣癣。

常見狀態(tài)碼：200 ok, 204 no content, 206 partial content

301 moved permanently(資源已分配新的uri)，302 found(本次使用新uri訪問)予跌，303 see other(以get定向到另一個(gè)uri)搏色，304 not modified, 307 temporary redirect(不會(huì)從post改為get)

400 bad request，402 unauthorized券册，403 forbidden, 404 not found

500 internal server error频轿，503 service unavailable

8.如果是可以緩存的垂涯，這個(gè)響應(yīng)則會(huì)被存儲(chǔ)起來。

根據(jù)首部字段判斷是否進(jìn)行緩存航邢。例如耕赘，Cache-Control, no-cache(每次使用緩存前和服務(wù)器確認(rèn))，no-store 絕對(duì)禁止緩存

9.解碼

9.1 瀏覽器拿到index.html文件后膳殷，就開始解析其中的html代碼操骡，遇到j(luò)s/css/image等靜態(tài)資源時(shí)，就向服務(wù)器端去請(qǐng)求下載

9.2 解析成對(duì)應(yīng)的樹形數(shù)據(jù)結(jié)構(gòu)DOM樹赚窃、CSS規(guī)則樹册招，Javascript腳本通過DOM API和CSSOM API來操作DOM樹、CSS規(guī)則樹勒极。

10.渲染

10.1 計(jì)算CSS樣式（JS可動(dòng)態(tài)修改dom或css,進(jìn)一步改變渲染樹和分布）

10.2 構(gòu)建渲染樹（Repaint：屏幕的一部分要重畫是掰，比如某個(gè)CSS的背景色變了，元素的幾何尺寸沒有變辱匿。Reflow：幾何尺寸變了键痛，我們需要重新驗(yàn)證并計(jì)算Render Tree。）

10.3 確認(rèn)布局（定位坐標(biāo)和大小匾七，是否換行絮短，各種position, overflow, z-index屬性 ……）

10.4 繪制（調(diào)用操作系統(tǒng)Native GUI的API繪制，將每個(gè)節(jié)點(diǎn)轉(zhuǎn)化為實(shí)際像素繪制到視口上）

11.關(guān)閉TCP連接或繼續(xù)保持連接

通過四次揮手關(guān)閉連接(FIN ACK, ACK, FIN ACK, ACK)昨忆。

為什么需要進(jìn)行四次揮手丁频？

第一次揮手是瀏覽器發(fā)完數(shù)據(jù)后，發(fā)送FIN請(qǐng)求斷開連接扔嵌。第二次揮手是服務(wù)器發(fā)送ACK表示同意限府，如果在這一次服務(wù)器也發(fā)送FIN請(qǐng)求斷開連接似乎也沒有不妥夺颤，但考慮到服務(wù)器可能還有數(shù)據(jù)要發(fā)送痢缎，所以服務(wù)器發(fā)送FIN應(yīng)該放在第三次揮手中。這樣瀏覽器需要返回ACK表示同意世澜，也就是第四次揮手独旷。

簡(jiǎn)而言之，一端斷開連接需要兩次揮手（請(qǐng)求和回應(yīng)）寥裂，兩端斷開連接就需要四次揮手了嵌洼。