相信很多人在瀏覽器上輸入自己要的關鍵字、網址後，通常網站都會漂漂亮亮的呈現在你眼前，你在網站上所做的任何操作，也都很順利～但！你有想過網站畫面是怎麼出來的嗎？

文／Gary

相信很多人在瀏覽器上輸入自己要的關鍵字、網址後，通常網站都會漂漂亮亮的呈現在你眼前，你在網站上所做的任何操作，也都很順利～
但！你有想過網站畫面是怎麼出來的嗎？它如何傳封包的嗎？它是如何透過網址就找到我要的網站的呢？
詳細理解背後的原理，相信能對你在開發的路上更有幫助的！

先了解一下幾個專有名詞，懂了名詞後就能了解上方這張圖的意思了

DNS

網域名稱系統（英語：Domain Name System，縮寫：DNS）
DNS 是網際網路的電話簿。人們透過例如 nytimes.com 或 espn.com 等網域名稱線上存取資訊。將網域名稱轉換為 IP 位址，以便瀏覽器能夠載入網際網路資源。

我們先來看看它背後真正運作的方式吧！

Client 會透過幾個步驟查找目標網域的 IP，順序依序為：

• 檢查本地的 DNS 快取
• 檢查電腦中的 .host 檔
• 向 DNS 伺服器發送詢問

不太懂在講什麼嗎？沒關係

我們用最簡單的說法就是

「Client 會先進行 DNS 解析，從 URL 找到 IP 位置」

舉個實際的說法就是

「我想吃台北101旁邊的麵店(URL)，但我不曉得它今天有沒有開，所以想打電話先問問看以免我白跑一趟，所以！我必須先找到麵店的電話號碼(IP)！我就詢問周遭的親朋好友有沒有吃過、知不知道麵店電話(DNS解析)，如果都不知道，我就去路上問其他人(DNS解析)，直到我問到電話號碼為止(IP)」
(此情境我們先撇除使用 Google Map或 Google 搜尋引擎 查找XDD)

所以上方整體的順序其實就是舉例中找麵店電話的邏輯，所以最終真正用意就是要找到 IP address，才能進行後續 TCP 的握手 及 HTTP Request

其中背後還有 DNS 負載均衡、DNS 污染 等，我們就先不討論，有興趣的可以在自行找找

TCP

傳輸控制協定（英語：Transmission Control Protocol，縮寫：TCP）是一種連接導向的，TCP 為每個封包分配一個唯一的識別碼和一個序號，這些號碼能讓接收端識別封包的完整性，以及封包的順序。

我們來看看它背後真正運作的方式吧！

由於 DNS 幫我們找到的 IP 後，我們就需要讓 IP 跟 Server 建起連結，相當於是溝通的橋樑，這樣才能做到讓 Client 與 Server 進行溝通、相互傳遞資料

舉個實際的說法就是
Client：XXX.XXX.XXX(IP) 你在嗎？有事找你～
對應上圖：你在嗎?(ACK)
Server：在喔，來吧
對應上圖：我在(SYN/ACK)
Client：來惹
對應上圖：那我準備要傳遞資料囉(ACK)

所經歷 TCP 握手後，我們已經建立好橋樑，Client/Server 端雙方皆已事先確認過無誤，就準備進入 HTTP Request 階段了

ACK/SYC 較深入，想瞭解更多可以查看
關於 TCP 三次握手和四次揮手，滿分回答在此

HTTP Request

這個名詞應該相當熟悉了

HTTP 全稱 Hypertext Transfer Protocol(超文本傳輸協議)，是由 Client 端發送 HTTP Request (請求)到 Server 端，然後Server端返回HTTP Response (回復)。

Client 端向 Server 端發送 HTTP 請求(GET, POST, PUT, DELETE)，請求Server 向 Client 傳送網站的副本

需注意！！
此階段主要是 Client 端發起請求 的過程而已，Server 端尚未接到請求哦

Server Response(HTTP Response)

此階段才是 Server 端接到 Request 後，開始處理，將最終處理完的資訊回傳給 Client 端，此時就我們常說的「封包」，就是 HTML、 CSS、 JS、 image 等等

瀏覽器端解析渲染頁面

這步驟主就是將取得的 封包，全部渲染在瀏覽器上，讓 User 可以輕鬆閱/操作畫面上的所有資訊

處理的過程步驟就是

1. 取的 HTML 後，會開始解析完最終會變成 DOM Tree
2. 取的 CSS 後，解析完會變 CSSOM Tress
3. 以上兩者結束會開始計算樣式該如何去套用到 HTML 上，並產生 Render Tree
4. 版面配置 Layout 決定出每個元素在頁面上的位置
5. 最後經過 Paint 將計算結果轉為實際的像素，繪製在畫面上

選染過程可參考此影片

以上就是整個瀏覽器輸入網址後，背後所發生的過程
以前都沒注意過XDD

小弟以前是前端工程師，但現在是 QA 工程師
所以仍對前端保有興趣，也相信多理解背後的原理，會對當 QA 的我在測試方面更有概念，也能更能精準的找出問題，以便於提升產品的品質

參考來源:

• Ever wondered what happens when you type in a URL in an address bar in a browser?
• 前端面試考古：瀏覽器輸入URL後到底發生什麼事呢？
• Web開發常問面試題，在地址欄中輸入網址後發生了什麼？
• 30. [WEB] 從輸入網址列到渲染畫面，過程經歷了什麼事情？
• [熱門面試題] 從輸入網址列到渲染畫面，過程經歷了什麼事？
• 從傳紙條輕鬆學習基本網路概念

這篇文章 身為工程師的你，也應該來了解一下瀏覽器輸入網址後，背後的運作的原理吧！ 最早出現於 科技島-掌握科技新聞、科技職場最新資訊。