1、概要

　　從用戶在瀏覽器輸入域名開(kāi)始,，到web頁(yè)面加載完畢,，這是一個(gè)說(shuō)復(fù)雜不復(fù)雜，說(shuō)簡(jiǎn)單不簡(jiǎn)單的過(guò)程,，也是面試被經(jīng)常問(wèn)的問(wèn)題,。下文暫且把這個(gè)過(guò)程稱作網(wǎng)頁(yè)加載過(guò)程。

2,、分析

　　打開(kāi)一個(gè)網(wǎng)頁(yè)的過(guò)程中,，瀏覽器會(huì)因頁(yè)面上的css/js/image等靜態(tài)資源會(huì)多次發(fā)起連接請(qǐng)求，所以我們暫且把這個(gè)網(wǎng)頁(yè)加載過(guò)程分成兩部分：

1. html(jsp/php/aspx) 頁(yè)面加載(假設(shè)存在簡(jiǎn)單的Nginx負(fù)載均衡)

2. css/js/image等 網(wǎng)頁(yè)靜態(tài)資源加載(假設(shè)使用CDN)

     2.1 頁(yè)面加載

　　先上一張圖,，直觀明了地讓大家了解下基本流程,，然后我們?cè)僦鹨环治觥?/span>

　　2.1.1 DNS解析

　　什么是DNS解析？當(dāng)用戶輸入一個(gè)網(wǎng)址并按下回車(chē)鍵的時(shí)候,，瀏覽器得到了一個(gè)域名,。而在實(shí)際通信過(guò)程中，我們需要的是一個(gè)IP地址,。因此我們需要先把域名轉(zhuǎn)換成相應(yīng)的IP地址,，這個(gè)過(guò)程稱作DNS解析。

      1) 瀏覽器首先搜索瀏覽器自身緩存的DNS記錄,。

　　或許很多人不知道,，瀏覽器自身也帶有一層DNS緩存。Chrome 緩存1000條DNS解析結(jié)果,，緩存時(shí)間大概在一分鐘左右,。

　?。–hrome瀏覽器通過(guò)輸入：chrome://net-internals/#dns 打開(kāi)DNS緩存頁(yè)面）

　　2) 如果瀏覽器緩存中沒(méi)有找到需要的記錄或記錄已經(jīng)過(guò)期，則搜索hosts文件和操作系統(tǒng)緩存,。

　　在Windows操作系統(tǒng)中,，可以通過(guò) ipconfig /displaydns 命令查看本機(jī)當(dāng)前的緩存。

　　通過(guò)hosts文件,，你可以手動(dòng)指定一個(gè)域名和其對(duì)應(yīng)的IP解析結(jié)果,，并且該結(jié)果一旦被使用，同樣會(huì)被緩存到操作系統(tǒng)緩存中,。

　　Windows系統(tǒng)的hosts文件在%systemroot%\system32\drivers\etc下,，linux系統(tǒng)的hosts文件在/etc/hosts下。

　　3) 如果在hosts文件和操作系統(tǒng)緩存中沒(méi)有找到需要的記錄或記錄已經(jīng)過(guò)期,，則向域名解析服務(wù)器發(fā)送解析請(qǐng)求,。

　　其實(shí)第一臺(tái)被訪問(wèn)的域名解析服務(wù)器就是我們平時(shí)在設(shè)置中填寫(xiě)的DNS服務(wù)器一項(xiàng)，當(dāng)操作系統(tǒng)緩存中也沒(méi)有命中的時(shí)候,，系統(tǒng)會(huì)向DNS服務(wù)器正式發(fā)出解析請(qǐng)求,。這里是真正意義上開(kāi)始解析一個(gè)未知的域名。

　　一般一臺(tái)域名解析服務(wù)器會(huì)被地理位置臨近的大量用戶使用（特別是ISP的DNS）,，一般常見(jiàn)的網(wǎng)站域名解析都能在這里命中,。

　　4) 如果域名解析服務(wù)器也沒(méi)有該域名的記錄，則開(kāi)始遞歸+迭代解析,。

　　這里我們舉個(gè)例子,，如果我們要解析的是mail.google.com。

　　首先我們的域名解析服務(wù)器會(huì)向根域服務(wù)器（全球只有13臺(tái)）發(fā)出請(qǐng)求,。顯然,，僅憑13臺(tái)服務(wù)器不可能把全球所有IP都記錄下來(lái)。所以根域服務(wù)器記錄的是com域服務(wù)器的IP,、cn域服務(wù)器的IP,、org域服務(wù)器的IP……。如果我們要查找.com結(jié)尾的域名,，那么我們可以到com域服務(wù)器去進(jìn)一步解析,。所以其實(shí)這部分的域名解析過(guò)程是一個(gè)樹(shù)形的搜索過(guò)程。

       根域服務(wù)器告訴我們com域服務(wù)器的IP,。

　　接著我們的域名解析服務(wù)器會(huì)向com域服務(wù)器發(fā)出請(qǐng)求,。根域服務(wù)器并沒(méi)有mail.google.com的IP，但是卻有g(shù)oogle.com域服務(wù)器的IP,。

　　接著我們的域名解析服務(wù)器會(huì)向google.com域服務(wù)器發(fā)出請(qǐng)求,。...

　　如此重復(fù)，直到獲得mail.google.com的IP地址。

　　為什么是遞歸：?jiǎn)栴}由一開(kāi)始的本機(jī)要解析mail.google.com變成域名解析服務(wù)器要解析mail.google.com,，這是遞歸,。

　　為什么是迭代：?jiǎn)栴}由向根域服務(wù)器發(fā)出請(qǐng)求變成向com域服務(wù)器發(fā)出請(qǐng)求再變成向google.com域發(fā)出請(qǐng)求，這是迭代,。

　　5) 獲取域名對(duì)應(yīng)的IP后,，一步步向上返回，直到返回給瀏覽器,。

　　2.1.2 發(fā)起TCP請(qǐng)求

　　瀏覽器會(huì)選擇一個(gè)大于1024的本機(jī)端口向目標(biāo)IP地址的80端口發(fā)起TCP連接請(qǐng)求,。經(jīng)過(guò)標(biāo)準(zhǔn)的TCP握手流程，建立TCP連接,。

　　關(guān)于TCP協(xié)議的細(xì)節(jié),，這里就不再闡述。這里只是簡(jiǎn)單地用一張圖說(shuō)明一下TCP的握手過(guò)程,。如果不了解TCP,，可以選擇跳過(guò)此段，不影響本文其他部分的瀏覽,。

　　2.1.3 發(fā)起HTTP請(qǐng)求

　　其本質(zhì)是在建立起的TCP連接中,，按照HTTP協(xié)議標(biāo)準(zhǔn)發(fā)送一個(gè)索要網(wǎng)頁(yè)的請(qǐng)求。

　　2.1.4 負(fù)載均衡

　　什么是負(fù)載均衡,？當(dāng)一臺(tái)服務(wù)器無(wú)法支持大量的用戶訪問(wèn)時(shí),，將用戶分?jǐn)偟絻蓚€(gè)或多個(gè)服務(wù)器上的方法叫負(fù)載均衡。

　　什么是Nginx,？Nginx是一款面向性能設(shè)計(jì)的HTTP服務(wù)器，相較于Apache,、lighttpd具有占有內(nèi)存少,，穩(wěn)定性高等優(yōu)勢(shì)。

　　負(fù)載均衡的方法很多,，Nginx負(fù)載均衡,、LVS-NAT、LVS-DR等,。這里,，我們以簡(jiǎn)單的Nginx負(fù)載均衡為例。關(guān)于負(fù)載均衡的多種方法詳情大家可以Google一下,。

　　Nginx有4種類(lèi)型的模塊：core,、handlers、filters,、load-balancers,。

　　我們這里討論其中的2種，分別是負(fù)責(zé)負(fù)載均衡的模塊load-balancers和負(fù)責(zé)執(zhí)行一系列過(guò)濾操作的filters模塊,。

　　1) 一般,，如果我們的平臺(tái)配備了負(fù)載均衡的話,，前一步DNS解析獲得的IP地址應(yīng)該是我們Nginx負(fù)載均衡服務(wù)器的IP地址。所以,，我們的瀏覽器將我們的網(wǎng)頁(yè)請(qǐng)求發(fā)送到了Nginx負(fù)載均衡服務(wù)器上,。

　　2) Nginx根據(jù)我們?cè)O(shè)定的分配算法和規(guī)則，選擇一臺(tái)后端的真實(shí)Web服務(wù)器,，與之建立TCP連接,、并轉(zhuǎn)發(fā)我們?yōu)g覽器發(fā)出去的網(wǎng)頁(yè)請(qǐng)求。

　　　　Nginx默認(rèn)支持 RR輪轉(zhuǎn)法 和 ip_hash法 這2種分配算法,。

　　　　前者會(huì)從頭到尾一個(gè)個(gè)輪詢所有Web服務(wù)器,，而后者則對(duì)源IP使用hash函數(shù)確定應(yīng)該轉(zhuǎn)發(fā)到哪個(gè)Web服務(wù)器上，也能保證同一個(gè)IP的請(qǐng)求能發(fā)送到同一個(gè)Web服務(wù)器上實(shí)現(xiàn)會(huì)話粘連,。

　　　　也有其他擴(kuò)展分配算法,，如：

　　　　fair：這種算法會(huì)選擇相應(yīng)時(shí)間最短的Web服務(wù)器

　　　　url_hash：這種算法會(huì)使得相同的url發(fā)送到同一個(gè)Web服務(wù)器

　　3) Web服務(wù)器收到請(qǐng)求，產(chǎn)生響應(yīng),，并將網(wǎng)頁(yè)發(fā)送給Nginx負(fù)載均衡服務(wù)器,。

　　4) Nginx負(fù)載均衡服務(wù)器將網(wǎng)頁(yè)傳遞給filters鏈處理，之后發(fā)回給我們的瀏覽器,。

　　而Filter的功能可以理解成先把前一步生成的結(jié)果處理一遍,，再返回給瀏覽器。比如可以將前面沒(méi)有壓縮的網(wǎng)頁(yè)用gzip壓縮后再返回給瀏覽器,。

　　2.1.5 瀏覽器渲染

　　1) 瀏覽器根據(jù)頁(yè)面內(nèi)容,，生成DOM Tree。根據(jù)CSS內(nèi)容,，生成CSS Rule Tree(規(guī)則樹(shù)),。調(diào)用JS執(zhí)行引擎執(zhí)行JS代碼。

　　2) 根據(jù)DOM Tree和CSS Rule Tree生成Render Tree(呈現(xiàn)樹(shù))

　　3) 根據(jù)Render Tree渲染網(wǎng)頁(yè)

　　　　但是在瀏覽器解析頁(yè)面內(nèi)容的時(shí)候,，會(huì)發(fā)現(xiàn)頁(yè)面引用了其他未加載的image,、css文件、js文件等靜態(tài)內(nèi)容,，因此開(kāi)始了第二部分,。

　　2.2 網(wǎng)頁(yè)靜態(tài)資源加載

　　以阿里巴巴的淘寶網(wǎng)首頁(yè)的logo為例，其url地址為 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg

　　我們清楚地看到了url中有cdn字樣,。　

       CDN基本思路：

盡可能避開(kāi)互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié),，使內(nèi)容傳輸?shù)母臁⒏€(wěn)定,。通過(guò)在網(wǎng)絡(luò)各處放置節(jié)點(diǎn)服務(wù)器所構(gòu)成的在現(xiàn)有的互聯(lián)網(wǎng)基礎(chǔ)之上的一層智能虛擬網(wǎng)絡(luò),，CDN系統(tǒng)能夠?qū)崟r(shí)地根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的連接、負(fù)載狀況以及到用戶的距離和響應(yīng)時(shí)間等綜合信息將用戶的請(qǐng)求重新導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上。

目的：

解決因分布,、帶寬,、服務(wù)器性能帶來(lái)的訪問(wèn)延遲問(wèn)題，適用于站點(diǎn)加速,、點(diǎn)播,、直播等場(chǎng)景。使用戶可就近取得所需內(nèi)容,，解決 Internet網(wǎng)絡(luò)擁擠的狀況,，提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度和成功率。

控制時(shí)延無(wú)疑是現(xiàn)代信息科技的重要指標(biāo),，CDN的意圖就是盡可能的減少資源在轉(zhuǎn)發(fā),、傳輸、鏈路抖動(dòng)等情況下順利保障信息的連貫性,。

CDN就是扮演者護(hù)航者和加速者的角色,，更快準(zhǔn)狠的觸發(fā)信息和觸達(dá)每一個(gè)用戶，帶來(lái)更為極致的使用體驗(yàn),。

  　　接下來(lái)的流程就是瀏覽器根據(jù)url加載該url下的圖片內(nèi)容,。本質(zhì)上是瀏覽器重新開(kāi)始第一部分的流程，所以這里不再重復(fù)闡述,。區(qū)別只是負(fù)責(zé)均衡服務(wù)器后端的服務(wù)器不再是應(yīng)用服務(wù)器,，而是提供靜態(tài)資源的服務(wù)器。