從用戶在瀏覽器輸入的一個url,到網頁打開展現出來,經歷了什么過程


從輸入URL到瀏覽器顯示頁面發生了什么

 

1、輸入網址

當你開始輸入網址比如www.cnblogs.com時游覽器就可以在書簽或者歷史記錄里面去搜索相關的網址推薦給你。

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

① 請求發起后,游覽器首先會解析這個域名,首先它會查看本地硬盤的 hosts 文件,看看其中有沒有和這個域名對應的規則,如果有的話就直接使用 hosts 文件里面的 ip 地址。

② 如果在本地的 hosts 文件沒有能夠找到對應的 ip 地址,瀏覽器會發出一個 DNS請求到本地DNS(域名分布系統)服務器 。本地DNS服務器一般都是你的網絡接入服務器商提供,比如中國電信,中國移動。

③查詢你輸入的網址的DNS請求到達本地DNS服務器之后,本地DNS服務器會首先查詢它的緩存記錄,如果緩存中有此條記錄,就可以直接返回結果,此過程是遞歸的方式進行查詢。如果沒有,本地DNS服務器還要向DNS根服務器進行查詢

④根DNS服務器沒有記錄具體的域名和IP地址的對應關系,而是告訴本地DNS服務器,你可以到域服務器上去繼續查詢,並給出域服務器的地址。這種過程是迭代的過程

⑤本地DNS服務器繼續向域服務器發出請求,在這個例子中,請求的對象是.com域服務器。.com域服務器收到請求之后,也不會直接返回域名和IP地址的對應關系,而是告訴本地DNS服務器,你的域名的解析服務器的地址

⑥最后,本地DNS服務器向域名的解析服務器發出請求,這時就能收到一個域名和IP地址對應關系,本地DNS服務器不僅要把IP地址返回給用戶電腦,還要把這個對應關系保存在緩存中,以備下次別的用戶查詢時,可以直接返回結果,加快網絡訪問。

3、建立TCP鏈接

在拿到域名對應的IP地址后,會以隨機端口(1024~~65535)向WEB服務器程序80端口發起TCP的連接請求,這個連接請求進入到內核的TCP/IP協議棧(用於識別該連接請求,解封包,一層一層的剝開),還有可能要經過Netfilter防火牆(屬於內核的模塊)的過濾,最終到達WEB程序,最終建立了TCP/IP的連接,對於客戶端與服務器的TCP鏈接,必然要說的就是『三次握手』。

          三次握手

客戶端發送一個帶有SYN標志的數據包給服務端,服務端收到后,回傳一個帶有SYN/ACK標志的數據包以示傳達確認信息,最后客戶端再回傳一個帶ACK標志的數據包,代表握手結束,連接成功。

通俗化之后就是:

客戶端:老弟我要跟你鏈接

服務端:好的,同意了

客戶端:好嘞

4、游覽器向WEB服務器發起Http請求

建立TCP連接之后,發起HTTP請求,請求一般分為三部分

請求方法URI協議/版本

請求頭(Request Header)

請求正文

下面是一個完整的請求

詳細的就不描述了,網上很多說明的。

 5、服務器端處理

服務器端收到請求后的由web服務器(准確說應該是http服務器)處理請求,諸如Apache、Ngnix、IIS等。web服務器解析用戶請求,知道了需要調度哪些資源文件,再通過相應的這些資源文件處理用戶請求和參數,並調用數據庫信息,最后將結果通過web服務器返回給瀏覽器客戶端。

6、關閉TCP鏈接

為了避免服務器與客戶端雙方的資源占用和損耗,當雙方沒有請求或響應傳遞時,任意一方都可以發起關閉請求。與創建TCP連接的3次握手類似,關閉TCP連接,需要4次握手。

上圖可以通俗化:

客戶端:老弟,我這邊沒數據要傳了,咱們關閉鏈接吧

服務端:好的,接收到了,我看看我這邊還有沒有要傳的

服務端:我這邊也沒有了,關閉吧

客戶端:好嘞

7、游覽器解析資源

對於獲取到的HTML、CSS、JS、圖片等等資源。

瀏覽器通過解析HTML,生成DOM樹,解析CSS,生成CSS規則樹,然后通過DOM樹和CSS規則樹生成渲染樹。渲染樹與DOM樹不同,渲染樹中並沒有head、display為none等不必顯示的節點。

在解析CSS的同時,可以繼續加載解析HTML,但在解析執行JS腳本時,會停止解析后續HTML,這就會出現阻塞問題,關於JS阻塞相關問題,這里不過多闡述,后面會單獨開篇講解。

          webkit渲染流程

8、游覽器布局渲染

根據渲染樹布局,計算CSS樣式,即每個節點在頁面中的大小和位置等幾何信息。HTML默認是流式布局的,CSS和js會打破這種布局,改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念:repaint和reflow。

repaint:屏幕的一部分重畫,不影響整體布局,比如某個CSS的背景色變了,但元素的幾何尺寸和位置不變。
reflow: 意味着元件的幾何尺寸變了,我們需要重新驗證並計算渲染樹。是渲染樹的一部分或全部發生了變化。這就是Reflow,或是Layout。
有些情況下,比如修改了元素的樣式,瀏覽器並不會立刻 reflow 或 repaint 一次,而是會把這樣的操作積攢一批,然后做一次 reflow,這又叫異步 reflow 或增量異步 reflow。
有些情況下,比如 resize 窗口,改變了頁面默認的字體等。對於這些操作,瀏覽器會馬上進行 reflow。

好的,完畢!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM