前端面試考古：瀏覽器輸入URL後到底發生什麼事呢？
最近開始前端開發的求職，在網路上流傳的前端面試考題總是少不了它：「在瀏覽器輸入URL發生了什麼事？」而之前在網路上找尋相關資料，總是覺得寫的太艱深難懂而放棄學習XDD 近期有時間整理了自己吸收的部分，並寫了這篇文，以較輕鬆簡單的方式說明，也能記錄一下目前的學習～(應該能死比較少腦細胞？)
Client與Server是啥米？
Client用戶端：
最典型就是用戶的所有上網設備，舉凡連到 Wi-Fi 的電腦、或是連到手機網路的手機都包含在內。
Server伺服器端：
伺服器端是放著網頁、網站、app的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。
那輸入網址後會發生什麼呢？
- 瀏覽器會先進行DNS解析，從URL找到IP位置
- 進行TCP連接(3次握手)
(1) 用戶端向伺服器發送請求是否可以建立鏈接
(2) 伺服器返回同意
(3)用戶端回饋伺服器的響應 - 用戶端向伺服器發送HTTP請求(GET, POST, PUT, DELETE)，請求伺服器向用戶端傳送網站的副本。
- 伺服器處理請求，並返回HTTP報文，以一小串稱作「資料封包」的組合形式，傳送網站的檔案(HTML, CSS, JS, image等等)。
- 瀏覽器解析渲染頁面（邊解析邊渲染）
(1) 解析HTML以建立DOM Tree
(2) 解析CSS已建立CSSOM
(3)結合DOM tree與CSSOM產生render tree
(4)利用render tree計算可視元素的版面配置、繪製和合成，這部份可能會有些 JavaScript 程式碼導致重新佈局或重繪。待瀏覽器完成渲染即可將畫面呈現給使用者（概念：reflow回流和repain重繪）
(註：頁面在首次加載時必然會經歷reflow和repain。reflow和repain過程是非常消耗性能的，尤其是在移動設備上，它會破壞用戶體驗，有時會造成頁面卡頓。所以我們應該盡可能少的減少reflow和repain。) - 連接結束並關閉TCP連接
好的～簡略來說大概會是以上流程，如果各個環節詳細介紹的話可能可以寫成一篇論文😱，不過相信能夠理解以上就能面對面試考題囉！
如果這樣還無法完全理解呢？我們再透過實際生活應用說明看看：
模擬情境說明：
想像網路是一條大道，大道的一端是用戶端(你家)，另一端則是伺服器(要去血拼的商店)
(話說住在與時代廣場同一條大道也太奢侈惹)
網路連線:
從家裡到商店要經過的街道
說明 — 讓你可以在網路傳送與接收資料。
TCP/IP:
前往商店搭乘的交通工具，舉凡車子、腳踏車、捷運等等。
說明 — 傳輸控制協定和網際網路協定（Transmission Control Protocol and Internet Protocol）定義資料如何在網路通行的通訊協定。
DNS:
就像網站的電話簿，可以先打電話去問是否營業，再前往商店
說明 — 全名為網域名稱系統(Domain Name Servers)，當你在瀏覽器輸入網址時，瀏覽器會在取得網站前，先去看DNS已查到網站的真實地址。瀏覽器需要先找到哪個伺服器在託管指定的網站，這樣才能把HTTP訊息傳送到對的地方。
HTTP:
買東西時可能需要與店員溝通，而HTTP就是用來溝通的語言
說明 — 全名為HTTP超文本傳輸協定(Hypertext Transfer Protocol)，是定義用戶端的語言，和伺服器如何對話的應用協議。
Component files:
商店內琳瑯滿目的商品們
說明 — 網站由許多不同的文件組成，其中包含程式檔HTML, CSS, JS等，以及Asset如圖像、音樂、影片、等檔案
其他補充：
關於DNS：
真正的網址不是一般大家在瀏覽器輸入的那段網址，它實際上是一串特殊的數字，例如:50.352.794.24，名稱就叫做IP位址，網路上它們都擁有獨一無二的位置！
那為什麼不用IP位址就好了呢？因為這麼一長串的數字誰記得起來啊！就好像你除了記得爸爸媽媽女友的電話，其他人的都是儲存在電話通訊錄吧？(不過現在好像都打Line🤔)總而言之，這就是為什麼會發明域名伺服器，因為能幫助我們更直覺地搜尋網站！🎉
你也可以想像DNS就是一個翻譯角色，它的工作就是把你在瀏覽器輸入的域名(http://www.google.com)和網站的真實位置(IP)相匹配。（換句話說你也可以直接輸入IP位置來搜尋網頁呢，顆顆⁎⁍̴̛ᴗ⁍̴̛⁎）
最後
希望以上的說明，能夠幫助到「像我一樣曾經看了好幾次還是不懂」的朋友，也許學會這個概念，短時間內比較沒有差異，但未來若想成為更進階的工程師，了解這個一定會很有幫助唷！
(如果有錯誤的部分歡迎留言補充，感謝！)
資料參考：
