當(dāng)我們?cè)跒g覽器中輸入www.baidu.com并按下回車(chē)時(shí)，瀏覽器就會(huì)給我們打開(kāi)百度的首頁(yè)面。瀏覽器打開(kāi)任何一個(gè)頁(yè)面都需要一定的時(shí)間，那么從我們輸入地址到頁(yè)面展現(xiàn)這一段時(shí)間中，究竟發(fā)生了哪些事情呢？
一、識(shí)別URL
URL，全稱(chēng)統(tǒng)一資源定位符，用于定位用戶(hù)所輸入的網(wǎng)站資源。完整的URL是由協(xié)議（比如http，ftp）、域名（比如baidu.com）、文件路徑（比如/1441477.html）和端口（比如:80）四個(gè)部分組成的。
二、域名解析
互聯(lián)網(wǎng)上每一臺(tái)計(jì)算機(jī)的唯一標(biāo)識(shí)是它的IP地址，但是IP地址并不方便記憶。用戶(hù)更喜歡用方便記憶的網(wǎng)址去尋找互聯(lián)網(wǎng)上的其它計(jì)算機(jī)，也就是上面提到的百度的網(wǎng)址。因此瀏覽器必須要知道網(wǎng)站的IP地址才可以真正地向網(wǎng)站發(fā)出請(qǐng)求。而將域名轉(zhuǎn)換為IP的，就是DNS
DNS查詢(xún)的過(guò)程一般按下面次序進(jìn)行
- 瀏覽器緩存
- 系統(tǒng)緩存（本地host文件）
- 路由器緩存
- ISP（互聯(lián)網(wǎng)服務(wù)提供商）DNS緩存
- 根域名服務(wù)器
- 頂級(jí)域名服務(wù)器
- 主域名服務(wù)器
關(guān)于DNS解析詳細(xì)內(nèi)容可以參考這篇文章
三、建立TCP連接
HTTP協(xié)議是建立在TCP協(xié)議之上的一種應(yīng)用，在獲取到服務(wù)器的IP地址后，瀏覽器需要開(kāi)始與服務(wù)器之間建立TCP連接，這其中要經(jīng)過(guò)三次握手。這部分涉及到計(jì)算機(jī)網(wǎng)絡(luò)的相關(guān)知識(shí)，可參考TCP三次握手簡(jiǎn)述
四、瀏覽器發(fā)起http請(qǐng)求
發(fā)送HTTP請(qǐng)求的過(guò)程就是構(gòu)建HTTP請(qǐng)求報(bào)文并通過(guò)TCP協(xié)議中發(fā)送到服務(wù)器指定端口(HTTP協(xié)議80/8080, HTTPS協(xié)議443)。HTTP請(qǐng)求報(bào)文是由三部分組成:
- 請(qǐng)求方法URI協(xié)議/版本
請(qǐng)求方法有GET, POST, PUT, DELETE等等
- 請(qǐng)求頭(Request Header)
請(qǐng)求頭包含許多有關(guān)的客戶(hù)端環(huán)境和請(qǐng)求正文的有用信息。例如，請(qǐng)求頭可以聲明瀏覽器所用的語(yǔ)言，請(qǐng)求正文的長(zhǎng)度等
- 請(qǐng)求正文
請(qǐng)求正文中可以包含客戶(hù)提交的查詢(xún)字符串信息，或者想服務(wù)器提交的數(shù)據(jù)等
五、服務(wù)器響應(yīng)返回?cái)?shù)據(jù)
服務(wù)器拿到請(qǐng)求之后會(huì)根據(jù)請(qǐng)求的方法、訪問(wèn)的路徑、提交的參數(shù)等進(jìn)行處理，返回一個(gè)HTTP響應(yīng)，HTTP響應(yīng)報(bào)文也是由三部分組成:
- 響應(yīng)行
響應(yīng)行一般包含協(xié)議版本、狀態(tài)碼及其描述組成
- 響應(yīng)頭
響應(yīng)報(bào)頭與請(qǐng)求頭類(lèi)似，為響應(yīng)報(bào)文添加了一些附加信息
- 響應(yīng)體
響應(yīng)體就是響應(yīng)的消息體，如果是純數(shù)據(jù)就是返回純數(shù)據(jù)，如果請(qǐng)求的是HTML頁(yè)面，那么返回的就是HTML代碼，如果是JS就是JS代碼，如此之類(lèi)
六、瀏覽器解析、渲染
這樣瀏覽器就接收到了服務(wù)器返回的html文件后就開(kāi)始逐行解析文件的內(nèi)容。瀏覽器在解析過(guò)程中，如果遇到請(qǐng)求外部資源時(shí)，如圖像,JS等。瀏覽器將重復(fù)四、五過(guò)程下載該資源。
瀏覽器是一個(gè)邊解析邊渲染的過(guò)程。首先瀏覽器解析HTML文件構(gòu)建DOM樹(shù)，然后解析CSS文件構(gòu)建渲染樹(shù)，等到渲染樹(shù)構(gòu)建完成后，瀏覽器開(kāi)始布局渲染樹(shù)并將其繪制到屏幕上。
瀏覽器渲染原理
七、頁(yè)面展現(xiàn)
待瀏覽器將頁(yè)面全部渲染完之后，一個(gè)完整的百度頁(yè)面就成功的展現(xiàn)在我們面前啦！
