從輸入U(xiǎn)RL 到頁(yè)面加載完成的過(guò)程都發(fā)生了什么？
摘要
本文只是初步介紹了瀏覽器從輸入U(xiǎn)RL到頁(yè)面加載完成所經(jīng)歷的階段犀农，內(nèi)容的詳細(xì)度有待完善摇天，望讀者包容。
整體過(guò)程
- 域名解析忘朝；
- 建立TCP連接灰署；
- 發(fā)起HTTP請(qǐng)求；
- 服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文；
- 瀏覽器解析渲染頁(yè)面氓侧；
DNS解析
DNS解析過(guò)程是一個(gè)網(wǎng)址到IP地址的轉(zhuǎn)換過(guò)程脊另，通過(guò)域名解析查找到對(duì)應(yīng)的IP地址，查找過(guò)程是一個(gè)遞歸查詢(xún)的過(guò)程：自身的DNS緩存--> 操作系統(tǒng)自身的DNS緩存--> 讀取hosts文件--> 運(yùn)營(yíng)商dns --> 根域名服務(wù)器 --> 頂級(jí)域名服務(wù)器 --> 域名注冊(cè)商服務(wù)器约巷，直到最后本地域名服務(wù)器得到IP地址并把它緩存到本地偎痛。
建立TCP連接
拿到域名對(duì)應(yīng)的IP地址之后，瀏覽器會(huì)以一個(gè)隨機(jī)端口向服務(wù)器的WEB程序發(fā)起TCP的連接請(qǐng)求,這個(gè)連接請(qǐng)求到達(dá)服務(wù)器端后,進(jìn)入到網(wǎng)卡独郎，然后是進(jìn)入到內(nèi)核的TCP/IP協(xié)議棧踩麦，還有可能要經(jīng)過(guò)Netfilter防火墻的過(guò)濾，最終到達(dá)WEB程序氓癌，建立TCP/IP的連接谓谦。
HTTP協(xié)議是使用TCP作為其傳輸層協(xié)議的，HTTP報(bào)文是包裹在TCP報(bào)文中發(fā)送的贪婉，服務(wù)器端收到TCP報(bào)文時(shí)會(huì)解包提取出HTTP報(bào)文反粥，但是這個(gè)過(guò)程中存在一定的風(fēng)險(xiǎn)，HTTP報(bào)文是明文疲迂，如果中間被截取的話(huà)會(huì)存在一些信息泄露的風(fēng)險(xiǎn)才顿，那么在進(jìn)入TCP報(bào)文之前對(duì)HTTP做一次加密就可以解決這個(gè)問(wèn)題了。
發(fā)起HTTP請(qǐng)求
建立TCP的連接之后尤蒿，瀏覽器發(fā)起了http的請(qǐng)求郑气，發(fā)送HTTP請(qǐng)求的過(guò)程就是構(gòu)建HTTP請(qǐng)求報(bào)文并通過(guò)TCP協(xié)議中發(fā)送到服務(wù)器指定端口的過(guò)程，HTTP請(qǐng)求報(bào)文是由三部分組成: 請(qǐng)求行, 請(qǐng)求報(bào)頭和請(qǐng)求正文腰池。
[圖片上傳失敗...(image-9eee91-1523792198700)]
服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
服務(wù)器在固定的端口接收到TCP報(bào)文之后尾组，會(huì)對(duì)TCP連接進(jìn)行處理：服務(wù)器解析請(qǐng)求，定位請(qǐng)求資源示弓，將資源副本寫(xiě)到 TCP 連接讳侨，由客戶(hù)端讀取。HTTP響應(yīng)報(bào)文也是由三部分組成: 狀態(tài)碼, 響應(yīng)報(bào)頭和響應(yīng)報(bào)文奏属。
[圖片上傳失敗...(image-7b2b4e-1523792198700)]
關(guān)于HTTP協(xié)議請(qǐng)參考:
https://kb.cnblogs.com/page/140611/
https://kb.cnblogs.com/page/55442/
瀏覽器解析渲染頁(yè)面
服務(wù)器對(duì)瀏覽器請(qǐng)求作出響應(yīng)跨跨，并把對(duì)應(yīng)的 html 文本發(fā)送給瀏覽器，瀏覽器是一個(gè)邊解析邊渲染的過(guò)程拍皮，首先瀏覽器解析HTML文件構(gòu)建DOM樹(shù)歹叮，然后解析CSS文件構(gòu)建渲染樹(shù)，其中涉及到reflow(回流)和repain(重繪)铆帽，DOM節(jié)點(diǎn)中的各個(gè)元素都是以盒模型的形式存在咆耿，這些都需要瀏覽器去計(jì)算其位置和大小等，這個(gè)過(guò)程稱(chēng)為relow;當(dāng)盒模型的位置,大小以及其他屬性確定下來(lái)之后爹橱，瀏覽器便開(kāi)始繪制內(nèi)容萨螺，這個(gè)過(guò)程稱(chēng)為repain。
詳細(xì)的瀏覽器工作原理請(qǐng)看:https://kb.cnblogs.com/page/129756/
通過(guò)本文可以初步了解到在瀏覽器輸入U(xiǎn)RL到看到頁(yè)面所經(jīng)歷的過(guò)程，轉(zhuǎn)載時(shí)請(qǐng)注明原作者慰技。
