從輸入URL到頁面展示到底發生了什麼

從輸入URL到頁面展示到底發生了什麼

1、輸入地址

在瀏覽器中輸入網址的時候,瀏覽器其實就已經在匹配可能得 url 了,瀏覽器會從歷史記錄,書籤等地方,找到已經輸入的字符串可能對應的 url,然後給出智能提示,讓你可以補全url地址

對於chrome 的瀏覽器,會直接從緩存中查找是否緩存過該網頁,如果找到則把網頁展示出來,也就是說,當你還沒有按下 enter發送請求,頁面就已經加載出來了。

2、瀏覽器查找域名的 IP 地址

1、瀏覽器首先會重本地硬盤的hosts文件中查看是否存在這個域名對應的規則,如果匹配上就會直接使用hosts文件中的ip地址。

2、本地hosts文件中沒有匹配的域名ip時,瀏覽器會發送一個DNS請求到本地的DNS服務器,

3、本地DNS收到請求後,會查詢緩存記錄,如果查詢到將結果返回,若未查到則向DNS根服務器遞歸查詢

4、如果DNS根目錄都沒有找到域名與ip的對應記錄,根DNS服務器會告訴本地DNS服務器向域名解析服務器發起查詢請求,如.com域服務器

5、本地DNS服務器向域名解析服務器發起查詢請求,域名解析服務器返回域名解析服務器的地址或返回域名不存在。

6、最後本地DNS服務器向域名的解析服務器發出請求,這時就能收到一個域名和IP地址對應關係。

 

3、瀏覽器向 web 服務器發送一個 HTTP 請求

1、瀏覽器獲取到域名與ip對應關係後,會以本機一個隨機端口(1024<端口<65535)向服務器的WEB程序(常用的有httpd,nginx等)80端口發起TCP的連接請求。

2、請求經過網絡中間各種路由設備到達服務器端後到達目標設備網卡進入到內核的TCP/IP協議棧開始識別該連接請求,解封包,一層一層的剝開最終到達WEB程序,最終建立了TCP/IP的連接。

TCP連接:

 

3、建立了TCP連接之後,就可以發起http請求。

HTTP請求包含:

| 請求方法URI協議/版本

| 請求頭(Request Header)

| 請求正文:

 

4、服務器處理請求

1、後端從在固定的端口接收到TCP報文開始,它會對TCP連接進行處理,對HTTP協議進行解析,並按照報文格式進一步封裝成HTTP Request對象,供上層使用

有些網站會將你的請求到反向代理服務器中,客戶端不是直接通過HTTP協議訪問某網站應用服務器,而是先請求到Nginx,Nginx分發請求不同應用服務器( 將同一個應用部署在多臺服務器上,將大量用戶的請求分配給多臺機器處理 ),然後將結果返回給客戶端,這裏Nginx的作用是反向代理服務器。

Nginx負載均衡:

 

5、服務器返回一個 HTTP 響應

1、服務器收到請求並處理請求後,它會把它的處理結果返回,也就是返回一個HTPP響應。

HTTP響應構成

l  狀態行

l  響應頭(Response Header)

l  響應正文

 

6、瀏覽器解析響應內容並展示

1、瀏覽器解析html文件

瀏覽器在解析html文件時,會”自上而下“加載,並在加載過程中進行解析渲染。

解析過程中,瀏覽器首先會解析HTML文件構建DOM樹,然後解析CSS文件構建渲染樹,等到渲染樹構建完成後,瀏覽器開始佈局渲染樹並將其繪製到屏幕上。這個過程比較複雜,涉及到兩個概念: reflow(迴流)和repain(重繪)。

2、瀏覽器解析JS

JS的解析是由瀏覽器中的JS解析引擎完成的,比如谷歌的是V8

3、瀏覽器發送請求獲取嵌入在 HTML 中的資源

在瀏覽器顯示HTML時,它會注意到需要獲取其他地址內容的標籤。瀏覽器會發送一個獲取請求來重新獲得這些文件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章