總體來說分為以下幾個過程:
DNS 解析:將域名解析成 IP 地址
TCP 連接:TCP 三次握手
發(fā)送 HTTP 請求
服務(wù)器處理請求并返回 HTTP 報文
瀏覽器解析渲染頁面
斷開連接:TCP 四次揮手
URL(Uniform Resource Locator),統(tǒng)一資源定位符,用于定位互聯(lián)網(wǎng)上資源,俗稱網(wǎng)址。
比如 http://www.w3school.com.cn/html/index.asp,遵守以下的語法規(guī)則:
scheme://host.domain:port/path/filename
各部分解釋如下:
scheme - 定義因特網(wǎng)服務(wù)的類型。常見的協(xié)議有 http、https、ftp、file,其中最常見的類型是 http,而 https 則是進行加密的網(wǎng)絡(luò)傳輸。
host - 定義域主機(http 的默認主機是 www)
domain - 定義因特網(wǎng)域名,比如 w3school.com.cn
port - 定義主機上的端口號(http 的默認端口號是 80)
path - 定義服務(wù)器上的路徑(如果省略,則文檔必須位于網(wǎng)站的根目錄中)。
filename - 定義文檔/資源的名稱
在瀏覽器輸入網(wǎng)址后,首先要經(jīng)過域名解析,因為瀏覽器并不能直接通過域名找到對應(yīng)的服務(wù)器,而是要通過 IP 地址。大家這里或許會有個疑問----計算機既可以被賦予 IP 地址,也可以被賦予主機名和域名。比如 www.hackr.jp
。那怎么不一開始就賦予個 IP 地址?這樣就可以省去解析麻煩。我們先來了解下什么是 IP 地址
IP 地址是指互聯(lián)網(wǎng)協(xié)議地址,是 IP Address 的縮寫。IP 地址是 IP 協(xié)議提供的一種統(tǒng)一的地址格式,它為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機分配一個邏輯地址,以此來屏蔽物理地址的差異。IP 地址是一個 32 位的二進制數(shù),比如 127.0.0.1 為本機 IP。
域名就相當(dāng)于 IP 地址喬裝打扮的偽裝者,帶著一副面具。它的作用就是便于記憶和溝通的一組服務(wù)器的地址。用戶通常使用主機名或域名來訪問對方的計算機,而不是直接通過 IP 地址訪問。因為與 IP 地址的一組純數(shù)字相比,用字母配合數(shù)字的表示形式來指定計算機名更符合人類的記憶習(xí)慣。但要讓計算機去理解名稱,相對而言就變得困難了。因為計算機更擅長處理一長串?dāng)?shù)字。為了解決上述的問題,DNS 服務(wù)應(yīng)運而生。
DNS 協(xié)議提供通過域名查找 IP 地址,或逆向從 IP 地址反查域名的服務(wù)。DNS 是一個網(wǎng)絡(luò)服務(wù)器,我們的域名解析簡單來說就是在 DNS 上記錄一條信息記錄。
例如 baidu.com 220.114.23.56(服務(wù)器外網(wǎng)IP地址)80(服務(wù)器端口號)
瀏覽器緩存:瀏覽器會按照一定的頻率緩存 DNS 記錄。
操作系統(tǒng)緩存:如果瀏覽器緩存中找不到需要的 DNS 記錄,那就去操作系統(tǒng)中找。
路由緩存:路由器也有 DNS 緩存。
ISP 的 DNS 服務(wù)器:ISP 是互聯(lián)網(wǎng)服務(wù)提供商(Internet Service Provider)的簡稱,ISP 有專門的 DNS 服務(wù)器應(yīng)對 DNS 查詢請求。
根服務(wù)器:ISP 的 DNS 服務(wù)器還找不到的話,它就會向根服務(wù)器發(fā)出請求,進行遞歸查詢(DNS 服務(wù)器先問根域名服務(wù)器.com 域名服務(wù)器的 IP 地址,然后再問.baidu 域名服務(wù)器,依次類推)
瀏覽器通過向 DNS 服務(wù)器發(fā)送域名,DNS 服務(wù)器查詢到與域名相對應(yīng)的 IP 地址,然后返回給瀏覽器,瀏覽器再將 IP 地址打在協(xié)議上,同時請求參數(shù)也會在協(xié)議搭載,然后一并發(fā)送給對應(yīng)的服務(wù)器。接下來介紹向服務(wù)器發(fā)送 HTTP 請求階段,HTTP 請求分為三個部分:TCP 三次握手、http 請求響應(yīng)信息、關(guān)閉 TCP 連接。
在客戶端發(fā)送數(shù)據(jù)之前會發(fā)起 TCP 三次握手用以同步客戶端和服務(wù)端的序列號和確認號,并交換 TCP 窗口大小信息。
客戶端發(fā)送一個帶 SYN=1,Seq=X 的數(shù)據(jù)包到服務(wù)器端口(第一次握手,由瀏覽器發(fā)起,告訴服務(wù)器我要發(fā)送請求了)
服務(wù)器發(fā)回一個帶 SYN=1, ACK=X+1, Seq=Y 的響應(yīng)包以示傳達確認信息(第二次握手,由服務(wù)器發(fā)起,告訴瀏覽器我準備接受了,你趕緊發(fā)送吧)
客戶端再回傳一個帶 ACK=Y+1, Seq=Z 的數(shù)據(jù)包,代表“握手結(jié)束”(第三次握手,由瀏覽器發(fā)送,告訴服務(wù)器,我馬上就發(fā)了,準備接受吧)
謝希仁著《計算機網(wǎng)絡(luò)》中講“三次握手”的目的是“為了防止已失效的連接請求報文段突然又傳送到了服務(wù)端,因而產(chǎn)生錯誤”。
TCP 三次握手結(jié)束后,開始發(fā)送 HTTP 請求報文。
請求報文由請求行(request line)、請求頭(header)、請求體四個部分組成,如下圖所示:
請求方法包含 8 種:GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。
URL 即請求地址,由 <協(xié)議>://<主機>:<端口>/<路徑>?<參數(shù)>
協(xié)議版本即 http 版本號
POST /chapter17/user.html HTTP/1.1
以上代碼中“POST”代表請求方法,“/chapter17/user.html”表示 URL,“HTTP/1.1”代表協(xié)議和協(xié)議的版本?,F(xiàn)在比較流行的是 Http1.1 版本
請求頭部通知服務(wù)器有關(guān)于客戶端請求的信息。它包含許多有關(guān)的客戶端環(huán)境和請求正文的有用信息。其中比如:Host,表示主機名,虛擬主機;Connection,HTTP/1.1 增加的,使用 keepalive,即持久連接,一個連接可以發(fā)多個請求;User-Agent,請求發(fā)出者,兼容性以及定制化需求。
name=tom&password=1234&realName=tomson
上面代碼,承載著 name、password、realName 三個請求參數(shù)。
服務(wù)器是網(wǎng)絡(luò)環(huán)境中的高性能計算機,它偵聽網(wǎng)絡(luò)上的其他計算機(客戶機)提交的服務(wù)請求,并提供相應(yīng)的服務(wù),比如網(wǎng)頁服務(wù)、文件下載服務(wù)、郵件服務(wù)、視頻服務(wù)。而客戶端主要的功能是瀏覽網(wǎng)頁、看視頻、聽音樂等等,兩者截然不同。 每臺服務(wù)器上都會安裝處理請求的應(yīng)用——web server。常見的 web server 產(chǎn)品有 apache、nginx、IIS 或 Lighttpd 等。
web server 擔(dān)任管控的角色,對于不同用戶發(fā)送的請求,會結(jié)合配置文件,把不同請求委托給服務(wù)器上處理相應(yīng)請求的程序進行處理(例如 CGI 腳本,JSP 腳本,servlets,ASP 腳本,服務(wù)器端 JavaScript,或者一些其它的服務(wù)器端技術(shù)等),然后返回后臺程序處理產(chǎn)生的結(jié)果作為響應(yīng)。
后臺開發(fā)現(xiàn)在有很多框架,但大部分都還是按照 MVC 設(shè)計模式進行搭建的。
MVC 是一個設(shè)計模式,將應(yīng)用程序分成三個核心部件:模型(model)-- 視圖(view)--控制器(controller),它們各自處理自己的任務(wù),實現(xiàn)輸入、處理和輸出的分離。
1、視圖(view)
它是提供給用戶的操作界面,是程序的外殼。
2、模型(model)
模型主要負責(zé)數(shù)據(jù)交互。在 MVC 的三個部件中,模型擁有最多的處理任務(wù)。一個模型能為多個視圖提供數(shù)據(jù)。
3、控制器(controller)
它負責(zé)根據(jù)用戶從'視圖層'輸入的指令,選取'模型層'中的數(shù)據(jù),然后對其進行相應(yīng)的操作,產(chǎn)生最終結(jié)果。控制器屬于管理者角色,從視圖接收請求并決定調(diào)用哪個模型構(gòu)件去處理請求,然后再確定用哪個視圖來顯示模型處理返回的數(shù)據(jù)。
這三層是緊密聯(lián)系在一起的,但又是互相獨立的,每一層內(nèi)部的變化不影響其他層。每一層都對外提供接口(Interface),供上面一層調(diào)用。
至于這一階段發(fā)生什么?簡而言之,首先瀏覽器發(fā)送過來的請求先經(jīng)過控制器,控制器進行邏輯處理和請求分發(fā),接著會調(diào)用模型,這一階段模型會獲取 redis db 以及 MySQL 的數(shù)據(jù),獲取數(shù)據(jù)后將渲染好的頁面,響應(yīng)信息會以響應(yīng)報文的形式返回給客戶端,最后瀏覽器通過渲染引擎將網(wǎng)頁呈現(xiàn)在用戶面前。
響應(yīng)報文由響應(yīng)行(request line)、響應(yīng)頭部(header)、響應(yīng)主體三個部分組成。如下圖所示:
(1) 響應(yīng)行包含:協(xié)議版本,狀態(tài)碼,狀態(tài)碼描述
狀態(tài)碼規(guī)則如下:
1xx:指示信息--表示請求已接收,繼續(xù)處理。
2xx:成功--表示請求已被成功接收、理解、接受。
3xx:重定向--要完成請求必須進行更進一步的操作。
4xx:客戶端錯誤--請求有語法錯誤或請求無法實現(xiàn)。
5xx:服務(wù)器端錯誤--服務(wù)器未能實現(xiàn)合法的請求。
(2) 響應(yīng)頭部包含響應(yīng)報文的附加信息,由 名/值 對組成
(3) 響應(yīng)主體包含回車符、換行符和響應(yīng)返回數(shù)據(jù),并不是所有響應(yīng)報文都有響應(yīng)數(shù)據(jù)
瀏覽器拿到響應(yīng)文本 HTML 后,接下來介紹下瀏覽器渲染機制
瀏覽器解析渲染頁面分為一下五個步驟:
根據(jù) HTML 解析出 DOM 樹
根據(jù) CSS 解析生成 CSS 規(guī)則樹
結(jié)合 DOM 樹和 CSS 規(guī)則樹,生成渲染樹
根據(jù)渲染樹計算每一個節(jié)點的信息
根據(jù)計算好的信息繪制頁面
根據(jù) HTML 的內(nèi)容,將標簽按照結(jié)構(gòu)解析成為 DOM 樹,DOM 樹解析的過程是一個深度優(yōu)先遍歷。即先構(gòu)建當(dāng)前節(jié)點的所有子節(jié)點,再構(gòu)建下一個兄弟節(jié)點。
在讀取 HTML 文檔,構(gòu)建 DOM 樹的過程中,若遇到 script 標簽,則 DOM 樹的構(gòu)建會暫停,直至腳本執(zhí)行完畢。
解析 CSS 規(guī)則樹時 js 執(zhí)行將暫停,直至 CSS 規(guī)則樹就緒。
瀏覽器在 CSS 規(guī)則樹生成之前不會進行渲染。
DOM 樹和 CSS 規(guī)則樹全部準備好了以后,瀏覽器才會開始構(gòu)建渲染樹。
精簡 CSS 并可以加快 CSS 規(guī)則樹的構(gòu)建,從而加快頁面相應(yīng)速度。
布局:通過渲染樹中渲染對象的信息,計算出每一個渲染對象的位置和尺寸
回流:在布局完成后,發(fā)現(xiàn)了某個部分發(fā)生了變化影響了布局,那就需要倒回去重新渲染。
繪制階段,系統(tǒng)會遍歷呈現(xiàn)樹,并調(diào)用呈現(xiàn)器的“paint”方法,將呈現(xiàn)器的內(nèi)容顯示在屏幕上。
重繪:某個元素的背景顏色,文字顏色等,不影響元素周圍或內(nèi)部布局的屬性,將只會引起瀏覽器的重繪。
回流:某個元素的尺寸發(fā)生了變化,則需重新計算渲染樹,重新渲染。
當(dāng)數(shù)據(jù)傳送完畢,需要斷開 tcp 連接,此時發(fā)起 tcp 四次揮手。
發(fā)起方向被動方發(fā)送報文,F(xiàn)in、Ack、Seq,表示已經(jīng)沒有數(shù)據(jù)傳輸了。并進入 FIN_WAIT_1 狀態(tài)。(第一次揮手:由瀏覽器發(fā)起的,發(fā)送給服務(wù)器,我請求報文發(fā)送完了,你準備關(guān)閉吧)
被動方發(fā)送報文,Ack、Seq,表示同意關(guān)閉請求。此時主機發(fā)起方進入 FIN_WAIT_2 狀態(tài)。(第二次揮手:由服務(wù)器發(fā)起的,告訴瀏覽器,我請求報文接受完了,我準備關(guān)閉了,你也準備吧)
被動方向發(fā)起方發(fā)送報文段,F(xiàn)in、Ack、Seq,請求關(guān)閉連接。并進入 LAST_ACK 狀態(tài)。(第三次揮手:由服務(wù)器發(fā)起,告訴瀏覽器,我響應(yīng)報文發(fā)送完了,你準備關(guān)閉吧)
發(fā)起方向被動方發(fā)送報文段,Ack、Seq。然后進入等待 TIME_WAIT 狀態(tài)。被動方收到發(fā)起方的報文段以后關(guān)閉連接。發(fā)起方等待一定時間未收到回復(fù),則正常關(guān)閉。(第四次揮手:由瀏覽器發(fā)起,告訴服務(wù)器,我響應(yīng)報文接受完了,我準備關(guān)閉了,你也準備吧)
聯(lián)系客服