從輸入URL到頁面載入發生了什麼？
輸入URL後，需要找到這個URL對應的伺服器，為了查詢伺服器地址，第一步需要實現從網址到對應ip的轉換，瀏覽器首先依次查詢自身緩存，系統緩存和路由器緩存的記錄，如果沒有則查詢本地host文件，還沒有就向DNS伺服器發送域名解析請求。
拿到域名後，瀏覽器通過隨機埠向伺服器指定埠發起TCP連接請求，通過運輸層，網路層，數據鏈路層，物理層到達伺服器，經過三次握手後建立TCP連接。
三次握手後，就可以傳輸數據了，客戶端將要發送的內容構建成HTTP請求報文並封裝在TCP包中，通過TCP協議發送到伺服器指定埠。
伺服器解析HTTP請求並按照報文格式封裝成需要的HTTP對象，返回給瀏覽器。數據傳輸完畢後，就通過四次分手將客戶端和伺服器的連接釋放。
瀏覽器根據拿到的響應報文進行頁面的解析和渲染。
DNS解析
輸入URL後，需要找到這個URL對應的伺服器，為了查詢伺服器地址，第一步需要實現從網址到對應ip的轉換，瀏覽器首先依次查詢自身緩存，系統緩存和路由器緩存的記錄，如果沒有則查詢本地host文件，再沒有就向DNS伺服器發送域名解析請求。
DNS查詢過程
域名系統DNS
DNS能夠將互聯網的主機名轉換成ip地址，為了減少開銷，DNS是以UDP用戶數據報的形式發送解析請求的。
域名解析過程中有兩種查詢方式：
遞歸查詢
類似主機向伺服器A發查詢請求，若未找到則由伺服器A向伺服器B發起查詢，未找到再向伺服器C發起查詢請求，以此類推，最後再將查詢結果依次經過伺服器C，伺服器B，伺服器A返回給主機的查詢模式。
由於本地域名伺服器距離主機一般只有幾個路由的距離，主機向本地域名伺服器查詢一般採用遞歸查詢。
迭代查詢
類似伺服器A向伺服器B發查詢請求，若未找到則將查詢結果返回給伺服器A，由伺服器A繼續向伺服器C發送請求，以此類推，最後得到查詢結果的查詢模式。
本地域名伺服器向根域名伺服器的查詢一般採用迭代查詢。
TCP連接
瀏覽器通過隨機埠向伺服器指定埠發起TCP連接請求，通過運輸層，網路層，數據鏈路層，物理層到達伺服器，經過三次握手後建立TCP連接。
五層協議體系結構
應用層：以報文的方式通過應用進程間的交互完成特定網路應用。常見的應用層協議有域名系統DNS，HTTP協議等。
運輸層：為應用層的報文段或用戶數據報提供傳輸服務。運輸層的協議有TCP協議和UDP協議。
網路層：將運輸層的報文段或用戶數據報封裝成分組，以分組(又稱為IP數據報)的形式在網路中轉發。
數據鏈路層：將網路層的IP數據報封裝成幀，在兩個相鄰結點(路由器或其他傳輸媒體)之間傳輸。
物理層：在鏈接各種計算機的傳輸媒體之間傳輸數據比特流。
TCP和UDP
TCP提供面向連接的，可靠的數據傳輸服務。以報文段的形式傳輸；
UDP提供無連接的，盡最大努力的數據傳輸服務。以用戶數據報的形式傳輸。
三次握手
第一次握手：客戶端進程發送連接請求報文段給伺服器，客戶端進程進入sync-sent(同步已發送)狀態。
第二次握手：伺服器收到請求報文段，如果同意建立連接則向客戶端發送確認報文段，伺服器進程進入sync-rcvd(同步收到)狀態。
第三次握手：客戶端進程收到伺服器的確認後，再給伺服器進程發送確認。
第三次握手的原因是為了防止已失效的連接請求報文段突然又傳回給伺服器進程從而產生錯誤。假設客戶端發送第一次連接請求由於網路滯留了，於是客戶端又發送了一次請求並成功建立連接，數據傳輸完畢後就釋放了連接。在釋放連接後的某個時間段內客戶端的第一次報文段又到達了伺服器並被伺服器進程確認，如果沒有第三次握手，則伺服器會一直等待客戶端發送數據，從而浪費許多資源。
發送HTTP請求
三次握手後，就可以傳輸數據了，客戶端將要發送的內容構建成HTTP請求報文並封裝在TCP包中，通過TCP協議發送到伺服器指定埠。
HTTP請求報文格式
HTTP請求報文一般由請求行和請求頭組成，請求頭用來說明報文主體的一些信息。請求報文和響應報文的區別就是開始行的不同。
請求報文中的開始行稱為請求行，HTTP請求行只有三個內容，即方法，URL和HTTP版本。
GET sample.jsp HTTP/1.1
請求方法有：
GET 請求讀取URL中的信息
POST 向指定資源提交數據，如提交表單，上傳文件等、
HEAD 請求URL所標誌信息的首部
DELETE 請求伺服器刪除指定的頁面
OPTIONS 允許客戶端查看伺服器性能
PUT 用從客戶端向伺服器傳送的數據來替換指定文檔的內容
CONNECT 用於代理伺服器
TRACK 用於測試和診斷
伺服器處理請求並返回報文
伺服器解析HTTP協議並按照報文格式封裝成需要的HTTP請求對象，返回給瀏覽器。數據傳輸完畢後，就通過四次分手將客戶端和伺服器的連接釋放。
HTTP響應報文格式
HTTP響應報文一般由狀態行，響應頭和響應報文組成，響應頭用來說明報文主體的一些信息。
響應報文中的開始行稱為狀態行，HTTP狀態行也只有三個內容，即HTTP版本，狀態碼和解釋狀態碼的簡單短語。
HTTP/1.1 200 OK
狀態碼的含義：
1xx 伺服器收到請求
2xx 請求成功，開始處理
3xx 重定向
4xx 客戶端錯誤
5xx 伺服器錯誤
TCP四次揮手
第一次揮手：客戶端發送釋放連接請求，不再發送數據，但還可接收數據。
第二次揮手：伺服器收到連接釋放的報文段後即發出確認，這樣從客戶端到伺服器的連接就釋放了。
第三次揮手：等所有數據傳輸完畢後，伺服器發送終止請求給客戶端，表示不再傳輸數據給客戶端。
第四次揮手：最後客戶端收到伺服器關閉請求後發送確認報文段，完成四次揮手。
瀏覽器解析和渲染
瀏覽器根據拿到的響應報文進行解析和頁面的渲染。
構建DOM樹
HTML文檔會被解析成一棵以document為根的DOM樹，解析過程中如果遇到JavaScript，則會暫停解析並傳輸下載相應的文件造成阻塞，故推薦將JavaScript腳本放在HTML文件的後面。
構建CSSSOM樹
瀏覽器根據外部樣式，內部樣式和內聯樣式來解析CSS，構建CSSSOM樹。
構建渲染樹和布局
DOM樹和CSSOM樹構建完畢後會融合成渲染樹，然後瀏覽器會確認頁面各元素的位置。
頁面繪製和優化
瀏覽器根據布局結果進行頁面的繪製，並優化頁面內容，減小CPU消耗。
渲染結束後整個頁面就呈現在我們面前了。
TAG:厚朴HOPE工作室 |