??剛接觸這個問題，上網(wǎng)查了些資料，才發(fā)現(xiàn)這里面涉及到的知識很多...如果對計(jì)算機(jī)網(wǎng)絡(luò)和硬件比較熟悉的話，估計(jì)可以出一本書了吧。在這里我簡單地把我的理解寫下來。
1、瀏覽器地址欄輸入U(xiǎn)RL，回車
2、瀏覽器查找當(dāng)前的URL是否存在緩存，并判斷緩存是否過期
3、DNS解析URL對應(yīng)的IP
4、根據(jù)IP建立TCP連接，與服務(wù)器連接
5、瀏覽器發(fā)起HTTP請求
6、服務(wù)器處理請求，瀏覽器接收HTTP響應(yīng)
7、瀏覽器頁面渲染，建立DOM樹
8、關(guān)閉TCP連接
下面對部分的步驟展開說下。
一：瀏覽器緩存
??HTTP緩存有多種規(guī)則，下圖展示的是對比緩存的用戶請求資源過程，對比緩存通過HTTP的last-modified，Etag字段進(jìn)行判斷。
??last-modified是第一次請求資源時(shí)，服務(wù)器返回的字段，表示最后一次更新的時(shí)間。下一次瀏覽器請求資源時(shí)就發(fā)送if-modified-since字段。服務(wù)器用本地Last-modified時(shí)間與if-modified-since時(shí)間比較，如果不一致則認(rèn)為緩存已過期并返回新資源給瀏覽器；如果時(shí)間一致則發(fā)送304狀態(tài)碼，讓瀏覽器繼續(xù)使用緩存。
??Etag：資源的實(shí)體標(biāo)識（哈希字符串），當(dāng)資源內(nèi)容更新時(shí)，Etag會改變。服務(wù)器會判斷Etag是否發(fā)生變化，如果變化則返回新資源，否則返回304。
二：DNS解析：
??上述圖片是查找www.google.com的IP地址過程。首先在本地域名服務(wù)器中查詢IP地址，如果沒有找到的情況下，本地域名服務(wù)器會向根域名服務(wù)器發(fā)送一個請求，如果根域名服務(wù)器也不存在該域名時(shí)，本地域名會向com頂級域名服務(wù)器發(fā)送一個請求，依次類推下去。直到最后本地域名服務(wù)器得到google的IP地址并把它緩存到本地，供下次查詢使用。從上述過程中，可以看出網(wǎng)址的解析是一個從右向左的過程: com -> google.com -> www.google.com。但是你是否發(fā)現(xiàn)少了點(diǎn)什么，根域名服務(wù)器的解析過程呢？事實(shí)上，真正的網(wǎng)址是www.google.com.，并不是我多打了一個.，這個.對應(yīng)的就是根域名服務(wù)器，默認(rèn)情況下所有的網(wǎng)址的最后一位都是.，既然是默認(rèn)情況下，為了方便用戶，通常都會省略，瀏覽器在請求DNS的時(shí)候會自動加上，所有網(wǎng)址真正的解析過程為: . -> .com -> google.com. -> www.google.com.。
三：TCP連接
??在通過第一步的DNS域名解析后，獲取到了服務(wù)器的IP地址，在獲取到IP地址后，便會開始建立一次連接，這是由TCP協(xié)議完成的，主要通過三次握手進(jìn)行連接。
（1）第一次握手： 建立連接時(shí)，客戶端發(fā)送syn包（syn=j）到服務(wù)器，并進(jìn)入SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn)；
（2）第二次握手： 服務(wù)器收到syn包，必須確認(rèn)客戶的SYN（ack=j+1），同時(shí)自己也發(fā)送一個SYN包（syn=k），即SYN+ACK包，此時(shí)服務(wù)器進(jìn)入SYN_RECV狀態(tài)；
（3）第三次握手： 客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1），此包發(fā)送完畢，客戶端和服務(wù)器進(jìn)入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手。
??完成三次握手，客戶端與服務(wù)器開始傳送數(shù)據(jù)。
四：瀏覽器向服務(wù)器發(fā)送HTTP請求
??完整的HTTP請求包含請求起始行、請求頭部、請求主體三部分。
五：瀏覽器接收響應(yīng)
??服務(wù)器在收到瀏覽器發(fā)送的HTTP請求之后，會將收到的HTTP報(bào)文封裝成HTTP的Request對象，并通過不同的Web服務(wù)器進(jìn)行處理，處理完的結(jié)果以HTTP的Response對象返回，主要包括狀態(tài)碼，響應(yīng)頭，響應(yīng)報(bào)文三個部分。
??狀態(tài)碼主要包括以下部分:
1xx：指示信息–表示請求已接收，繼續(xù)處理。
2xx：成功–表示請求已被成功接收、理解、接受。
3xx：重定向–要完成請求必須進(jìn)行更進(jìn)一步的操作。
4xx：客戶端錯誤–請求有語法錯誤或請求無法實(shí)現(xiàn)。
5xx：服務(wù)器端錯誤–服務(wù)器未能實(shí)現(xiàn)合法的請求。
??響應(yīng)頭主要由Cache-Control、 Connection、Date、Pragma等組成。
??響應(yīng)體為服務(wù)器返回給瀏覽器的信息，主要由HTML，css，js，圖片文件組成。
六：頁面渲染
??如果說響應(yīng)的內(nèi)容是HTML文檔的話，就需要瀏覽器進(jìn)行解析渲染呈現(xiàn)給用戶。整個過程涉及兩個方面：解析和渲染。在渲染頁面之前，需要構(gòu)建DOM樹和CSSOM樹。
在瀏覽器還沒接收到完整的 HTML 文件時(shí)，它就開始渲染頁面了，在遇到外部鏈入的腳本標(biāo)簽或樣式標(biāo)簽或圖片時(shí)，會再次發(fā)送 HTTP 請求重復(fù)上述的步驟。在收到 CSS 文件后會對已經(jīng)渲染的頁面重新渲染，加入它們應(yīng)有的樣式，圖片文件加載完立刻顯示在相應(yīng)位置。在這一過程中可能會觸發(fā)頁面的重繪或重排。這里有兩個重要概念：Reflow和Repaint。
??Reflow，也稱作Layout，中文叫回流，一般意味著元素的內(nèi)容、結(jié)構(gòu)、位置或尺寸發(fā)生了變化，需要重新計(jì)算樣式和渲染樹，這個過程稱為Reflow。
??Repaint，中文重繪，意味著元素發(fā)生的改變只是影響了元素的一些外觀之類的時(shí)候（例如，背景色，邊框顏色，文字顏色等），此時(shí)只需要應(yīng)用新樣式繪制這個元素就OK了，這個過程稱為Repaint。
七：關(guān)閉TCP連接或繼續(xù)保持連接
??通過四次揮手關(guān)閉連接(FIN ACK, ACK, FIN ACK, ACK)。
（1）第一次揮手是瀏覽器發(fā)完數(shù)據(jù)后，發(fā)送FIN請求斷開連接。
（2）第二次揮手是服務(wù)器發(fā)送ACK表示同意，如果在這一次服務(wù)器也發(fā)送FIN請求斷開連接似乎也沒有不妥，但考慮到服務(wù)器可能還有數(shù)據(jù)要發(fā)送，所以服務(wù)器發(fā)送FIN應(yīng)該放在第三次揮手中。
（3）這樣瀏覽器需要返回ACK表示同意，也就是第四次揮手
