從輸入URL到瀏覽器顯示介面都經歷了哪些過程?

2022-08-22 03:27:10 字數 2040 閱讀 2802

當在瀏覽器位址列輸入**,如:www.baidu.com後瀏覽器是怎麼把最終的頁面呈現出來的呢?這個過程可以大致分為兩個部分:網路通訊和頁面渲染。

網際網路內各網路裝置間的通訊都遵循tcp/ip協議,利用tcp/ip協議族進行網路通訊時,會通過分層順序與對方進行通訊。分層由高到低分別為:應用層、傳輸層、網路層、資料鏈路層。傳送端從應用層往下走,接收端從資料鏈路層網上走。如圖所示:

1. 在瀏覽器中輸入url

使用者輸入url,例如其中http為協議,www.baidu.com為網路位址,及指出需要的資源在那台計算機上。一般網路位址可以為網域名稱或ip位址,此處為網域名稱。使用網域名稱是為了方便記憶,但是為了讓計算機理解這個位址還需要把它解析為ip位址。

2.應用層dns解析網域名稱

客戶端先檢查本地是否有對應的ip位址,若找到則返回響應的ip位址。若沒找到則請求上級dns伺服器,直至找到或到根節點。

3.應用層客戶端傳送http請求

http請求包括請求報頭和請求主體兩個部分,其中請求報頭包含了至關重要的資訊,包括請求的方法(get / post)、目標url、遵循的協議(http / https / ftp…),返回的資訊是否需要快取,以及客戶端是否傳送cookie等。

4.傳輸層tcp傳輸報文

位於傳輸層的tcp協議為傳輸報文提供可靠的位元組流服務。它為了方便傳輸,將大塊的資料分割成以報文段為單位的資料報進行管理,並為它們編號,方便伺服器接收時能準確地還原報文資訊。tcp協議通過「三次握手」等方法保證傳輸的安全可靠。

「三次握手」的過程是,傳送端先傳送乙個帶有syn(synchronize)標誌的資料報給接收端,在一定的延遲時間內等待接收的回覆。接收端收到資料報後,傳回乙個帶有syn/ack標誌的資料報以示傳達確認資訊。接收方收到後再傳送乙個帶有ack標誌的資料報給接收端以示握手成功。在這個過程中,如果傳送端在規定延遲時間內沒有收到回覆則預設接收方沒有收到請求,而再次傳送,直到收到回覆為止。

5.網路層ip協議查詢mac位址

ip協議的作用是把tcp分割好的各種資料報傳送給接收方。而要保證確實能傳到接收方還需要接收方的mac位址,也就是實體地址。ip位址和mac位址是一一對應的關係,乙個網路裝置的ip位址可以更換,但是mac位址一般是固定不變的。arp協議可以將ip位址解析成對應的mac位址

6.資料到達資料鏈路層

在找到對方的mac位址後,就將資料傳送到資料鏈路層傳輸。這時,客戶端傳送請求的階段結束

7.伺服器接收資料

接收端的伺服器在鏈路層接收到資料報,再層層向上直到應用層。這過程中包括在運輸層通過tcp協議講分段的資料報重新組成原來的http請求報文。

8.伺服器響應請求

服務接收到客戶端傳送的http請求後,查詢客戶端請求的資源,並返回響應報文,響應報文中包括乙個重要的資訊——狀態碼。狀態碼由三位數字組成,其中比較常見的是200 ok表示請求成功。301表示永久重定向,即請求的資源已經永久轉移到新的位置。在返回301狀態碼的同時,響應報文也會附帶重定向的url,客戶端接收到後將http請求的url做相應的改變再重新傳送。404 not found 表示客戶端請求的資源找不到。

9. 伺服器返回相應檔案

請求成功後,伺服器會返回相應的html檔案。接下來就到了頁面的渲染階段了。

現代瀏覽器渲染頁面的過程是這樣的:解析html以構建dom樹 –> 構建渲染樹 –> 布局渲染樹 –> 繪製渲染樹。

dom樹是由html檔案中的標籤排列組成,渲染樹是在dom樹中加入css或html中的style樣式而形成。渲染樹只包含需要顯示在頁面中的dom元素,像元素或display屬性值為none的元素都不在渲染樹中。

在瀏覽器還沒接收到完整的html檔案時,它就開始渲染頁面了,在遇到外部鏈入的指令碼標籤或樣式標籤或時,會再次傳送http請求重複上述的步驟。在收到css檔案後會對已經渲染的頁面重新渲染,加入它們應有的樣式,檔案載入完立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排。

瀏覽器輸入url到顯示頁面,都經歷了什麼

1 首先,我們在瀏覽器位址列中,輸入要查詢頁面的url。2 然後瀏覽器依次在 瀏覽器快取 系統快取 路由器快取中去尋找匹配的url,如果這些快取中有,就會直接在螢幕中顯示出頁面內容。若沒有,則跳到第三步操作。3 在傳送http請求前,瀏覽器需要先進行網域名稱解析 即dns解析 以獲取相應的ip位址。...

瀏覽器從輸入url到顯示html頁面經歷了什麼

在瀏覽器輸入url之後,瀏覽器首先會判斷在位址列中輸入的資訊到底是url還是關鍵字 如果是關鍵字,那麼瀏覽器會使用預設的搜尋引擎搜尋關鍵字,這和直接訪問url的請求 響應過程一致,如果是url,那麼瀏覽器則會準備開始進行下一步 判斷時候訪問dns dns 網域名稱伺服器 瀏覽器在之前url的基礎上判...

從輸入url到瀏覽器載入過程

從輸入url到頁面載入發生了什麼 最近在進行前端面試方面的一些準備,看了網上許多相關的文章,發現有乙個問題始終繞不開 在瀏覽器中輸入url到整個頁面顯示在使用者面前時這個過程中到底發生了什麼。仔細思考這個問題,發現確實很深,這個過程涉及到的東西很多。這個問題的回答真的能夠很好的考驗乙個web工程師的...