部分圖片會上傳失敗，為了良好的閱讀體驗建議查看github原文

1.DNS解析

我們在瀏覽器上輸入地址時杖玲，如www.qq.com顿仇，需要把這個地址解析成ip地址，其中就需要dns解析摆马。
DNS(Domain Name System)是域名系統(tǒng)的英文縮寫臼闻，他的服務(wù)是用來將主機名和域名轉(zhuǎn)換為ip地址的工作。

dns域名

dns域名

工作流程

瀏覽器在查找這個服務(wù)器ip的時候囤采，

1. 首先尋找本地hosts文件是否有這個地址映射關(guān)系述呐，如果有就先調(diào)用這個ip地址映射，完成域名解析
2. 如沒有蕉毯，瀏覽器發(fā)送請求到本地dns服務(wù)器乓搬，本地dns服務(wù)器由網(wǎng)絡(luò)運營商提供
3. 查詢輸入的網(wǎng)址的dns請求到達本地dns服務(wù)器后， 則會先查詢他的緩存記錄代虾，有這條記錄則直接返回进肯；沒有則向dns根服務(wù)器進行查詢
4. 根dns服務(wù)器沒有，則告訴本地dns服務(wù)器棉磨，向dns域服務(wù)器進行查詢江掩，并給出域服務(wù)器的地址
5. 本地dns服務(wù)器繼續(xù)向域服務(wù)器發(fā)請求，域服務(wù)器收到請求后乘瓤，并不會直接返回域名和ip地址的對應(yīng)關(guān)系环形，而是告訴本地dns服務(wù)器，你的域名解析服務(wù)器的地址馅扣。
6. 最后斟赚，本地dns服務(wù)器向域名的解析服務(wù)器發(fā)出請求，從而獲得一個ip地址和域名的對應(yīng)關(guān)系差油，將他返回給瀏覽器并將這個關(guān)系保存在緩存中

dns域名解析基本過程

2.發(fā)送HTTP請求

最終拿到ip地址拗军，瀏覽器根據(jù)這個ip地址和端口號構(gòu)造一個tcp連接請求任洞，這個請求通過各種路由設(shè)備后達到服務(wù)端，進入到網(wǎng)卡发侵，接著進入TCP/IP協(xié)議棧交掏，最終到達服務(wù)端web程序，建立TCP/IP的連接刃鳄。

建立了tcp連接后盅弛，發(fā)起一個http請求。一個典型的http請求頭包括請求方法（GET,POST,etc.）叔锐；還需要一些請求信息：請求方法和請求附帶的數(shù)據(jù)等挪鹏。

一個請求頭

3.服務(wù)器處理請求并返回HTTP報文

后端從固定的端口接收到tcp報文，對tcp鏈接進行處理愉烙，對http協(xié)議進行解析讨盒，按照報文格式進一步封裝為http request對象，這一部分地工作通常由web服務(wù)器進行處理步责。

http響應(yīng)頭也是由三部分組成：狀態(tài)碼返顺、響應(yīng)報頭、響應(yīng)報文蔓肯。

狀態(tài)碼

狀態(tài)碼由三位數(shù)字組成遂鹊，第一位數(shù)字代表響應(yīng)類別：

1. 1xx 請求已接受，繼續(xù)處理（100：continue蔗包；101：Switching Protocols）

2. 2xx 請求成功接受秉扑、處理、解析
   200：ok气忠；

   204 No Content 成功邻储，但不返回任何實體的主體部分；

   206 Partial Content 成功執(zhí)行了一個范圍（Range）請求

3. 3xx 重定向 要完成的請求必須進行更進一步的操作

   301 Moved Permanently 永久性重定向旧噪，響應(yīng)報文的Location首部應(yīng)該有該資源的新URL

   302 Found 臨時性重定向吨娜，響應(yīng)報文的Location首部給出的URL用來臨時定位資源

   303 See Other 請求的資源存在著另一個URI，客戶端應(yīng)使用GET方法定向獲取請求的資源

   304 Not Modified 服務(wù)器內(nèi)容沒有更新淘钟，可以直接讀取瀏覽器緩存

   307 Temporary Redirect 臨時重定向宦赠。

4. 4xx 客戶端錯誤 請求有語法錯誤或請求無法實現(xiàn)

   400 Bad Request 表示客戶端請求有語法錯誤，不能被服務(wù)器所理解

   401 Unauthonzed 表示請求未經(jīng)授權(quán)米母，該狀態(tài)代碼必須與 WWW-Authenticate 報頭域一起使用

   403 Forbidden 表示服務(wù)器收到請求勾扭，但是拒絕提供服務(wù)，通常會在響應(yīng)正文中給出不提供服務(wù)的原因

   404 Not Found 請求的資源不存在铁瞒，例如妙色，輸入了錯誤的URL

5. 5xx 服務(wù)端出錯 服務(wù)端未能處理合法的請求

   500 Internel Server Error 表示服務(wù)器發(fā)生不可預(yù)期的錯誤，導(dǎo)致無法完成客戶端的請求

   503 Service Unavailable 表示服務(wù)器當前不能夠處理客戶端的請求慧耍，在一段時間之后身辨，服務(wù)器可能會恢復(fù)正常

響應(yīng)報頭

響應(yīng)頭

響應(yīng)頭

響應(yīng)報文

通常就是服務(wù)器返回給瀏覽器的文本信息了丐谋，通常是html、css煌珊、js等靜態(tài)資源放在這里号俐。

4.瀏覽器解析渲染頁面

瀏覽器在收到html、css定庵、js等文件后吏饿，按照下圖的過程進行渲染：

解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹

demo

解析渲染過程

當瀏覽器獲得html文件時，會“自上而下”地進行加載蔬浙，并在加載的過程中進行解析和渲染猪落。

1. 瀏覽器先將html解析成一個dom樹，dom樹的構(gòu)建過程是一個深度遍歷的過程畴博，意思是必須加在完當前節(jié)點的所有子節(jié)點才能加載當前節(jié)點的下一個兄弟節(jié)點许布。
2. 在解析過程中需要下載js或css等資源時，異步新建進程進行下載绎晃，并繼續(xù)把html解析成dom樹。
3. 其中杂曲，js通過dom api修改dom庶艾，通過cssom api修改樣式作用到render tree上，css則解析為css rule擎勘。 tree咱揍，瀏覽器將css規(guī)則樹和dom樹結(jié)合起來構(gòu)建render tree。（在文檔加載過程中遇到j(luò)s文件棚饵，則會掛起渲染過程煤裙，等待js文件下載并解析之后，再繼續(xù)進行渲染Ｔ胙）
4. 在渲染的過程中會出現(xiàn)回流（reflow）和重繪（repaint）

回流與重繪

回流（reflow）

只要修改了dom或改變了元素的形狀或大小等會改變布局的操作就會觸發(fā)reflow

重繪（repaint）

只是改變了顏色硼砰，不影響周圍元素或布局，會引起瀏覽器的重繪

減少reflow與repaint

1. 不要一條一條的修改樣式欣硼，應(yīng)該固定寫一個class题翰，更換className，減少reflow次數(shù)
2. 不要把 DOM 結(jié)點的屬性值放在一個循環(huán)里當成循環(huán)里的變量搅轿。
3. 為動畫的 HTML 元件使用position:fixed 或 absolute 践叠，那么修改他們的 CSS 是不會 reflow 的憔购。
4. 避免使用table布局，一個很小的改動會造成整個table reflow血公！

6.連接結(jié)束

參考文檔

1. 【原】老生常談-從輸入url到頁面展示到底發(fā)生了什么
2. 瀏覽器加載、解析缓熟、渲染的過程
3. 瀏覽器加載網(wǎng)頁時的過程是什么累魔？ - 陳金的回答 - 知乎
4. 前端經(jīng)典面試題: 從輸入URL到頁面加載發(fā)生了什么摔笤？