前端面試題:一個完整的http事物過程

完整的HTTP請求會經歷以下過程

前端面試題:一個完整的http事物過程

輸入url到頁面加載都發生了什麼事情?(簡述)

輸入地址

瀏覽器查找域名的 IP 地址 這一步包括 DNS 具體的查找過程,包括:瀏覽器緩存->系統緩存->hosts->DNS

瀏覽器會通過一個本地隨機端口建立一個與服務器指定端口之間的連接通道

瀏覽器將客戶端信息打包,並通過連接通道向 web 服務器發送一個 HTTP 請求

服務器拿到請求文件,拿到對應請求路徑

通過請求路徑對應文件的擴展名找到文件的MIME Type

判斷是否為靜態?

1,如果是靜態直接讀取
2,如果不是靜態(php)交給'外包公司'

服務器會把發給客戶端的數據打一個包,並返回一個 HTTP 響應

瀏覽器拿到包,找到content-type

根據content-type決定如何處理響應內容

瀏覽器顯示 HTML

瀏覽器發送請求獲取嵌入在 HTML 中的資源(如圖片、音頻、視頻、CSS、JS等等)

瀏覽器發送異步請求

用戶在瀏覽器地址欄輸入www.baidu.com,然後回車,這一瞬間發生了什麼? (以下過程僅是個人理解)

1.域名解析(DNS解析)

(1),首先, 瀏覽器會檢查本地緩存(瀏覽器緩存)中有沒有這個域名

注:我們怎麼查看Chrome自身的緩存?可以使用 chrome://net-internals/#dns 來進行查看

=> 返回ip地址

沒有 => 下一步

(2),然後,瀏覽器會搜索操作系統(Windows系統)自身的DNS緩存,如果找到且沒有過期則停止搜索解析到此結束.

注:怎麼查看操作系統自身的DNS緩存,以Windows系統為例,可以在命令行下使用 ipconfig/displaydns 來進行查看  

=> 返回ip地址

沒有 => 下一步

(3),如果在Windows系統的DNS緩存也沒有找到,那麼嘗試讀取hosts文件(位於C:\Windows\System32\drivers\etc),看看這裡面有沒有該域名對應的IP地址。

=> 返回ip地址

沒有 => 下一步

(4),如果在hosts文件中也沒有找到對應的條目,瀏覽器就會發起一個DNS的系統調用,,就會向本地配置的首選DNS服務器(一般是電信運營商提供的,也可以使用像Google提供的DNS服務器)發起域名解析請求(通過的是UDP協議向DNS的53端口發起請求,這個請求是遞歸的請求,也就是運營商的DNS服務器必須得提供給我們該域名的IP地址),運營商的DNS服務器首先查找自身的緩存,找到對應的條目,且沒有過期,則解析成功。

前端面試題:一個完整的http事物過程

當查找到對應的IP地址之後,通過IP地址查找到對應的服務器,瀏覽器將用戶發起的http請求發送給服務器

2.發起TCP的3次握手

拿到域名對應的IP地址之後,瀏覽器會以一個隨機端口(1024 < 端口 < 65535)向服務器的Web server 80端口發起TCP的連接請求。

常見的web server產品有 apache、nginx、IIS、Lighttpd 等

這個連接請求到達服務器端後,進入到網卡,然後是進入到內核的TCP/IP協議棧,還有可能要經過防火牆的過濾,最終到達WEB程序,最終建立了TCP/IP的連接。

三次握手:
客戶端–發送帶有SYN標誌的數據包–一次握手–服務端
服務端–發送帶有SYN/ACK標誌的數據包–二次握手–客戶端
客戶端–發送帶有帶有ACK標誌的數據包–三次握手–服務端

如下圖:

前端面試題:一個完整的http事物過程

TCP 為什麼需要3次握手?

舉個例子:

假設一個老外在故宮裡面迷路了,看到了小明,於是就有下面的對話:

老外: Excuse me,Can you Speak English?

小明: yes 。

老外: OK,I want …

在問路之前,老外先問小明是否會說英語,小明回答是的,這時老外才開始問路

3.建立TCP連接後發起http請求

進過TCP3次握手之後,瀏覽器發起了http的請求.

4.服務器端響應http請求,瀏覽器得到html代碼

服務器端WEB程序接收到http請求以後,就開始處理該請求,處理之後就返回給瀏覽器html文件。

根據請求對應文件找到MIME TYPE(Content-Type)

那麼如何處理請求?實際上就是後臺處理的工作。後臺開發現在有很多框架,但大部分都還是按照MVC設計模式進行搭建的。

處理的過程如下圖:

前端面試題:一個完整的http事物過程

MVC的處理過程是這樣的:對於每一個用戶輸入的請求,首先被控制器接收,控制器決定用哪個模型來進行處理,然後模型用業務邏輯來處理用戶的請求並返回數據,最後控制器確定用哪個視圖模型,用相應的視圖格式化模型返回html字符串給瀏覽器,並通過顯示頁面呈現給用戶。

5.瀏覽器處理html代碼

接下來就是瀏覽器進行處理, 通過後臺處理返回的HTML字符串被瀏覽器接受後被一句句讀取解析,html頁面經歷加載、解析、渲染。

加載

瀏覽器對一個html頁面的加載順序是從上而下的。如果加載過程中遇到外部css文件,瀏覽器另外發出一個請求,來獲取css文件。遇到圖片資源,瀏覽器也會另外發出一個請求,來獲取圖片資源。但是當文檔加載過程中遇到js文件,html文檔會掛起渲染(加載解析渲染同步)的線程,不僅要等待文檔中js文件加載完畢,還要等待解析執行完畢,才可以恢復html文檔的渲染線程。

解析

解析文檔是指將文檔轉化成為有意義的結構,也就是可讓代碼理解和使用的結構。解析得到的結果通常是代表了文檔結構的節點樹,它稱作解析樹或者語法樹,也就是DOM樹。如下圖:

前端面試題:一個完整的http事物過程

css解析將css文件解析為樣式表對象。如下圖:

前端面試題:一個完整的http事物過程

js解析文件在加載的同時也進行解析

渲染

即為構建渲染樹的過程,就是將DOM樹進行可視化表示。構建這棵樹是為了以正確的順序繪製文檔內容。

6.瀏覽器對頁面進行渲染呈現給用戶

最後,瀏覽器利用自己內部的工作機制,把請求到的靜態資源和html代碼進行渲染,渲染之後呈現給用戶。

前端面試題:一個完整的http事物過程

這些技術如何學習,有沒有免費資料?

對前端的技術,架構技術感興趣的同學關注我的頭條號,並在後臺私信發送關鍵字:“前端”即可獲取免費的架構師學習資料

知識體系已整理好,歡迎免費領取。還有面試視頻分享可以免費獲取。關注我,可以獲得沒有的架構經驗哦!!


分享到:


相關文章: