從瀏覽器輸入網址到出現頁面的過程?

1、DNS將域名解析ip地址

輸入網址以後,瀏覽器會先去緩存中查找這個域名有沒有對應的ip地址的關係,如果有的話,直接向ip地址發送請求,進行下一步。如果沒有,再去找DNS服務器解析域名

 

2、建立TCP連接

拿到相應的ip地址以後,向該服務器發送請求。TCP三次握手就是一個問詢的過程。客戶端問詢是否可以發送-服務器確認可以發送-客戶端知道了可以發送。

例:

客戶端:我可以做你男朋友嗎?

服務器:可以哦

客戶端:好的(在一起了牽手手了巴拉巴拉...)

 

3、發送HTTP請求

建立連接後,可以發送請求了。-http請求一般包含四個部分-請求頭、空行、請求內容、請求行。

請求方法:post/delete/put/patch/get/head/trace/option

 

4、服務器處理請求

web服務器收到請求後知道了需要調度哪些資源來解析http請求的參數和信息,然後將請求的結果返回給客戶端。

 

5、返回相應的結果

就是http的響應信息。http響應信息的結構分爲狀態碼,響應內容。

 

狀態碼一般分爲以下幾種類型:

2-成功 200

3-重定向 304

4-客戶端問題 404

5-服務器端問題 500

 

6、關閉TCP連接

四次揮手,問詢關閉的過程。

例:

客戶端:我想分手。

服務器端:我思考下我分不分...分吧

客戶端:那我們分手吧。

服務器端:好的,滾犢子吧。

 

7、瀏覽器解析html+css+js+以及一些媒體資源

解析生成html的dom樹,解析css生成cssom規則樹,然後合成-生成渲染樹

 

8、佈局

遍歷渲染樹生成佈局,計算每個節點的大小和位置信息。繪製,顯示。

 

 

7和8瀏覽器解析過程:

解析html-生成dom樹

解析css-生成規則樹

合成-生成渲染樹

遍歷渲染樹開始佈局-計算每個節點的大小和位置

繪製-顯示

 

需要注意的是:

html渲染規則-先解析css,後js,js和css的解析都會阻礙dom的解析,

渲染樹的生成是左右形勢渲染的,先生成dom,然後根據dom查找相應的css進行渲染。

 

這裏還需要提到兩個詞:重繪和重排。

重繪:部分改變,整體佈局不變。repaint

重排:渲染樹變了,需要重新計算渲染樹。reflow

重繪不一定重排,重排一定重繪

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