- 輸入網(wǎng)址
- DNS解析獲取域名對應(yīng)的IP地址
- 建立TCP連接
- web瀏覽器向web服務(wù)器發(fā)送HTTP請求
- 服務(wù)器的永久重定向響應(yīng)
- web服務(wù)器做出應(yīng)答
- 瀏覽器顯示 HTML
- web服務(wù)器關(guān)閉TCP連接
1疤坝、輸入網(wǎng)址
瀏覽器會在用戶輸入url時查找歷史信息對其補全或直接顯示緩存在本地的網(wǎng)頁兆解。
2、DNS解析獲取域名對應(yīng)的IP地址
用戶發(fā)起請求后跑揉，瀏覽器會解析這個url锅睛，將其轉(zhuǎn)換為ip地址。
第一步：查看hosts文件历谍，如果hosts文件里面配置了url和ip的關(guān)系现拒，則直接使用里面的ip地址。hosts文件存儲在操作系統(tǒng)的如下目錄中望侈，打開后可手動配置印蔬。下圖的示例中，左邊是ip地址脱衙，右邊是url侥猬。
第二步：瀏覽器向本地DNS服務(wù)器（用網(wǎng)絡(luò)運營商提供例驹，如中國移動等）發(fā)送一個DNS請求。DNS (Domain Name System)是域名系統(tǒng)退唠，用來將域名解析成ip地址鹃锈。
第三步：本地DNS在收到請求后查詢緩存，如果沒有命中瞧预，還會向根DNS服務(wù)器發(fā)送請求屎债。
第四步：根DNS服務(wù)器不直接存儲解析數(shù)據(jù)，而是返回一個域服務(wù)器地址垢油，本地DNS服務(wù)器轉(zhuǎn)而向域服務(wù)器發(fā)送查詢請求盆驹。
第五步：本地DNS服務(wù)器繼續(xù)向域服務(wù)器（例如.com域服務(wù)器）發(fā)出請求，返回的是一個解析服務(wù)器的地址滩愁。
第六步：本地DNS服務(wù)器向域名的解析服務(wù)器發(fā)出請求召娜，獲得域名與ip的映射關(guān)系。在返回數(shù)據(jù)時惊楼，本地DNS會進行緩存。
3秸讹、建立TCP連接
瀏覽器會首先與服務(wù)器依照三次握手和四次揮手建立TCP連接（根據(jù)OSI七層協(xié)議檀咙，低層次的協(xié)議需要率先建立連接，只有建立了TCP連接才能使用HTTP協(xié)議）璃诀。
4弧可、瀏覽器向服務(wù)器發(fā)送HTTP請求
一個典型的http request header一般需要包括請求的方法，例如GET或者POST等慷妙，不常用的還有PUT和DELETE潮剪、HEAD蹭秋、OPTION以及TRACE方法，一般的瀏覽器只能發(fā)起GET或者POST請求校套。
HTTP的請求信息主要包含三部分內(nèi)容：
- 請求方法URI協(xié)議/版本
- 請求頭(Request Header)
- 請求正文(Request Body)
URI和URL的區(qū)別：https://blog.csdn.net/qq_32595453/article/details/80563142
一個完整的HTTP請求如下所示：
// 請求行：方法URL議/版本
GET/sample.jsp HTTP/1.1
// 請求頭：存儲瀏覽器語言和連接狀態(tài)等信息
Accept:image/gif.image/jpeg,*/
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate
// 請求正文：以空行和請求頭分隔，存儲請求參數(shù)和他們對應(yīng)的值
username=jinqiao&password=1234
以Chrome瀏覽器為例牧抵，按F12打開控制臺笛匙，選擇標簽頁中的Network，然后選擇一個請求犀变。下圖展示的就是一個Http Request Header和他發(fā)送給服務(wù)器的參數(shù)妹孙。
5、服務(wù)器的永久重定向響應(yīng)
服務(wù)器給瀏覽器響應(yīng)一個301永久重定向響應(yīng)获枝，這樣瀏覽器就會訪問“http://www.google.com/” 而非“http://google.com/”蠢正。
重定向原因：
- 網(wǎng)站調(diào)整（如改變網(wǎng)頁目錄結(jié)構(gòu)）；
- 網(wǎng)頁被移到一個新地址省店；
- 網(wǎng)頁擴展名改變(如應(yīng)用需要把.php改成.Html或.shtml)嚣崭。
此時如果不進行重定向的話笨触，用戶會得到一個404報錯信息。之后有鹿，瀏覽器根據(jù)服務(wù)器返回的重定向地址繼續(xù)請求網(wǎng)站信息旭旭。
6、web服務(wù)器做出應(yīng)答
和HTTP請求一樣葱跋，HTTP響應(yīng)信息也主要包含三個部分：
- 狀態(tài)行
- 響應(yīng)頭(Response Header)
- 響應(yīng)正文(Response Body)
// 狀態(tài)行：包括協(xié)議版本持寄、數(shù)字形式的狀態(tài)代碼、及相應(yīng)的狀態(tài)描述娱俺，以空格分隔
HTTP/1.1 200 OK
// 響應(yīng)頭：存儲日期和內(nèi)容長度等信息
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122
// 響應(yīng)正文：以空行和響應(yīng)頭分隔稍味，存儲cookie，html荠卷，image模庐，后端返回的請求數(shù)據(jù)等
＜html＞
＜head＞
＜title＞http＜/title＞
＜/head＞
＜body＞
＜!-- body goes here --＞
＜/body＞
＜/html＞
7、瀏覽器顯示HTML
網(wǎng)頁是根據(jù)服務(wù)器返回的html文件顯示的油宜，顯示過程中需要進行渲染掂碱。以webkit為例，渲染的過程包括：解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹慎冤。
渲染完成后疼燥，瀏覽器會發(fā)送請求獲取嵌入在HTML中的資源（如圖片、音頻蚁堤、視頻醉者、CSS、JS等）披诗，這個過程和上面發(fā)送請求的過程是一樣的撬即。
8、web服務(wù)器關(guān)閉TCP連接
是否關(guān)閉TCP連接可以通過參數(shù)配置（connection:keep-alive）呈队。新版本的協(xié)議也會通過默認持久連接來節(jié)省帶寬剥槐。TCP連接關(guān)閉后，一次瀏覽器顯示頁面的交互就結(jié)束了掂咒。
補充：
上面的內(nèi)容將整個交互中的各部分系統(tǒng)簡單分成了瀏覽器和后端服務(wù)器（這個服務(wù)器會返回html和其他的業(yè)務(wù)請求信息）才沧。然而，越來越多的系統(tǒng)開始采用前后端分離的架構(gòu)绍刮，這時候在交互的細節(jié)上就會稍有不同温圆。
一般來說，分離后的前端服務(wù)和后端服務(wù)是兩個獨立的Java應(yīng)用程序孩革。前端負責接收瀏覽器的請求岁歉，如果是頁面加載，則直接將信息返回給瀏覽器；如果有業(yè)務(wù)邏輯處理要求或數(shù)據(jù)庫訪問要求锅移，前端則會向后端服務(wù)器發(fā)送請求熔掺。
此時，后端服務(wù)器只會收到前端發(fā)來的請求非剃，處理完請求后也會直接將結(jié)果返回給前端置逻，不會和瀏覽器產(chǎn)生直接的交互。
而瀏覽器可以將前端和后端統(tǒng)一看作一個服務(wù)器备绽，不去關(guān)心他們內(nèi)部的交互和實現(xiàn)邏輯∪耄現(xiàn)實場景中，后端服務(wù)器的架構(gòu)一般會更加復雜肺素。
