輸入一條url後,發生了什麼??

標籤：換行   下載   and   訊息   nbsp   led   window   報文   解析   

(1)瀏覽器解析

(2)查詢快取

(3)DNS查詢

順序如下,若其中一步成功直接進去建立串連部分:

-- 瀏覽器自身DNS

-- 作業系統DNS

-- 本地hosts檔案

-- 像網域名稱伺服器發送請求

(4)建立串連

-- TCP三向交握(three-way handshaking)

-- 發送方: SYN(synchonize)

-- 接受方: SYN/ACK(acknowledgement), 確認資訊傳達

-- 發送方: ACK - 確認接受方再線可收訊息,握手結束

Accept

-- 1, 發送端: 標有SYN的資料包發給你了

-- 2, 接收端: 明白了! 我收到你給我發的資料包了! (並發送標有SYN/ACK的資料包了)

-- 3, 明白! (發送標有ACK的資料包)

TCP三向交握的好處在於,發送方可以確認接受方仍然線上,不會因為白髮送而浪費資源.

(5) 發送HTTP請求

-- 報文首部(GET/index.html HTTP/1.1)

-- 方法

-- URL

-- HTTP版本

-- 空行

-- 報文主體

注意: 1,HTTP是無串連, 無狀態的,即HTTP再傳輸完成後就會斷開,並且下一次登陸時不會記錄上次的登陸狀態

2,關於CR(Carriage Return, 斷行符號)和LF(Line Feed, 換行)

Dos和Windows採用的CR/LF表示下一行UNIX/Linux採用LF表示下一行MAC OS系統採用CR表示下一行

(6)伺服器發送響應

-- 報文首部(HTTP/1.1 200 ok)

-- HTTP版本

-- 響應狀態代碼

-- 狀態代碼資訊

-- 空行(CR+LF)

-- 報文主體

(7)用戶端收到頁面

(8)解析HTML

-- 構建DOM樹

-- 下載資源

-- CSS - 構建CSSSOM樹

-- js - 等下載並執行後解析

(9)構建渲染樹

根據DOM和CSSSOM樹渲染,隱藏元素不被會渲染

(10)瀏覽器布局渲染

-- 布局- 根據渲染書布局

-- 繪製 - 在螢幕上繪製每個點

 

輸入一條url後,發生了什麼??