瀏覽器如何跟伺服器要資料

簡單描述：網頁背後是怎麼運作的？

問題：假設今天使用瀏覽器搜尋 google.com 會發生什麼事情？

第一步：
瀏覽器 詢問 DNS Sever : google.com 怎麼去？

第二步：
DNS Sever 回覆 IP : 要去 111.246.94.183 呦！

第三步：
瀏覽器發出請求 Request ，要前往的 IP（111.246.94.183）

第四步：
在（111.246.94.183）這個 IP 的 Sever 收到 Request

第五步：
在（111.246.94.183）這個 IP 的 Sever 去問資料庫：我要找的關鍵字

第六步：
資料庫回傳資料給（111.246.94.183）這個 IP 的 Sever

第七步：
（111.246.94.183）這個 IP 的 Sever 回傳 response 資料給瀏覽器

第八步：
瀏覽器解析資料並渲染在網頁上

---

名詞解釋：

1. IP 位置（每個主機都會有一個 IP位置）：相當於我家住址，電腦在進行溝通時，都是使用 IP 位置。
   • ex: 111.246.94.183
2. 域名（Domain）: 我們常用的網址，比 IP 好懂容易記住
   • ex: google.com
3. DNS (Domain Name Sever)：將域名轉換成 IP 位置

瀏覽器要資料的過程…

➤ 1)瀏覽器進行網址 DNS 解析，並獲得網址對應 IP

➤ 2)TCP 三向交握 (Three-way Handshake)

首先，需要 TCP的三向交握 雙向溝通。
( TCP 三向交握成立溝通後，資料傳送從開始到結束只需要進行一次)

---

使用者端會先發出一個 協定(SYN Synchronize sequence numbers傳送控制協定)，伺服器回應有之後，使用者才會傳資料出去

➤ 3)發送 request 檔案內容請求

成功建立三向交握成功溝通後，開始建立資料。GET 給一個網頁文本資料( HTTP請求 )

---

200 OK 代表資料有確實回到瀏覽器上，有五個封包有合併起來

HTTP 200 OK 成功狀態碼表明請求成功，表示完成
傳送 request過去的時候，也會在此把 cookie 一起傳送過去（Cookie 在 HTTP應用層就 user資料會被包起來）

1. 文本資料

• 伺服器會分好封包，才發出來(因為因為TCP是嚴謹協定，封包分好傳輸成功才會回傳 200 OK ，否則會有封包不完全、500、404錯誤等值出現
• 資料是由多個小封包 組合起來的，因為網頁規定一個封包最多42-1506 bytes ，1024 bytes = 1K左右

有時候網頁資料不齊全，有可能是掉封包？
當載入文本資料之後，瀏覽器就開始解析、渲染網站，由上到下，遇到表頭css，發現有其他請求，伺服器端就繼續回傳css的封包。
假設重書中途遇到WiFi斷掉，剩餘的檔案沒有載入，就只會剩下原先載入的畫面，因為TCP中斷連線了。

➤ 4)TCP 四次揮手，中止連線

已接收資料申請關閉，連線中斷

tags: 前端筆記

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

如果覺得這篇文章對你有幫助，請給我個一個小小的鼓勵 ❤ 讓我知道，這會成為我寫下去很大的動力。
對了，我還有其他文章，如果有興趣也來逛逛吧！
(文章中如有覺得不妥之處、錯誤內容，也可以透過聯絡我，我會儘速改善，感謝！)

☞ YoJanni 珍妮 2021 正在設計轉職前端的路上，希望大家在學習的路上能夠一起成長
☞ 聯絡我