從瀏覽器地址欄輸入 URL 到顯示的過程是怎么實現(xiàn)的？【沖擊30K專欄03】

最近剛好換了工作，把最近面試被面的問題，以及現(xiàn)在大多數(shù)出現(xiàn)的面試題以一個專題的形式一次性總結，一天一題，現(xiàn)在總共匯總了150道題，如果這些題都能答出來人人都能沖擊30k，每道題目答案沒有多余扯皮的部分，就是單純的答案。

今日題目：從瀏覽器地址欄輸入 URL 到顯示的過程是怎么實現(xiàn)的？

• DNS解析，將域名地址解析為ip地址
• 瀏覽器DNS緩存
• 系統(tǒng)DNS緩存
• 路由器DNS緩存
• 運營商DNS緩存
• 再找不到就遞歸搜索該網(wǎng)址
• 如果找到了，就會 TCP連接：TCP三次握手
• 第一次握手，由瀏覽器發(fā)起，告訴服務器，我要發(fā)送請求了
• 第二次握手，由服務器發(fā)起，告訴瀏覽器我準備接受了，你發(fā)送吧
• 第三次握手，由瀏覽器發(fā)送，告訴服務器，我馬上發(fā)送了，準備接受吧
• 發(fā)送請求報文
• 發(fā)送HTTP協(xié)議的通信內(nèi)容，即請求報
• 接受響應
• 響應報文
• 渲染頁面
• 遇見HTML標記，瀏覽器調(diào)用HTML解析器解析成Token，并構建成dom樹
• 遇見style/link標記，瀏覽器調(diào)用css解析器
• 遇見script標記，調(diào)用javascript解析器，處理script代碼（綁定時間，修改dom樹/css dom樹）
• 根據(jù)渲染樹計算布局，計算每個節(jié)點的幾何信息（布局）
• 將各個節(jié)點顏色繪制到屏幕上（渲染） 注意：這5個步驟不一定按照順序執(zhí)行，如果dom樹或cssdom樹被修改了，可能會執(zhí)行多次布局和渲染 往往實際頁面中，這些步驟都會執(zhí)行多次。
• 斷開連接：TCP的四次揮手
• 第一次揮手，瀏覽器發(fā)起，發(fā)送給服務器，我東西發(fā)送完了（請求報文），你準備關閉吧
• 第二次揮手，服務器發(fā)起，告訴瀏覽器，我東西接收完了（請求報文），我準備關閉了，你也準備吧
• 第三次揮手，服務器發(fā)起，告訴瀏覽器，我東西發(fā)送完了（響應報文），你準備關閉吧
• 第四次揮手，瀏覽器發(fā)起，告訴服務器，我東西接收完了， 我準備關閉了，你也準備吧

參考資料

• http://r4v.cn/gqk4o
• https://zhuanlan.zhihu.com/p/260125085
• https://blog.csdn.net/xiaohu_Blog/article/details/109521828