1. 程式人生 > >筆試常考--瀏覽器輸入一個URL點擊回車之後發生了什麽

筆試常考--瀏覽器輸入一個URL點擊回車之後發生了什麽

屏幕 設置 數據庫 span render 本地 dns mage 一個

  1. 解析URL:瀏覽器首先對拿到的URL進行識別,抽取出域名字段。
  2. DNS解析

    查詢瀏覽器緩存(瀏覽器會緩存之前拿到的DNS 2-30分鐘時間),如果沒有找到,

    檢查系統緩存,檢查hosts文件,這個文件保存了一些以前訪問過的網站的域名和IP的數據。它就像是一個本地的數據庫。如果找到就可以直接獲取目標主機的IP地址了。沒有找到的話,需要

    檢查路由器緩存,路由器有自己的DNS緩存,可能就包括了這在查詢的內容;如果沒有,要

    查詢ISP DNS 緩存:ISP服務商DNS緩存(本地服務器緩存)那裏可能有相關的內容,如果還不行的話,需要,

    遞歸查詢:從根域名服務器到頂級域名服務器再到極限域名服務器依次搜索哦對應目標域名的IP。

  3. 瀏覽器與網站之間建立TCP鏈接(三次握手):

    第一次握手:客戶端向服務器端發送請求(SYN=1) 等待服務器確認;

    第二次握手:服務器收到請求並確認,回復一個指令(SYN=1,ACK=1);

    第三次握手:客戶端收到服務器的回復指令並返回確認(ACK=1)。技術分享圖片

    通過三次握手,建立了客戶端和服務器之間的連接,現在可以請求和傳輸數據了。

  4. 請求和傳輸數據

通過GET請求和服務器的響應,可以將服務器上的目標文件傳輸到瀏覽器進行渲染。

5. 瀏覽器渲染頁面

客戶端拿到服務器端傳輸來的文件,找到HTML和MIME文件,通過MIME文件,瀏覽器知道要用頁面渲染引擎來處理HTML文件。

a.瀏覽器會解析html源碼,然後創建一個 DOM樹。

在DOM樹中,每一個HTML標簽都有一個對應的節點,並且每一個文本也都會有一個對應的文本節點。

b.瀏覽器解析CSS代碼,計算出最終的樣式數據,形成css對象模型CSSOM。

首先會忽略非法的CSS代碼,之後按照瀏覽器默認設置——用戶設置——外鏈樣式——內聯樣式——HTML中的style樣式順序進行渲染。

c.利用DOM和CSSOM構建一個渲染樹(rendering tree)。
渲染樹和DOM樹有點像,但是是有區別的。

DOM樹完全和html標簽一一對應,但是渲染樹會忽略掉不需要渲染的元素,比如head、display:none的元素等。

而且一大段文本中的每一個行在渲染樹中都是獨立的一個節點。
渲染樹中的每一個節點都存儲有對應的css屬性。

d.瀏覽器就根據渲染樹直接把頁面繪制到屏幕上。

筆試常考--瀏覽器輸入一個URL點擊回車之後發生了什麽