1望拖、概要
從用戶在瀏覽器輸入域名開始，到web頁面加載完畢挫鸽，這是一個說復雜不復雜说敏，說簡單不簡單的過程，下文暫且把這個過程稱作網(wǎng)頁加載過程丢郊。下面我將依靠自己的經(jīng)驗盔沫，總結(jié)一下整個過程。如有錯漏枫匾，歡迎指正架诞。
閱讀本文需要讀者已有一定的計算機知識，了解TCP干茉、DNS等谴忧。
2、分析
眾所周知角虫，打開一個網(wǎng)頁的過程中沾谓，瀏覽器會因頁面上的css/js/image等靜態(tài)資源會多次發(fā)起連接請求，所以我們暫且把這個網(wǎng)頁加載過程分成兩部分：
- html(jsp/php/aspx) 頁面加載(假設(shè)存在簡單的Nginx負載均衡)
- css/js/image等 網(wǎng)頁靜態(tài)資源加載(假設(shè)使用CDN)
2.1 頁面加載
先上一張圖戳鹅，直觀明了地讓大家了解下基本流程均驶，然后我們再逐一分析。
2.1.1 DNS解析
什么是DNS解析枫虏？當用戶輸入一個網(wǎng)址并按下回車鍵的時候妇穴，瀏覽器得到了一個域名。而在實際通信過程中隶债，我們需要的是一個IP地址腾它。因此我們需要先把域名轉(zhuǎn)換成相應的IP地址，這個過程稱作DNS解析燃异。
1) 瀏覽器首先搜索瀏覽器自身緩存的DNS記錄携狭。
或許很多人不知道，瀏覽器自身也帶有一層DNS緩存回俐。Chrome 緩存1000條DNS解析結(jié)果逛腿，緩存時間大概在一分鐘左右。
（Chrome瀏覽器通過輸入：chrome://net-internals/#dns 打開DNS緩存頁面）
2) 如果瀏覽器緩存中沒有找到需要的記錄或記錄已經(jīng)過期仅颇，則搜索hosts文件和操作系統(tǒng)緩存单默。
在Windows操作系統(tǒng)中，可以通過 ipconfig /displaydns 命令查看本機當前的緩存忘瓦。
通過hosts文件，你可以手動指定一個域名和其對應的IP解析結(jié)果耕皮，并且該結(jié)果一旦被使用境蜕，同樣會被緩存到操作系統(tǒng)緩存中。
Windows系統(tǒng)的hosts文件在%systemroot%\system32\drivers\etc下凌停，linux系統(tǒng)的hosts文件在/etc/hosts下粱年。
3) 如果在hosts文件和操作系統(tǒng)緩存中沒有找到需要的記錄或記錄已經(jīng)過期，則向域名解析服務(wù)器發(fā)送解析請求罚拟。
其實第一臺被訪問的域名解析服務(wù)器就是我們平時在設(shè)置中填寫的DNS服務(wù)器一項台诗，當操作系統(tǒng)緩存中也沒有命中的時候，系統(tǒng)會向DNS服務(wù)器正式發(fā)出解析請求赐俗。這里是真正意義上開始解析一個未知的域名拉队。
一般一臺域名解析服務(wù)器會被地理位置臨近的大量用戶使用（特別是ISP的DNS），一般常見的網(wǎng)站域名解析都能在這里命中阻逮。
4) 如果域名解析服務(wù)器也沒有該域名的記錄粱快，則開始遞歸+迭代解析。
這里我們舉個例子叔扼，如果我們要解析的是mail.google.com皆尔。
首先我們的域名解析服務(wù)器會向根域服務(wù)器（全球只有13臺）發(fā)出請求。顯然币励，僅憑13臺服務(wù)器不可能把全球所有IP都記錄下來慷蠕。所以根域服務(wù)器記錄的是com域服務(wù)器的IP、cn域服務(wù)器的IP食呻、org域服務(wù)器的IP……流炕。如果我們要查找.com結(jié)尾的域名，那么我們可以到com域服務(wù)器去進一步解析仅胞。所以其實這部分的域名解析過程是一個樹形的搜索過程每辟。
根域服務(wù)器告訴我們**com域服務(wù)器**的IP。
接著我們的域名解析服務(wù)器會向com域服務(wù)器發(fā)出請求干旧。根域服務(wù)器并沒有mail.google.com的IP渠欺，但是卻有google.com域服務(wù)器的IP。
接著我們的域名解析服務(wù)器會向google.com域服務(wù)器發(fā)出請求椎眯。...
如此重復挠将，直到獲得mail.google.com的IP地址胳岂。
為什么是遞歸：問題由一開始的本機要解析mail.google.com變成域名解析服務(wù)器要解析mail.google.com，這是遞歸舔稀。
為什么是迭代：問題由向根域服務(wù)器發(fā)出請求變成向com域服務(wù)器發(fā)出請求再變成向google.com域發(fā)出請求乳丰，這是迭代。
5) 獲取域名對應的IP后内贮，一步步向上返回产园，直到返回給瀏覽器。
2.1.2 發(fā)起TCP請求
瀏覽器會選擇一個大于1024的本機端口向目標IP地址的80端口發(fā)起TCP連接請求夜郁。經(jīng)過標準的TCP握手流程什燕，建立TCP連接。
關(guān)于TCP協(xié)議的細節(jié)竞端，這里就不再闡述屎即。這里只是簡單地用一張圖說明一下TCP的握手過程。如果不了解TCP婶熬，可以選擇跳過此段剑勾，不影響本文其他部分的瀏覽。
2.1.3 發(fā)起HTTP請求
其本質(zhì)是在建立起的TCP連接中赵颅，按照HTTP協(xié)議標準發(fā)送一個索要網(wǎng)頁的請求虽另。
2.1.4 負載均衡
什么是負載均衡？當一臺服務(wù)器無法支持大量的用戶訪問時饺谬，將用戶分攤到兩個或多個服務(wù)器上的方法叫負載均衡捂刺。
什么是Nginx？Nginx是一款面向性能設(shè)計的HTTP服務(wù)器募寨，相較于Apache族展、lighttpd具有占有內(nèi)存少，穩(wěn)定性高等優(yōu)勢拔鹰。
負載均衡的方法很多仪缸，Nginx負載均衡、LVS-NAT列肢、LVS-DR等恰画。這里，我們以簡單的Nginx負載均衡為例瓷马。關(guān)于負載均衡的多種方法詳情大家可以Google一下拴还。
Nginx有4種類型的模塊：core、handlers欧聘、filters片林、load-balancers。
我們這里討論其中的2種，分別是負責負載均衡的模塊load-balancers和負責執(zhí)行一系列過濾操作的filters模塊费封。
1) 一般焕妙，如果我們的平臺配備了負載均衡的話，前一步DNS解析獲得的IP地址應該是我們Nginx負載均衡服務(wù)器的IP地址孝偎。所以访敌，我們的瀏覽器將我們的網(wǎng)頁請求發(fā)送到了Nginx負載均衡服務(wù)器上凉敲。
2) Nginx根據(jù)我們設(shè)定的分配算法和規(guī)則衣盾，選擇一臺后端的真實Web服務(wù)器，與之建立TCP連接爷抓、并轉(zhuǎn)發(fā)我們?yōu)g覽器發(fā)出去的網(wǎng)頁請求势决。
Nginx默認支持 RR輪轉(zhuǎn)法 和 ip_hash法 這2種分配算法。
前者會從頭到尾一個個輪詢所有Web服務(wù)器蓝撇，而后者則對源IP使用hash函數(shù)確定應該轉(zhuǎn)發(fā)到哪個Web服務(wù)器上果复，也能保證同一個IP的請求能發(fā)送到同一個Web服務(wù)器上實現(xiàn)會話粘連。
也有其他擴展分配算法渤昌，如：
fair：這種算法會選擇相應時間最短的Web服務(wù)器
url_hash：這種算法會使得相同的url發(fā)送到同一個Web服務(wù)器
3) Web服務(wù)器收到請求虽抄，產(chǎn)生響應，并將網(wǎng)頁發(fā)送給Nginx負載均衡服務(wù)器独柑。
4) Nginx負載均衡服務(wù)器將網(wǎng)頁傳遞給filters鏈處理迈窟，之后發(fā)回給我們的瀏覽器。
而Filter的功能可以理解成先把前一步生成的結(jié)果處理一遍忌栅，再返回給瀏覽器车酣。比如可以將前面沒有壓縮的網(wǎng)頁用gzip壓縮后再返回給瀏覽器。
2.1.5 瀏覽器渲染
1) 瀏覽器根據(jù)頁面內(nèi)容索绪，生成DOM Tree湖员。根據(jù)CSS內(nèi)容，生成CSS Rule Tree(規(guī)則樹)瑞驱。調(diào)用JS執(zhí)行引擎執(zhí)行JS代碼娘摔。
2) 根據(jù)DOM Tree和CSS Rule Tree生成Render Tree(呈現(xiàn)樹)
3) 根據(jù)Render Tree渲染網(wǎng)頁
但是在瀏覽器解析頁面內(nèi)容的時候，會發(fā)現(xiàn)頁面引用了其他未加載的image唤反、css文件凳寺、js文件等靜態(tài)內(nèi)容，因此開始了第二部分拴袭。
2.2 網(wǎng)頁靜態(tài)資源加載
以阿里巴巴的淘寶網(wǎng)首頁的logo為例读第，其url地址為 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg
我們清楚地看到了url中有cdn字樣。
什么是CDN拥刻？如果我在廣州訪問杭州的淘寶網(wǎng)怜瞒，跨省的通信必然造成延遲拄查。如果淘寶網(wǎng)能在廣東建立一個服務(wù)器枉阵，靜態(tài)資源我可以直接從就近的廣東服務(wù)器獲取，必然能提高整個網(wǎng)站的打開速度，這就是CDN巷波。CDN叫內(nèi)容分發(fā)網(wǎng)絡(luò)，是依靠部署在各地的邊緣服務(wù)器婶恼，使用戶就近獲取所需內(nèi)容燃乍，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應速度霜运。
接下來的流程就是瀏覽器根據(jù)url加載該url下的圖片內(nèi)容脾歇。本質(zhì)上是瀏覽器重新開始第一部分的流程，所以這里不再重復闡述淘捡。區(qū)別只是負責均衡服務(wù)器后端的服務(wù)器不再是應用服務(wù)器藕各，而是提供靜態(tài)資源的服務(wù)器。
