瀏覽器從輸入URL到頁面渲染過程


一.輸入網址(URL)

URL

當我們想要打開一個頁面時,很簡單的會想到去輸入一個網址,比如說(www.baidu.com)這里俗稱的網址其實就是URL(統一資源定位符,Uniform Resource Locator)用於定位互聯網上資源,俗稱網址。

URL格式

protocol://host.domain:port /path to the file?parameters#anchor

(協議)://(主機名):(端口號)/(文件名)/(文件路徑)(?額外參數)(#錨點)

示例解析

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

(1)http :http是協議(Protocol),它表明了瀏覽器使用何種協議,有http、https、ftp、mailto等,其中https是加密認證版的http;

(2)www. http://example.com :這是域名(Domain name),它表明正在請求哪個Web服務器,其中www是主機名(host);

(3)80:這是端口(Port),它表示用於訪問Web服務器上的資源的“門”。如果Web服務器使用HTTP協議的標准端口(HTTP為80,HTTPS為443)來授予其資源的訪問權限,則通常會被忽略。否則是強制性添加。

(4)/path/to/myfile.html :是網絡服務器上資源的路徑(Path to the file)。在Web的早期階段,像這樣的路徑表示Web服務器上的物理文件位置。

(5)?key1=value1&key2=value2 :是提供給網絡服務器的額外參數(Parameters)。 這些參數是用 &符號分隔的鍵/值對列表。

(6)#SomewhereInTheDocument:是資源本身的另一部分的錨點(Anchor)。 錨點表示資源中的一種“書簽”,給瀏覽器顯示位於該“加書簽”位置的內容的方向。

在我們真正輸入和操作的時候很多東西會被自動補全,也有很多部分可以省略,比如端口、協議等。

《計算機網絡》

. DNS解析 (DNS解析獲取域名對應的IP地址)

  輸入網址(URL)這一步我們很好理解,但是接下來所謂的域名解析是什么呢?又是為什么要進行域名解析呢?在回答這些問題之前,我們先來看看百度百科對IP地址的介紹:

  IP 地址(Internet Protocol Address)是互聯網協議特有的一種地址,它是 IP 協議提供的一種統一的地址格式。IP 地址為互聯網上的每一個網絡和每一台主機分配一個邏輯地址,以此來屏蔽物理地址的差異。Eg:192.168.59.0就是一個主機IP地址。

  對於計算機來說,它既可以被賦予IP地址,又可以被賦予主機名和域名。但我們通常使用域名(www.baidu.com)去訪問想要的網站,為什么?這是因為對於我們來說去理解、操作和記憶域名遠比使用IP地址來的更方便。但是對於計算機來說則不然,理解域名相對來說是件更復雜耗時的事情。簡單來理解,IP地址好比是你家的門牌號,域名好比“XXX家”這種籠統的稱呼,我們更喜歡去記后者,但對於快遞員來說,他並不認識你,因此記憶前者對他來說是件更有幫助的事。

為了解決上述的問題,DNS服務應運而生,它通過我們輸入的域名去查找對應的IP地址,或逆向從 IP 地址反查域名的服務。所謂的DNS服務,就是和HTTP協議一樣位於應用層的協議,提供域名到IP地址之間的解析服務

DNS結構

DNS 的核心系統是一個三層的樹狀、分布式服務,基本對應域名的結構:

(1)根域名服務器(Root DNS Server):管理頂級域名服務器,返回“com”“net”“cn”等頂級域名服務器的 IP 地址。

(2)頂級域名服務器(Top-level DNS Server):管理各自域名下的權威域名服務器,比如 com 頂級域名服務器可以返回 apple.com 域名服務器的 IP 地址。

(3)權威域名服務器(Authoritative DNS Server):管理自己域名下主機的 IP 地址,比如 apple.com 權威域名服務器可以返回 www.apple.com 的 IP 地址。

流程解析

1、在瀏覽器中輸入www.qq.com域名,操作系統會先檢查自己本地的hosts文件是否有這個網址映射關系,如果有,就先調用這個IP地址映射,完成域名解析。

2、如果hosts里沒有這個域名的映射,則查找本地DNS解析器緩存,是否有這個網址映射關系,如果有,直接返回,完成域名解析。

3、如果hosts與本地DNS解析器緩存都沒有相應的網址映射關系,首先會找TCP/IP參數中設置的首選DNS服務器,在此我們叫它本地DNS服務器,此服務器收到查詢時,如果要查詢的域名,包含在本地配置區域資源中,則返回解析結果給客戶機,完成域名解析,此解析具有權威性。

4、如果要查詢的域名,不由本地DNS服務器區域解析,但該服務器已緩存了此網址映射關系,則調用這個IP地址映射,完成域名解析,此解析不具有權威性。

5、如果本地DNS服務器本地區域文件與緩存解析都失效,則根據本地DNS服務器的設置(是否設置轉發器)進行查詢。

(1)如果未用轉發模式,本地DNS就把請求發至13台根DNS,根DNS服務器收到請求后會判斷這個域名(.com)是誰來授權管理,並會返回一個負責該頂級域名服務器的一個IP。本地DNS服務器收到IP信息后,將會聯系負責.com域的這台服務器。這台負責.com域的服務器收到請求后,如果自己無法解析,它就會找一個管理.com域的下一級DNS服務器地址(qq.com)給本地DNS服務器。當本地DNS服務器收到這個地址后,就會找qq.com域服務器,重復上面的動作,進行查詢,直至找到www.qq.com主機。

(2)如果用的是轉發模式,此DNS服務器就會把請求轉發至上一級DNS服務器,由上一級服務器進行解析,上一級服務器如果不能解析,或找根DNS或把轉請求轉至上上級,以此循環。不管是本地DNS服務器用是是轉發,還是根提示,最后都是把結果返回給本地DNS服務器,由此DNS服務器再返回給客戶機。

三.建立TCP/IP鏈接

  世界上幾乎所有的 HTTP 通信都是由 TCP/IP 承載的,TCP/IP 是全球計算機及網絡設備都在使用的一種常用的分組交換網絡分層。 HTTP 的連接實際上就是 TCP 連接以及其使用規則。 ——–《HTTP 權威指南》

  當瀏覽器獲取到服務器的 IP 地址后,瀏覽器會用一個隨機的端口(1024 < 端口 < 65535)向服務器的WEB程序的 80 端口發起 TCP 連接請求(注:HTTP 默認約定 80 端口,HTTPS 為 443 端口)。這個連接請求到達服務端后,…省略…,通過 TCP 三次握手,建立 TCP 的連接。 

  TCP 三次握手介紹請查看我的另一篇博文——TCP(三次握手四次揮手)

四.發送HTTP請求

HTTP和HTTPS的相關介紹和區別,HTTP的請求報文介紹,請看我的另一篇博文——HTTP和HTTPS

TCP 三次握手結束后確認數據傳輸可靠后,開始發送 HTTP 請求報文。 

五. 服務器處理請求

重定向

  服務器給瀏覽器響應一個301永久重定向響應。為什么服務器一定要重定向而不是直接發送用戶想看的網頁內容呢?其中一個原因跟搜索引擎排名有關。如果一個頁面有兩個地址,就像http://www.yy.com/和http://yy.com/,搜索引擎會認為它們是兩個網站,結果造成每個搜索鏈接都減少從而降低排名。而搜索引擎知道301永久重定向是什么意思,這樣就會把訪問帶www的和不帶www的地址歸到同一個網站排名下。還有就是用不同的地址會造成緩存友好性變差,當一個頁面有好幾個名字時,它可能會在緩存里出現好幾次。

1)301和302的區別。

  301和302狀態碼都表示重定向,就是說瀏覽器在拿到服務器返回的這個狀態碼后會自動跳轉到一個新的URL地址,這個地址可以從響應的Location首部中獲取(用戶看到的效果就是他輸入的地址A瞬間變成了另一個地址B)——這是它們的共同點。他們的不同在於301表示舊地址A的資源已經被永久地移除了(這個資源不可訪問了),搜索引擎在抓取新內容的同時也將舊的網址交換為重定向之后的網址;302表示舊地址A的資源還在(仍然可以訪問),這個重定向只是臨時地從舊地址A跳轉到地址B,搜索引擎會抓取新的內容而保存舊的網址。 SEO302好於301

2)重定向原因:

(1)網站調整(如改變網頁目錄結構);

(2)網頁被移到一個新地址;

(3)網頁擴展名改變(如應用需要把.php改成.Html或.shtml)。

  這種情況下,如果不做重定向,則用戶收藏夾或搜索引擎數據庫中舊地址只能讓訪問客戶得到一個404頁面錯誤信息,訪問流量白白喪失;再者某些注冊了多個域名的網站,也需要通過重定向讓訪問這些域名的用戶自動跳轉到主站點等。

服務器處理請求

經過前面的重重步驟,我們終於將我們的http請求發送到了服務器這里,其實前面的重定向已經是到達服務器了,那么,服務器是如何處理我們的請求的呢?

  后端從在固定的端口接收到TCP報文開始,它會對TCP連接進行處理,對HTTP協議進行解析,並按照報文格式進一步封裝成HTTP Request對象,供上層使用。一些大一點的網站會將你的請求到反向代理服務器中,因為當網站訪問量非常大,網站越來越慢,一台服務器已經不夠用了。於是將同一個應用部署在多台服務器上,將大量用戶的請求分配給多台機器處理。此時,客戶端不是直接通過HTTP協議訪問某網站應用服務器,而是先請求到Nginx,Nginx再請求應用服務器,然后將結果返回給客戶端,這里Nginx的作用是反向代理服務器。同時也帶來了一個好處,其中一台服務器萬一掛了,只要還有其他服務器正常運行,就不會影響用戶使用。

六.返回HTTP響應

當服務器收到我們的請求之后,他會生成一個響應,以響應報文的形式返回客戶端。

HTTP的響應報文介紹,請看我的另一篇博文——HTTP和HTTPS

七、瀏覽器渲染頁面並展現

當客戶端拿到響應文本經過層層解析,最終瀏覽器拿到HTML響應報文后,便開始渲染頁面

1.解析 HTML 標簽, 構建 DOM 樹

2.解析 CSS, 構建 CSSOM 樹

3.把 DOM 和 CSSOM 組合成 渲染樹 (render tree)

4.在渲染樹的基礎上進行布局, 計算每個節點的幾何結構

5.把每個節點繪制到屏幕上 (painting)

6.遵循以下的步驟

 八.斷開連接 

四次揮手介紹請查看我的另一篇博文——TCP(三次握手四次揮手)

總結

1.DNS 解析:將域名解析成 IP 地址

2.建立TCP 連接:TCP 三次握手

3.瀏覽器發送 HTTP 請求報文

4.服務器處理請求並返回 HTTP 響應報文

5.瀏覽器渲染頁面

6.斷開TCP連接:TCP 四次揮手


免責聲明!

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



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