發送http請求過程所經歷的階段

先上一張圖給大家看看

http請求流程圖

相信看完這張圖後大家對一次請求也有了大致的瞭解了,當前其中還有很多細節小編沒有畫出來,然後我們來看看部分過程的細節

所以其流程大致如下:


1:DNS解析域名得到IP地址
2:客戶端與服務器建立連接(TCP三次握手)
3:客戶端發起請求
4:服務器接收到請求根據端口號.路徑等找到對應資源文件,響應源代碼給客戶端
5:客戶端拿到請求到的數據(html頁面的源代碼),開始解析頁面以及請求資源
6:客戶端渲染頁面
7:web服務器斷開連接(四次揮手)

1.url的組成

說的url那就的說說URI和URN了,URI由URL和URN組成。

URI:統一資源標識符

URL:統一資源定位符

URN:統一資源名稱

 2.DNS解析過程

1、在瀏覽器中輸入www . qq .com 域名,操作系統會先檢查自己本地的hosts文件是否有這個網址映射關係,如果有,就先調用這個IP地址映射,完成域名解析。
2、如果hosts裏沒有這個域名的映射,則查找本地DNS解析器緩存,是否有這個網址映射關係,如果有,直接返回,完成域名解析。
3、如果hosts與本地DNS解析器緩存都沒有相應的網址映射關係,首先會找TCP/ip參數中設置的首選DNS服務器,在此我們叫它本地DNS服務器,此服務器收到查詢時,如果要查詢的域名,包含在本地配置區域資源中,則返回解析結果給客戶機,完成域名解析,此解析具有權威性。
4、如果要查詢的域名,不由本地DNS服務器區域解析,但該服務器已緩存了此網址映射關係,則調用這個IP地址映射,完成域名解析,此解析不具有權威性。
5、如果本地DNS服務器本地區域文件與緩存解析都失效,則根據本地DNS服務器的設置(是否設置轉發器)進行查詢,如果未用轉發模式,本地DNS就把請求發至13臺根DNS,根DNS服務器收到請求後會判斷這個域名(.com)是誰來授權管理,並會返回一個負責該頂級域名服務器的一個IP。本地DNS服務器收到IP信息後,將會聯繫負責.com域的這臺服務器。這臺負責.com域的服務器收到請求後,如果自己無法解析,它就會找一個管理.com域的下一級DNS服務器地址(http://qq.com)給本地DNS服務器。當本地DNS服務器收到這個地址後,就會找http://qq.com域服務器,重複上面的動作,進行查詢,直至找到www . qq .com主機。
6、如果用的是轉發模式,此DNS服務器就會把請求轉發至上一級DNS服務器,由上一級服務器進行解析,上一級服務器如果不能解析,或找根DNS或把轉請求轉至上上級,以此循環。不管是本地DNS服務器用是是轉發,還是根提示,最後都是把結果返回給本地DNS服務器,由此DNS服務器再返回給客戶機。

3.TCP三次握手

第一次握手:客戶端發送一個帶 SYN=1,Seq=X 的數據包到服務器端口(第一次握手,由瀏覽器發起,告訴服務器我要發送請求了) 
第二次握手服務器發回一個帶 SYN=1, ACK=X+1, Seq=Y 的響應包以示傳達確認信息(第二次握手,由服務器發起,告訴瀏覽器我準備接受了,你趕緊發送吧) 
第三次握手:客戶端再回傳一個帶 ACK=Y+1, Seq=Z 的數據包,代表“握手結束”(第三次握手,由瀏覽器發送,告訴服務器,我馬上就發了,準備接受吧)
其實簡單理解就是:
    客戶端問服務器:哥們,忙不?
    服務器回客戶端:不忙,哥們有活?
    客戶端回服務器:大活,準備接受吧!

4.TCP四次揮手

第一次揮手:發起方向被動方發送報文,Fin、Ack、Seq,表示已經沒有數據傳輸了。並進入 FIN_WAIT_1 狀態。(第一次揮手:由瀏覽器發起的,發送給服務器,我請求報文發送完了,你準備關閉吧)

第二次揮手:被動方發送報文,Ack、Seq,表示同意關閉請求。此時主機發起方進入 FIN_WAIT_2 狀態。(第二次揮手:由服務器發起的,告訴瀏覽器,我請求報文接受完了,我準備關閉了,你也準備吧)

第三次揮手:被動方向發起方發送報文段,Fin、Ack、Seq,請求關閉連接。並進入 LAST_ACK 狀態。(第三次揮手:由服務器發起,告訴瀏覽器,我響應報文發送完了,你準備關閉吧)

第四次揮手:發起方向被動方發送報文段,Ack、Seq。然後進入等待 TIME_WAIT 狀態。被動方收到發起方的報文段以後關閉連接。發起方等待一定時間未收到回覆,則正常關閉。(第四次揮手:由瀏覽器發起,告訴服務器,我響應報文接受完了,我準備關閉了,你也準備吧)

5.瀏覽器渲染過程

瀏覽器解析渲染頁面分爲一下五個步驟:
1、根據 HTML 解析出 DOM 樹
2、根據 CSS 解析生成 CSS 規則樹
3、結合 DOM 樹和 CSS 規則樹,生成渲染樹
4、根據渲染樹計算每一個節點的信息
5、根據計算好的信息繪製頁面

根據 HTML 解析 DOM 樹

根據 HTML 的內容,將標籤按照結構解析成爲 DOM 樹,DOM 樹解析的過程是一個深度優先遍歷。即先構建當前節點的所有子節點,再構建下一個兄弟節點。

在讀取 HTML 文檔,構建 DOM 樹的過程中,若遇到 script 標籤,則 DOM 樹的構建會暫停,直至腳本執行完畢。

根據 CSS 解析生成 CSS 規則樹

解析 CSS 規則樹時 js 執行將暫停,直至 CSS 規則樹就緒。

瀏覽器在 CSS 規則樹生成之前不會進行渲染。

結合 DOM 樹和 CSS 規則樹,生成渲染樹

DOM 樹和 CSS 規則樹全部準備好了以後,瀏覽器纔會開始構建渲染樹。

精簡 CSS 並可以加快 CSS 規則樹的構建,從而加快頁面相應速度。

根據渲染樹計算每一個節點的信息(佈局)

佈局:通過渲染樹中渲染對象的信息,計算出每一個渲染對象的位置和尺寸

迴流:在佈局完成後,發現了某個部分發生了變化影響了佈局,那就需要倒回去重新渲染。

根據計算好的信息繪製頁面

繪製階段,系統會遍歷呈現樹,並調用呈現器的“paint”方法,將呈現器的內容顯示在屏幕上。

重繪:某個元素的背景顏色,文字顏色等,不影響元素周圍或內部佈局的屬性,將只會引起瀏覽器的重繪。

迴流:某個元素的尺寸發生了變化,則需重新計算渲染樹,重新渲染。

6.異步的請求

在web2.0時代,即使在頁面渲染後客戶端還是持續與服務器端通信,這個模式被稱爲AJAX,是“Asynchronous JavaScript And XML”的縮寫。

JS的解析是由瀏覽器中的JS解析引擎完成的。JS是單線程運行,也就是說,在同一個時間內只能做一件事,所有的任務都需要排隊,前一個任務結束,後一個任務才能開始。但是又存在某些任務比較耗時,如IO讀寫等,所以需要一種機制可以先執行排在後面的任務,這就是:同步任務(synchronous)和異步任務(asynchronous)。JS的執行機制就可以看做是一個主線程加上一個任務隊列(task queue)。同步任務就是放在主線程上執行的任務,異步任務是放在任務隊列中的任務。所有的同步任務在主線程上執行,形成一個執行棧;異步任務有了運行結果就會在任務隊列中放置一個事件;腳本運行時先依次運行執行棧,然後會從任務隊列裏提取事件,運行任務隊列中的任務,這個過程是不斷重複的,所以又叫做事件循環(Event loop)。

瀏覽器在解析過程中,如果遇到請求外部資源時,請求過程是異步的,並不會影響HTML文檔進行加載,但是當文檔加載過程中遇到JS文件,HTML文檔會掛起渲染過程,不僅要等到文檔中JS文件加載完畢還要等待解析執行完畢,纔會繼續HTML的渲染過程。原因是因爲JS有可能修改DOM結構,這就意味着JS執行完成前,後續所有資源的下載是沒有必要的,這就是JS阻塞後續資源下載的根本原因。CSS文件的加載不影響JS文件的加載,但是卻影響JS文件的執行。JS代碼執行前瀏覽器必須保證CSS文件已經下載並加載完畢。

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