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

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

問題：假設今天使用瀏覽器搜尋 `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`
> 3. 域名（Domain）: 我們常用的網址，比 IP 好懂容易記住
> - ex: `google.com`
> 4. DNS (Domain Name Sever)：將域名轉換成 IP 位置

## 瀏覽器要資料的過程...
### ➤ 1)瀏覽器進行網址 DNS 解析，並獲得網址對應 IP
### ➤ 2)TCP 三向交握 (Three-way Handshake)
首先，需要 **TCP的三向交握** 雙向溝通。
<font color="red">**( TCP 三向交握成立溝通後，資料傳送從開始到結束只需要進行一次)**</font>

---
<font color="red">使用者端</font>會先發出一個 協定(SYN Synchronize sequence numbers傳送控制協定)，<font color="green">伺服器</font>回應有之後，使用者才會傳資料出去

### ➤ 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: `前端筆記`
{%hackmd @unayojanni/H1Qq0uKkK %}