瀏覽器中的文件傳輸過程

如何保證頁面文件能被完整送到瀏覽器？

在傳輸數據時，數據會通過應用層、傳輸層、網絡層、數據鏈路層等包裝數據（給數據加相應的頭），最後經過物理層傳輸比特流到達目的地。

整個過程就像快遞公司，裝好貨物 -> 填寫收貨人、寄貨人地址 -> 選好寄送路線 -> 出發 -> 收貨人拿到貨物 -> 取貨

IP（網絡層）: 負責把數據包送達目的主機

既然要送出去，那就要知道送給誰；So IP 頭中必然存放源 IP 地址與目標 IP 地址；除此以外，還存在一些版本、生存時間信息；

UDP（傳輸層）: 把數據包送達應用程序

UDP 存放端口號，到達指定電腦後，根據端口號把數據包發給對應的程序； UDP 能夠校驗數據包是否正確，但對錯誤的只丟棄，不重發，因此速度快； 適用領域：在線視頻、互動遊戲

TCP（傳輸層）: 把數據包完整送達應用程序

TCP 特色：

• 對於丟包狀況，提供重傳機制
• 引入數據包排序機制，能夠把亂序的數據包組成完整文件

TCP 生命週期：

創建鏈接（3 次握手） -> 傳輸數據 -> 斷開鏈接（4 次揮手）

HTTP 和 TCP 的關係

在 TCP/IP 五層結構中，http 協議屬於應用層，應用層主要是來爲操做系統和應用程序提供網絡服務。而 TCP 屬於傳輸層，傳輸層用來處理所有信息和提供可靠的數據傳輸服務。

瀏覽器發起 HTTP 請求流程

• 構建請求：構建請求行信息 GET /index.html HTTP1.1
• 查找緩存：若緩存中有副本，攔截請求，返回副本資源
• 準備 IP 地址和端口：經過 DNS 拿到域名對應的 IP，順便緩存在本地
• 等待 TCP 隊列：Chorme 機制，每次最多創建 6 個 TCP 鏈接，多出來的要等
• 創建 TCP 鏈接：3 次握手
• 發送 HTTP 請求：發送數據，帶上瀏覽器基礎信息（域名、cookie、os、內核）

服務端處理 HTTP 請求流程

• 返回請求：響應頭 + 行 + 體
• 斷開鏈接：返回完數據，就要關閉；若加 connection: keep-alive 則不斷開
• 重定向：301 + 響應頭中有 Location

keep-alive

keep-alive：保持 TCP 鏈接能夠省去下次請求時須要創建鏈接的時間，提高資源加載速度；

• 觀察了幾個大廠發現除了百度，其他好像都沒用 keep-alive, why?
  電商網站圖片比較多，若是使用 keep-alive 保持長鏈接，每一個 TCP 鏈接最多隻能發起 6 個請求，若是有 100 張以上的圖片，那麼請求是很是耗時的。

  Keep-Alive 會增長服務器負載，這就是某些共享主機提供商禁用它的緣由。每一個開放鏈接都消耗內存以及文件描述符（linux），在極端狀況下（某些 Apache 配置），它可能具備從鏈接到進程的 1：1 映射。 stackoverflow.com/questions/3…
  歡迎補充...

some question

• 爲何不少站點第二次打開速度很快？
  由於有緩存：DNS 緩存，頁面資源緩存（強緩存與協商緩存）

• 幾種緩存字段

  • expires: 絕對時間（格林尼治時間），因服務器與瀏覽器端時間很容易不一致，故不經常使用；
  • max-age: 接上，因而就有了相對時間 max-age;
  • Etag/If-None-Match 和 Last-Modified If-Modified-Since 都是協商緩存；
    區別在於 Last-Modified 是根據時間，etag 是根據內容的 hash 值來判斷是否用緩存；
    Etag 適合於常常不變的資源；
    last-modified 適合於常常改變的資源，好比圖片等；

• 登陸狀態如何保持？ 第一次登陸時，reuqest 將數據傳給服務端，reponse 中帶上 set-cookie 頭，瀏覽器讀取後保存在本地，之後此域名發起請求時都帶上；

• 若是一個頁面的網絡加載時間太久，如何分析卡在哪一個階段？
  結合 network 面板分析，看哪部分請求耗時最長；
  結合 performance 面板分析各個渲染階段的耗時；

• 瀏覽器同時打開多個標籤，若是端口同樣，數據怎麼知道去哪一個標籤？
  端口同樣的，網絡進程中知道每一個 tcp 連接對應的標籤是哪一個，因此接收到數據後，會分發給對應的渲染進程。

• 瀏覽器什麼時候開始渲染頁面？數據包的順序是如何處理的？
  瀏覽器接收到 http 響應頭的 content-type 類型時，開始準備渲染進程；
  響應體數據一旦到位便開始解析 DOM；
  丟包與重傳都是在 TCP 層解決的，http 保證數據是按照順序接受的。(下層爲上層提供服務。)

• F5 與 ctrl + F5 區別？
  F5 刷新走正常流程，該讀緩存照樣讀緩存； ctrl + F5 忽略緩存，直接發起網絡請求

參考資料

瀏覽器工做原理與實踐