迎來到"前端就業加油站"，我是您的面試官，我將為您提供專業的就業指導，幫助您快速獲得高薪工作的目標。接下來請回答我：在瀏覽器地址欄輸入一個URL網址后回車，到網頁顯示經歷了哪些過程？您好面試官此過程經歷http請求的過程和頁面內容加載渲染的過程。

（Domain Name Server域名服務器）1.DNS解析：當用戶在瀏覽器中輸入URL時，瀏覽器首先查找本地緩存中是否存儲了該URL對應的IP地址。如果沒有找到，瀏覽器會向本地DNS服務器發送DNS查詢請求，本地DNS服務器檢查自身緩存，如果也沒有記錄，它會向其他DNS服務器發起查詢，直到找到對應的IP地址為止。一旦找到IP地址，本地DNS服務器將其返回給瀏覽器。

2.建立TCP連接：獲得服務器的IP地址后，瀏覽器會向此IP地址發送一個TCP連接請求。在建立TCP連接之前，瀏覽器會與服務器進行三次握手，確保連接的可靠性。

3.發送HTTP請求：TCP連接成功建立后，瀏覽器會向服務器發送HTTP請求，該請求包括請求方法（GETPOST等）、請求頭、請求體等信息，請求頭包含了瀏覽器的相關信息，如用戶代理、支持的壓縮格式、語言等。

4.服務器處理請求并返回響應：服務器接收到瀏覽器發送的HTTP請求后，會進行處理并生成一個HTTP響應。響應包括狀態碼、響應頭和響應體，狀態碼有200、404、500等。

5.接收HTTP響應：一旦瀏覽器接收到服務器返回的HTTP響應，它會進行解析和處理。首先瀏覽器解析響應頭，以確定響應的類型、編碼長度等信息，然后它讀取響應體并根據響應類型進行解析。

6.瀏覽器渲染頁面：當瀏覽器接收到HTTP響應并解析出頁面的HTML、CSS和JavaScript代碼時，它開始渲染頁面。渲染頁面的過程包括以下步驟：構建DOM樹：瀏覽器將HTML代碼解析成一個節點樹，構建文檔對象模型（DOM），構建CSSOM樹。瀏覽器將 CSS 代碼解析成一個樣式規則樹，構建CS5對象模型（CSSOM），合并DOM樹和CSSOM樹。瀏覽器將DOM樹和CSSOM樹合并成一個渲染樹，包含需要顯示的節點和對應的CSS樣式、布局和繪制。瀏覽器通過渲染樹來實現頁面布局和繪制，計算每個節點在屏幕上的位置和大小并生成位圖，最后將位圖輸出到屏幕上呈現給用戶。

·7瀏覽器會執行JavaScript代碼。如果頁面包含JavaScript代碼，瀏覽器會在執行它之前先對其進行解析，將其轉換為抽象語法樹（AST），然后編譯或直接執行，以提高執行效率。

執行JavaScript代碼時，瀏覽器會創建一個獨立于主線程的JavaScript引擎線程，負責執行JavaScript代碼。總的來說，從輸入URL到瀏覽器顯示頁面的過程非常復雜，包括JavaScript解析、TCP連接、HTTP請求和響應、頁面渲染和JavaScript代碼執行等多個步驟。

了解這些過程有助于更好地理解Web應用的工作原理，并優化Web應用的性能。

長文創作激勵計劃#

Hello大家好，我是小米，一個熱愛分享技術的IT達人。今天我們一起來聊聊一個大家每天都會用到但可能不太了解的過程：瀏覽器輸入URL之后發生了什么。這是一個從用戶輸入到瀏覽器顯示頁面的完整過程，涉及到很多底層的網絡基礎知識。今天我們就一起來探究這個神秘的過程！

DNS解析

首先，當你在瀏覽器地址欄中輸入一個URL，比如https://www.example.com，并按下回車鍵時，瀏覽器首先要做的事情就是找到這個域名對應的IP地址。這一步驟稱為DNS解析。

什么是DNS？

DNS（Domain Name System）是一種分布式數據庫，它負責將人類容易記憶的域名（如www.example.com）轉換為機器能夠理解的IP地址（如192.168.1.1）。就像一個電話簿，你可以通過名字查找到對應的電話號碼。

DNS解析的過程

1. 瀏覽器緩存：瀏覽器首先會檢查自己是否緩存了這個域名對應的IP地址。如果有緩存并且沒有過期，就直接使用這個緩存結果。
2. 操作系統緩存：如果瀏覽器沒有緩存，就會查詢操作系統的緩存。
3. 路由器緩存：如果操作系統也沒有緩存，查詢會繼續向上，檢查路由器的緩存。
4. ISP DNS服務器：如果路由器也沒有緩存，瀏覽器會向ISP（互聯網服務提供商）的DNS服務器發起查詢。
5. 遞歸查詢：如果ISP的DNS服務器也沒有結果，它會進行遞歸查詢，向其他DNS服務器詢問，直到找到結果為止。

通過以上步驟，瀏覽器最終獲取到了www.example.com對應的IP地址，比如93.184.216.34。

TCP連接

獲取到IP地址后，瀏覽器需要與服務器建立連接。這里使用的是TCP（Transmission Control Protocol）協議。

三次握手

TCP連接的建立需要經過所謂的“三次握手”過程：

1. 第一次握手：瀏覽器（客戶端）向服務器發送一個SYN（synchronize）請求包，表示希望建立連接。
2. 第二次握手：服務器收到SYN包后，回應一個SYN/ACK包，表示同意建立連接。
3. 第三次握手：客戶端收到SYN/ACK包后，再發送一個ACK（acknowledgement）包，確認連接建立。

通過這三次握手，瀏覽器與服務器之間的TCP連接正式建立。

發送HTTP請求

在TCP連接建立之后，瀏覽器會發送HTTP請求來獲取網頁內容。HTTP（HyperText Transfer Protocol）是一種無狀態的協議，客戶端向服務器發送請求，服務器處理請求后返回響應。

構建HTTP請求

一個典型的HTTP請求包括以下部分：

請求行：包含請求方法（如GET、POST）、請求URL和HTTP版本。

請求頭：包含一些描述客戶端環境、請求主體等信息的元數據，如User-Agent、Host等。

請求主體：在POST請求中，包含需要發送的數據。

示例HTTP請求

服務器處理請求并返回HTTP報文

服務器接收到HTTP請求后，會進行處理并返回HTTP響應。

服務器處理請求

服務器會根據請求的內容，進行相應的處理操作：

• 靜態資源請求：如HTML文件、CSS樣式表、圖片等，服務器會直接從文件系統中讀取并返回。
• 動態資源請求：如使用PHP、Node.js等動態語言生成的內容，服務器會先執行相應的代碼，生成內容后再返回。

構建HTTP響應

一個典型的HTTP響應包括以下部分：

• 狀態行：包含HTTP版本、狀態碼（如200表示成功，404表示未找到）和狀態描述。
• 響應頭：包含一些描述響應內容的元數據，如Content-Type、Content-Length等。
• 響應主體：包含實際的響應數據，如HTML文檔、圖片等。

示例HTTP響應

瀏覽器渲染

瀏覽器接收到服務器返回的HTTP響應后，會進行渲染，將網頁內容展示給用戶。

渲染過程

1. 解析HTML：瀏覽器會將HTML解析成DOM（Document Object Model）樹。
2. 解析CSS：瀏覽器會解析CSS，生成CSSOM（CSS Object Model）樹。
3. 構建渲染樹：將DOM樹和CSSOM樹結合，構建渲染樹。
4. 布局：根據渲染樹計算每個節點在屏幕上的位置和大小。
5. 繪制：將渲染樹的每個節點繪制到屏幕上。

JavaScript的執行

在解析HTML的過程中，如果遇到JavaScript代碼，瀏覽器會暫停HTML的解析，先執行JavaScript。JavaScript可以修改DOM和CSSOM，因此會影響最終的渲染結果。

END

當所有的資源都加載并渲染完畢后，整個過程就結束了。用戶可以看到完整的網頁內容，并與之進行交互。

以上就是從你在瀏覽器輸入URL到頁面展示的完整過程，是不是非常有趣呢？如果大家對某個步驟還有疑問或者想了解更多的細節，歡迎在評論區留言哦！

我是小米，一個喜歡分享技術的29歲程序員。如果你喜歡我的文章，歡迎關注我的微信公眾號“軟件求生”，獲取更多技術干貨！