2019.7.12

從輸入一個網址到瀏覽器顯示頁面經歷的過程

平常生活中，咱們常常使用各類瀏覽器訪問各大網站，可是對於這幾秒的跳轉，你又瞭解多少呢？

1.輸入網址

網址，咱們又稱做URL，即統一資源定位符，通俗地說，它是用來指出某一項信息的所在位置及存取方式。

2.緩存解析

當咱們輸入網址以後，瀏覽器首先會從本身的緩存中去尋找，若是有的話就顯示頁面，若是沒有，就會進行下一步-域名解析

3. 域名解析 由DNS服務器進行域名解析，轉換成相應的ip地址，以後由瀏覽器發出http請求，發送請求頭。

4.三次握手 TCP進行三次握手，與服務器創建鏈接獲取服務，服務器發送響應頭和響應體。

5.頁面渲染 瀏覽器獲取服務器發送的響應頭和響應體，進行渲染。

瀏覽器的渲染機制

瀏覽器的渲染樹是由HTML的DOM樹和CSS的CSS樹組合而成，瞭解瀏覽器的渲染機制，有助於咱們在寫外部樣式時選擇合適的位置讓瀏覽器以最快的速度將文件加載完畢。

HTML樹

咱們都知道HTML是由標籤組成的，這些標籤由上往下，由內往外構成了html的dom樹，如圖所示：

CSS樹

在咱們寫好一個HTML文件時，咱們須要設計它的樣式，讓她能達到咱們預期的設計結果，咱們規定每一個標籤的樣式，也所以生成了CSS渲染樹。

渲染樹 當HTML樹和CSS樹都具有以後，便會構建出渲染樹。

DOM 樹與 CSSOM 樹合併後造成渲染樹。

渲染樹只包含渲染網頁所需的節點。

佈局計算每一個對象的精確位置和大小。

最後一步是繪製，使用最終渲染樹將像素渲染到屏幕上。

簡單總結HTTP協議

HTTP 超文本傳輸協議，是一種創建在TCP上的無狀態鏈接，整個基本的工做流程是客戶端發送一個HTTP請求，說明客戶端想要訪問的資源和請求的動做，服務端收到請求以後，服務端開始處理請求，並根據請求作出相應的動做訪問服務器資源，最後經過發送HTTP響應把結果返回給客戶端。

http請求

HTTP請求由狀態行、請求頭、請求正文三部分組成：

狀態行：包括請求方式Method、資源路徑URL、協議版本Version；

請求頭：包括一些訪問的域名、用戶代理、Cookie等信息；

請求正文：就是HTTP請求的數據。

http響應

HTTP響應由三部分組成：狀態行、響應頭、響應正文；

狀態行：包括協議版本Version、狀態碼Status Code、迴應短語；

響應頭：包括搭建服務器的軟件，發送響應的時間，迴應數據的格式等信息；

響應正文：就是響應的具體數據。

常見狀態碼的含義

200---OK/請求已經正常處理完畢

    301---/請求永久重定向

    302---/請求臨時重定向

    304---/請求被重定向到客戶端本地緩存

    400---/客戶端請求存在語法錯誤

    401---/客戶端請求沒有通過受權

    403---/客戶端的請求被服務器拒絕，通常爲客戶端沒有訪問權限

    404---/客戶端請求的URL在服務端不存在

    500---/服務端永久錯誤

    503---/服務端發生臨時錯誤
複製代碼

三次握手和四次揮手

tcp的三次握手是客戶機與服務器創建鏈接的機制

首先由客戶端向服務器端發起請求（syn包）並等待服務器響應。

服務器接收到客戶機發送的請求以後，向客戶機發送確認包。

在客戶機收到服務器發送的確認包以後，再向服務器發送一個確認的確認，完成三次握手（三次握手之間沒有數據傳輸）。

在通過三次握手以後，客戶機與服務器創建鏈接，開始傳輸數據。

TCP的四次揮手是客戶機服務器斷開鏈接的機制

首先客戶機向服務器發送報文，表達我要斷開鏈接（第一次揮手）。

服務器在收到客戶機發送的斷開報文後，向客戶機發送確認報文（第二次揮手）。

同時，服務器向客戶機發送斷開請求（第三次揮手）。

客戶機收到服務器發送的斷開請求，鏈接斷開（第四次揮手）。