相信很多人在瀏覽器上輸入自己要的關鍵字、網址後，通常網站都會漂漂亮亮的呈現在你眼前，你在網站上所做的任何操作，也都很順利～
但！你有想過網站畫面是怎麼出來的嗎？它如何傳封包的嗎？它是如何透過網址就找到我要的網站的呢？
詳細理解背後的原理，相信能對你在開發的路上更有幫助的！
先了解一下幾個專有名詞，懂了名詞後就能了解上方這張圖的意思了
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 可以輕鬆閱/操作畫面上的所有資訊
處理的過程步驟就是
- 取的 HTML 後，會開始解析完最終會變成 DOM Tree
- 取的 CSS 後，解析完會變 CSSOM Tress
- 以上兩者結束會開始計算樣式該如何去套用到 HTML 上，並產生 Render Tree
- 版面配置 Layout 決定出每個元素在頁面上的位置
- 最後經過 Paint 將計算結果轉為實際的像素，繪製在畫面上
選染過程可參考此影片
以上就是整個瀏覽器輸入網址後，背後所發生的過程
以前都沒注意過XDD
小弟以前是前端工程師，但現在是 QA 工程師
所以仍對前端保有興趣，也相信多理解背後的原理，會對當 QA 的我在測試方面更有概念，也能更能精準的找出問題，以便於提升產品的品質
