當(dāng)用戶在瀏覽器地址欄輸入一串URL到頁面整個(gè)顯示在用戶面前時(shí)，這個(gè)過程中發(fā)生了什么呢？大致可以分為以下幾步：

1. 輸入U(xiǎn)RL地址
2. 瀏覽器查找域名的IP地址
3. 瀏覽器向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求
4. 服務(wù)器定向響應(yīng)
5. 服務(wù)器跟蹤定向地址
6. 服務(wù)器處理請(qǐng)求
7. 服務(wù)器返回一個(gè)HTTP響應(yīng)
8. 瀏覽器顯示HTML并發(fā)送請(qǐng)求獲取嵌入在HTML中的資源（CSS，JS等）

輸入U(xiǎn)RL地址

當(dāng)我們開始在瀏覽器中輸入網(wǎng)址的時(shí)候，瀏覽器其實(shí)就已經(jīng)在智能的匹配可能得 url 了，他會(huì)從歷史記錄，書簽等地方，找到已經(jīng)輸入的字符串可能對(duì)應(yīng)的 url地址。

域名解析，獲取IP

當(dāng)輸入U(xiǎn)RL之后，瀏覽器會(huì)這個(gè)域名，轉(zhuǎn)換為IP。

1. 瀏覽器會(huì)首先查看本地hosts文件，看看其中是否有對(duì)應(yīng)的IP，如果有就直接使用hosts文件中的IP地址
2. 如果在本地hosts文件中沒有找到對(duì)應(yīng)的IP地址，瀏覽器會(huì)發(fā)送一個(gè)DNS請(qǐng)求到本地DNS服務(wù)器（本地DNS服務(wù)器一般就是個(gè)人網(wǎng)絡(luò)接入服務(wù)商提供，比如中國移動(dòng)，中國電信）
3. 查詢你輸入的網(wǎng)址的DNS請(qǐng)求到達(dá)本地DNS服務(wù)器之后，本地DNS服務(wù)器會(huì)首先查詢它的緩存記錄，如果緩存中有此條記錄，就可以直接返回結(jié)果，此過程是遞歸的方式進(jìn)行查詢。如果沒有，本地DNS服務(wù)器還要向DNS根服務(wù)器進(jìn)行查詢。
4. 根DNS服務(wù)器沒有記錄具體的域名和IP地址的對(duì)應(yīng)關(guān)系，而是告訴本地DNS服務(wù)器，你可以到域服務(wù)器上去繼續(xù)查詢，并給出域服務(wù)器的地址。
5. 本地DNS服務(wù)器繼續(xù)向域服務(wù)器發(fā)出請(qǐng)求，在這個(gè)例子中，請(qǐng)求的對(duì)象是.com域服務(wù)器。.com域服務(wù)器收到請(qǐng)求之后，也不會(huì)直接返回域名和IP地址的對(duì)應(yīng)關(guān)系，而是告訴本地DNS服務(wù)器，你的域名的解析服務(wù)器的地址。
   6.最后，本地DNS服務(wù)器向域名的解析服務(wù)器發(fā)出請(qǐng)求，這時(shí)就能收到一個(gè)域名和IP地址對(duì)應(yīng)關(guān)系，本地DNS服務(wù)器不僅要把IP地址返回給用戶電腦，還要把這個(gè)對(duì)應(yīng)關(guān)系保存在緩存中，以備下次別的用戶查詢時(shí)，可以直接返回結(jié)果，加快網(wǎng)絡(luò)訪問。

瀏覽器向 web 服務(wù)器發(fā)送一個(gè) HTTP 請(qǐng)求

拿到域名對(duì)應(yīng)的IP地址之后，瀏覽器會(huì)以一個(gè)隨機(jī)端口（1024。這個(gè)連接請(qǐng)求到達(dá)服務(wù)器端后（這中間通過各種路由設(shè)備，局域網(wǎng)內(nèi)除外），進(jìn)入到網(wǎng)卡，然后是進(jìn)入到內(nèi)核的TCP/IP協(xié)議棧（用于識(shí)別該連接請(qǐng)求，解封包，一層一層的剝開）最終到達(dá)WEB程序，最終建立了TCP/IP的連接。

服務(wù)器定向響應(yīng)

服務(wù)器給瀏覽器響應(yīng)一個(gè)301永久重定向響應(yīng)，這樣瀏覽器就會(huì)訪問“http://www.google.com/” 而非“http://google.com/”。
為什么服務(wù)器一定要重定向而不是直接發(fā)送用戶想看的網(wǎng)頁內(nèi)容呢？其中一個(gè)原因跟搜索引擎排名有關(guān)。如果一個(gè)頁面有兩個(gè)地址，就像http://www.yy.com/和http://yy.com/，搜索引擎會(huì)認(rèn)為它們是兩個(gè)網(wǎng)站，結(jié)果造成每個(gè)搜索鏈接都減少從而降低排名。而搜索引擎知道301永久重定向是什么意思，這樣就會(huì)把訪問帶www的和不帶www的地址歸到同一個(gè)網(wǎng)站排名下。還有就是用不同的地址會(huì)造成緩存友好性變差，當(dāng)一個(gè)頁面有好幾個(gè)名字時(shí)，它可能會(huì)在緩存里出現(xiàn)好幾次。

瀏覽器跟蹤定向地址

現(xiàn)在瀏覽器知道了 "http://www.google.com/"才是要訪問的正確地址，所以它會(huì)發(fā)送另一個(gè)http請(qǐng)求。

服務(wù)器處理請(qǐng)求

經(jīng)過之前的步驟，我們將http請(qǐng)求發(fā)送到服務(wù)器這里，服務(wù)器后端從在固定的端口接收到TCP報(bào)文開始，它會(huì)對(duì)TCP連接進(jìn)行處理，對(duì)HTTP協(xié)議進(jìn)行解析，并按照?qǐng)?bào)文格式進(jìn)一步封裝成HTTP Request對(duì)象，供上層使用。

服務(wù)器返回一個(gè) HTTP 響應(yīng)

經(jīng)過之前的步驟，服務(wù)器收到了我們的請(qǐng)求，也處理我們的請(qǐng)求，到這一步，它會(huì)把它的處理結(jié)果返回，也就是返回一個(gè)HTPP響應(yīng)。

瀏覽器顯示HTML

在瀏覽器沒有完整接受全部HTML文檔時(shí)，它就已經(jīng)開始顯示這個(gè)頁面了。不同瀏覽器可能解析的過程不太一樣，這里我只介紹webkit的渲染過程，下面對(duì)應(yīng)的就是WebKit渲染的過程，這個(gè)過程包括：
解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
瀏覽器在解析html文件時(shí)，會(huì)”自上而下“加載，并在加載過程中進(jìn)行解析渲染。在解析過程中，如果遇到請(qǐng)求外部資源時(shí)，如圖片、外鏈的CSS、iconfont等，請(qǐng)求過程是異步的，并不會(huì)影響html文檔進(jìn)行加載。

解析過程中，瀏覽器首先會(huì)解析HTML文件構(gòu)建DOM樹，然后解析CSS文件構(gòu)建渲染樹，等到渲染樹構(gòu)建完成后，瀏覽器開始布局渲染樹并將其繪制到屏幕上。這個(gè)過程比較復(fù)雜，涉及到兩個(gè)概念: reflow(回流)和repain(重繪)。

DOM節(jié)點(diǎn)中的各個(gè)元素都是以盒模型的形式存在，這些都需要瀏覽器去計(jì)算其位置和大小等，這個(gè)過程稱為relow;當(dāng)盒模型的位置,大小以及其他屬性，如顏色,字體,等確定下來之后，瀏覽器便開始繪制內(nèi)容，這個(gè)過程稱為repain。

頁面在首次加載時(shí)必然會(huì)經(jīng)歷reflow和repain。reflow和repain過程是非常消耗性能的，尤其是在移動(dòng)設(shè)備上，它會(huì)破壞用戶體驗(yàn)，有時(shí)會(huì)造成頁面卡頓。所以我們應(yīng)該盡可能少的減少reflow和repain。

瀏覽器發(fā)送請(qǐng)求獲取嵌入在 HTML 中的資源

在瀏覽器顯示HTML時(shí)，它會(huì)注意到需要獲取其他地址內(nèi)容的標(biāo)簽。這時(shí)，瀏覽器會(huì)發(fā)送一個(gè)獲取請(qǐng)求來重新獲得這些文件。

以上就是輸入U(xiǎn)RL之后到頁面展現(xiàn)的過程，本人初學(xué)文中借鑒了不少網(wǎng)上前輩的資料，在此記錄方便學(xué)習(xí)查看。