目錄
1、解析URL
2、緩存判斷
?3、DNS解析
?4、獲取MAC地址
5、TCP三次握手
6、HTTP請求
7、服務(wù)器處理請求，返回HTTP響應(yīng)
8、頁面渲染
9、TCP四次揮手
10、瀏覽器解析HTML
11、瀏覽器布局渲染
1、解析URL
首先會對 URL 進行解析，分析所需要使用的傳輸協(xié)議和請求的資源的路徑。如果輸入的 URL 中的協(xié)議或者主機名不合法，將會把地址欄中輸入的內(nèi)容傳遞給搜索引擎。如果沒有問題，瀏覽器會檢查 URL 中是否出現(xiàn)了非法字符，如果存在非法字符，則對非法字符進行轉(zhuǎn)義后再進行下一過程。
2、緩存判斷
瀏覽器會判斷所請求的資源是否在緩存里，如果請求的資源在緩存里并且沒有失效，那么就直接使用，否則向服務(wù)器發(fā)起新的請求。
3、DNS解析
需要獲取的是輸入的 URL 中的域名的 IP 地址
-
瀏覽器緩存
-
操作系統(tǒng)緩存，
hosts?件 -
路由器緩存
-
ISP?DNS緩存 -
DNS遞歸查詢（可能存在負載均衡導(dǎo)致每次IP不?樣）
4、獲取MAC地址
當(dāng)瀏覽器得到 IP 地址后，數(shù)據(jù)傳輸還需要知道目的主機 MAC 地址
判斷目標(biāo)地址是否與當(dāng)前地址處于同一網(wǎng)絡(luò)中，是的話直接根據(jù) Mac 地址發(fā)送，否則使用路由表查找下一跳地址，以及使用 ARP 協(xié)議查詢它的 Mac 地址。
5、TCP三次握手
-
客戶端發(fā)送?個
TCP的SYN=1，Seq=X的包到服務(wù)器端口(客戶端進入 SYN-SENT 狀態(tài)) -
服務(wù)器發(fā)回SYN=1，?ACK=X+1，?Seq=Y的響應(yīng)包(服務(wù)器進如SYN-RECEIVED 狀態(tài))
-
客戶端發(fā)送ACK=Y+1，?Seq=Z? 的包到服務(wù)器端口?(客戶端進入ESTABLISHED 狀態(tài)) ，服務(wù)器接收到包（服務(wù)器進入ESTABLISHED 狀態(tài)）
6、HTTP請求
????????與服務(wù)器建立了連接后，就可以向服務(wù)器發(fā)起請求了
7、服務(wù)器處理請求，返回HTTP響應(yīng)
當(dāng)頁面請求發(fā)送到服務(wù)器端后，服務(wù)器端會返回一個 html 文件作為響應(yīng)，瀏覽器接收到響應(yīng)后，開始對 html 文件進行解析，開始頁面的渲染過程。
8、頁面渲染
????????瀏覽器首先會根據(jù) html 文件構(gòu)建 DOM 樹，根據(jù)解析到的 css 文件構(gòu)建 CSSOM 樹，如果遇到 script 標(biāo)簽，則判端是否含有 defer 或者 async 屬性，要不然 script 的加載和執(zhí)行會造成頁面的渲染的阻塞。當(dāng) DOM 樹和 CSSOM 樹建立好后，根據(jù)它們來構(gòu)建渲染樹。渲染樹構(gòu)建好后，會根據(jù)渲染樹來進行布局。布局完成后，最后使用瀏覽器的 UI 接口對頁面進行繪制。這個時候整個頁面就顯示出來了。
9、TCP四次揮手
瀏覽器接收HTTP響應(yīng)，然后根據(jù)情況選擇關(guān)閉TCP連接或者保留重?
- 客戶端打算關(guān)閉連接，此時會發(fā)送一個 TCP 首部?
FIN?標(biāo)志位被置為?1?的報文，也即?FIN?報文，之后客戶端進入?FIN_WAIT_1?狀態(tài)。 - 服務(wù)端收到該報文后，就向客戶端發(fā)送?
ACK?應(yīng)答報文，接著服務(wù)端進入?CLOSE_WAIT?狀態(tài)。 - 客戶端收到服務(wù)端的?
ACK?應(yīng)答報文后，之后進入?FIN_WAIT_2?狀態(tài)。 - 等待服務(wù)端處理完數(shù)據(jù)后，也向客戶端發(fā)送?
FIN?報文，之后服務(wù)端進入?LAST_ACK?狀態(tài)。 - 客戶端收到服務(wù)端的?
FIN?報文后，回一個?ACK?應(yīng)答報文，之后進入?TIME_WAIT?狀態(tài) - 服務(wù)端收到了?
ACK?應(yīng)答報文后，就進入了?CLOSE?狀態(tài)，至此服務(wù)端已經(jīng)完成連接的關(guān)閉。 - 客戶端在經(jīng)過?
2MSL?一段時間后，自動進入?CLOSE?狀態(tài)，至此客戶端也完成連接的關(guān)閉。
10、瀏覽器解析HTML
瀏覽器通過解析HTML，生成DOM樹，解析CSS，生成CSS規(guī)則樹，然后通過DOM樹和CSS規(guī)則樹生成渲染樹。渲染樹與DOM樹不同，渲染樹中并沒有head、display為none等不必顯示的節(jié)點。
解析執(zhí)行JS腳本文章來源：http://www.zghlxwxcb.cn/news/detail-858121.html
11、瀏覽器布局渲染
? ? ? ? 完成解析文章來源地址http://www.zghlxwxcb.cn/news/detail-858121.html
到了這里，關(guān)于URL地址解析至頁面展示全過程（面試詳細解答）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
