從www.web.com輸入到頁面展現到底發生什麼?

打開瀏覽器從輸入網址www.web.com到網頁呈現,到底經歷怎麼樣的一個過程?

總結一下上圖的過程就是:瀏覽器通過向 DNS 服務器發送域名,DNS 服務器查詢到與域名相對應的 IP 地址,然後返回給瀏覽器,瀏覽器再將 IP 地址打在協議上,同時請求參數也會在協議搭載,然後一併發送給對應的服務器。接下來介紹向服務器發送 HTTP 請求階段,HTTP 請求分爲三個部分:TCP 三次握手、http 請求響應信息、關閉 TCP 連接。

  • DNS 解析:將域名解析成 IP 地址
  • TCP 連接:TCP 三次握手
  • 發送 HTTP 請求
  • 服務器處理請求並返回 HTTP 報文
  • 瀏覽器解析渲染頁面
  • 斷開連接:TCP 四次揮手

URL是什麼?

URL(Uniform Resource Locator),統一資源定位符,用於定位互聯網上資源,俗稱網址。

比如 http://www.web.com.cn/main/index.html,遵守以下的語法規則:

scheme://host.domain:port/path/filename

分別解釋就是:

scheme - 定義因特網服務的類型。常見的協議有 http、https、ftp、file,其中最常見的類型是 http,而 https 則是進行加密的網絡傳輸。
host - 定義域主機(http 的默認主機是 www)。
domain - 定義因特網域名,比如 web.com。
port - 定義主機上的端口號(http 的默認端口號是 80)。
path - 定義服務器上的路徑(如果省略,則文檔必須位於網站的根目錄中)。
filename - 定義文檔/資源的名稱。

域名解析(DNS)

在瀏覽器輸入網址後,首先要經過域名解析,因爲瀏覽器並不能直接通過域名找到對應的服務器,而是要通過 IP 地址。大家這裏或許會有個疑問,爲什麼不一開始就賦予個 IP 地址?這樣就可以省去解析麻煩。因爲與 IP 地址的一組純數字相比,用字母配合數字的表示形式來指定計算機名更符合人類的記憶習慣。但要讓計算機去理解名稱,相對而言就變得困難了。因爲計算機更擅長處理一長串數字。爲了解決上述的問題,DNS 服務應運而生。

1.IP 地址

IP地址是指互聯網協議地址(英語:Internet Protocol Address,又譯爲網際協議地址),是IP Address的縮寫。IP地址是IP協議提供的一種統一的地址格式,它爲互聯網上的每一個網絡和每一臺主機分配一個邏輯地址,以此來屏蔽物理地址的差異。IP 地址是一個 32 位的二進制數,比如 127.0.0.1 爲本機 IP,目前還有些ip代理軟件,但大部分都收費。

2.什麼是域名解析

域名系統英文Domain Name System,縮寫DNS)是互聯網的一項服務。它作爲將域名IP地址相互映射的一個分佈式數據庫,能夠使人更方便地訪問互聯網。DNS使用TCPUDP端口53。當前,對於每一級域名長度的限制是63個字符,域名總長度則不能超過253個字符。DNS 協議提供通過域名查找 IP 地址,或逆向從 IP 地址反查域名的服務。DNS 是一個網絡服務器,我們的域名解析簡單來說就是在 DNS 上記錄一條信息記錄(分佈式數據庫。DNS最早於1983年由保羅·莫卡派喬斯(Paul Mockapetris)發明;原始的技術規範在882號因特網標準草案(RFC 882)中發佈,1987年發佈的第1034和1035號草案修正了DNS技術規範,早期的域名必須以英文句號“.”結尾,例如,當用戶訪問 www.web.com 的HTTP服務時必須在地址欄中輸入:http://www.web.com.,這樣DNS才能夠進行域名解析。如今DNS服務器已經可以自動補上結尾的句號。

3. 瀏覽器如何通過域名去查詢 URL 對應的 IP 呢

  • 瀏覽器緩存:瀏覽器會按照一定的頻率緩存 DNS 記錄。

  • 操作系統緩存:如果瀏覽器緩存中找不到需要的 DNS 記錄,那就去操作系統中找。

  • 路由緩存:路由器也有 DNS 緩存。

  • ISP (Internet Service Provider),互聯網服務提供商,即向廣大用戶綜合提供互聯網接入業務、信息業務和增值業務的電信運營商的 DNS 服務器:ISP 有專門的 DNS 服務器應對 DNS 查詢請求。

  • 根服務器:ISP 的 DNS 服務器還找不到的話,它就會向根服務器發出請求,進行遞歸查詢(DNS 服務器先問根域名服務器.com 域名服務器的 IP 地址,然後再問.baidu 域名服務器,依次類推)。

 

1.TCP 三次握手

“三次握手”的目的是“爲了防止已失效的連接請求報文段突然又傳送到了服務端,因而產生錯誤”。

三次握手(three times handshake;three-way handshake)所謂的“三次握手”即對每次發送的數據量是怎樣跟蹤進行協商使數據段的發送和接收同步,根據所接收到的數據量而確定的數據確認數及數據發送、接收完畢後何時撤消聯繫,並建立虛連接。爲了提供可靠的傳送,TCP在發送新的數據之前,以特定的順序將數據包的序號,並需要這些包傳送給目標機之後的確認消息。TCP總是用來發送大批量的數據。當應用程序在收到數據後要做出確認時也要用到TCP。

第一次

第一次握手:建立連接時,客戶端發送syn包(syn=j)到服務器,並進入SYN_SENT狀態,等待服務器確認(第一次握手,由瀏覽器發起,告訴服務器我要發送請求了);SYN:同步序列編號(Synchronize Sequence Numbers)。

第二次

第二次握手服務器收到syn包(第二次握手,由服務器發起,告訴瀏覽器我準備接受了,你趕緊發送吧),必須確認客戶的SYN(ack=j+1),同時自己也發送一個SYN包(syn=k),即SYN+ACK包,此時服務器進入SYN_RECV狀態;

第三次

第三次握手:客戶端收到服務器的SYN+ACK包(第三次握手,由瀏覽器發送,告訴服務器,我馬上就發了,準備接受吧),向服務器發送確認包ACK(ack=k+1),此包發送完畢,客戶端和服務器進入ESTABLISHED(TCP連接成功)狀態,完成三次握手。

完成三次握手,客戶端與服務器開始傳送數據,在上述過程中,還有一些重要的概念:

2.發送 HTTP 請求

TCP 三次握手結束後,開始發送 HTTP 請求報文。

一個HTTP請求報文由請求行(request line)、請求頭部(header)、空行和請求數據4個部分組成,上圖給出了請求報文的一般格式。

HTTP報文是面向文本的,報文中的每一個字段都是一些ASCII碼串,各個字段的長度是不確定的。HTTP有兩類報文:請求報文響應報文

請求行(request-line)

由請求方法字段、URL字段和HTTP協議版本字段3個字段組成,它們用空格分隔。

  • 請求方法包含 8 種:GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT。

  • URL 即請求地址,由 <協議>://<主機>:<端口>/<路徑>?<參數 組成

  • 協議版本即 http 版本號

例如,GET /index.html HTTP/1.1。

以上代碼中“GET”代表請求方法,“ /index.html ”表示 URL,“HTTP/1.1”代表協議和協議的版本。現在比較流行的是 Http1.1 版本

② 請求頭部(headers)

由關鍵字/值對組成,每行一對,關鍵字和值用英文冒號“:”分隔。請求頭部通知服務器有關於客戶端請求的信息它包含許多有關的客戶端環境和請求正文的有用信息。典型的請求頭附加信息有:

User-Agent:瀏覽器類型,如果Servlet返回的內容與瀏覽器類型有關則該值非常有用。

Accept:客戶端可識別的內容類型列表(瀏覽器可接受的MIME類型)。

Host:請求的主機名,允許多個域名同處一個IP地址,即虛擬主機。

Cookie:這是最重要的請求頭信息之一。

Connection:表示是否需要持久連接。如果Servlet看到這裏的值爲“Keep-Alive”,或者看到請求使用的是HTTP 1.1(HTTP 1.1默認進行持久連接),它就可以利用持久連接的優點,當頁面包含多個元素時(例如Applet,圖片),顯著地減少下載所需要的時間。要實現這一點,Servlet需要在應答中發送一個Content-Length頭,最簡單的實現方法是:先把內容寫入ByteArrayOutputStream,然後在正式寫出內容之前計算它的大小。

③ 空行(blank line)

最後一個請求頭之後是一個空行,發送回車符和換行符,它的作用是通過一個空行,告訴服務器請求頭部到此爲止,後面不再有請求頭。

④ 請求體(request-body)

可以承載多個請求參數的數據,包含回車符、換行符和請求數據,並不是所有請求都具有請求數據。

name=tom&password=1234&realName=tomson

上面代碼,承載着 name、password、realName 三個請求參數。

稍微完整的HTTP請求報文:

3.服務器處理請求並返回 HTTP 報文

① 服務器

服務器是網絡環境中的高性能計算機(處理器硬盤內存系統總線等,和通用的計算機架構類似),它偵聽網絡上的其他計算機(客戶機)提交的服務請求,並提供相應的服務,比如網頁服務、文件下載服務、郵件服務、視頻服務。但是由於需要提供高可靠的服務,因此在處理能力、穩定性、可靠性、安全性、可擴展性、可管理性等方面要求較高。

在網絡環境下,根據服務器提供的服務類型不同,分爲文件服務器、數據庫服務器、應用程序服務器、WEB服務器等。

而客戶端主要的功能是瀏覽網頁、看視頻、聽音樂等等,兩者截然不同。 每臺服務器上都會安裝處理請求的應用——web server。

常見的 web server 產品有 apache、nginx、IIS 或 Lighttpd 等。

web server 擔任管控的角色,對於不同用戶發送的請求,會結合配置文件,把不同請求委託給服務器上處理相應請求的程序進行處理(例如 CGI 腳本,JSP 腳本,servlets,ASP 腳本,服務器端 JavaScript,或者一些其它的服務器端技術等),然後返回後臺程序處理產生的結果作爲響應。

②MVC 過程

設計創建 Web 應用程序的模式,Web 應用開發現在有很多框架,但大部分都還是按照 MVC 設計模式進行搭建的。

MVC 是一個設計模式,將應用程序分成三個核心部件:模型(model)-- 視圖(view)--控制器(controller),它們各自處理自己的任務,實現輸入、處理和輸出的分離。

1、視圖(view)

是應用程序中處理數據顯示的部分,通常視圖是依據模型數據創建的。

2、模型(model)

是應用程序中用於處理應用程序數據邏輯的部分,通常模型對象負責在數據庫中存取數據。

3、控制器(controller)

它負責根據用戶從"視圖層"輸入的指令,選取"模型層"中的數據,然後對其進行相應的操作,產生最終結果。控制器屬於管理者角色,從視圖接收請求並決定調用哪個模型構件去處理請求,然後再確定用哪個視圖來顯示模型處理返回的數據。
這三層是緊密聯繫在一起的,但又是互相獨立的,每一層內部的變化不影響其他層。每一層都對外提供接口(Interface),供上面一層調用。
至於這一階段發生什麼?簡而言之,首先瀏覽器發送過來的請求先經過控制器,控制器進行邏輯處理和請求分發,接着會調用模型,這一階段模型會獲取 redis db 以及 MySQL 的數據,獲取數據後將渲染好的頁面,響應信息會以響應報文的形式返回給客戶端,最後瀏覽器通過渲染引擎將網頁呈現在用戶面前。

③http 響應報文

 

響應報文由狀態行、響應頭部、數據主體(響應主體)三個部分組成。

(1) 響應行包含:協議版本,狀態碼,狀態碼描述。

  • 1xx:指示信息--表示請求已接收,繼續處理。
  • 2xx:成功--表示請求已被成功接收、理解、接受。
  • 3xx:重定向--要完成請求必須進行更進一步的操作。
  • 4xx:客戶端錯誤--請求有語法錯誤或請求無法實現。
  • 5xx:服務器端錯誤--服務器未能實現合法的請求。

常見狀態代碼、狀態描述的說明如下。

  • 200 OK:客戶端請求成功。
  • 400 Bad Request:客戶端請求有語法錯誤,不能被服務器所理解。
  • 401 Unauthorized:請求未經授權,這個狀態代碼必須和WWW-Authenticate報頭域一起使用。
  • 403 Forbidden:服務器收到請求,但是拒絕提供服務。
  • 404 Not Found:請求資源不存在,舉個例子:輸入了錯誤的URL。
  • 500 Internal Server Error:服務器發生不可預期的錯誤。
  • 503 Server Unavailable:服務器當前不能處理客戶端的請求,一段時間後可能恢復正常,舉個例子:HTTP/1.1 200 OK(CRLF)。

(2) 響應頭部包含響應報文的附加信息,由 名/值 對組成。

(3) 響應主體包含回車符、換行符和響應返回數據,並不是所有響應報文都有響應數據。

這是一個實際的HTTP響應報文:

4.瀏覽器解析傳回的數據渲染頁面

瀏覽器解析渲染頁面分爲一下五個步驟:

根據 HTML 解析 DOM 樹

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

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

根據 CSS 解析生成 CSS 規則樹

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

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

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

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

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

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

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

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

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

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

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

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

5.斷開tcp 連接

當數據傳送完畢,需要斷開 tcp 連接,此時發起 tcp 四次揮手

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

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

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

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

  • TCP採用四次揮手關閉連接如圖所示爲什麼建立連接協議三次握手,而關閉連接卻是四次握手呢?

 

tcp四次揮手,由於TCP連接是全雙工的,因此每個方向都必須單獨進行關閉。

服務端的LISTEN狀態下的SOCKET當收到SYN報文的建連請求後,它可以把ACK和SYN(ACK起應答作用,而SYN起同步作用)放在一個報文裏來發送。但關閉連接時,當收到對方的FIN報文通知時,它僅僅表示對方沒有數據發送給你了;但未必你所有的數據都全部發送給對方了,所以你可以未必會馬上會關閉SOCKET,也即你可能還需要發送一些數據給對方之後,再發送FIN報文給對方來表示你同意現在可以關閉連接了,所以它這裏的ACK報文和FIN報文多數情況下都是分開發送的。

tcp 四次揮手後,至此從URL輸入到頁面展現整個過程執行完畢。

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