淺談一個網頁打開的全過程（涉及DNS、CDN、Nginx負載均衡等）

一、概要

　　從用戶在瀏覽器輸入域名開始，到web頁面加載完畢，這是一個說複雜不復雜，說簡單不簡單的過程，下文暫且把這個過程稱做網頁加載過程。下面我將依靠本身的經驗，總結一下整個過程。若有錯漏，歡迎指正。

　　閱讀本文須要讀者已有必定的計算機知識，瞭解TCP、DNS等。

二、分析

　　衆所周知，打開一個網頁的過程當中，瀏覽器會因頁面上的css/js/image等靜態資源會屢次發起鏈接請求，因此咱們暫且把這個網頁加載過程分紅兩部分：

1. html(jsp/php/aspx) 頁面加載(假設存在簡單的Nginx負載均衡)
2. css/js/image等 網頁靜態資源加載(假設使用CDN)

     2.1 頁面加載

　　先上一張圖，直觀明瞭地讓你們瞭解下基本流程，而後咱們再逐一分析。

　　2.1.1 DNS解析

　　什麼是DNS解析？當用戶輸入一個網址並按下回車鍵的時候，瀏覽器獲得了一個域名。而在實際通訊過程當中，咱們須要的是一個IP地址。所以咱們須要先把域名轉換成相應的IP地址，這個過程稱做DNS解析。

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

　　或許不少人不知道，瀏覽器自身也帶有一層DNS緩存。Chrome 緩存1000條DNS解析結果，緩存時間大概在一分鐘左右。

　　（Chrome瀏覽器經過輸入：chrome://net-internals/#dns 打開DNS緩存頁面）

　　2) 若是瀏覽器緩存中沒有找到須要的記錄或記錄已通過期，則搜索hosts文件和操做系統緩存。

　　在Windows操做系統中，能夠經過 ipconfig /displaydns 命令查看本機當前的緩存。

　　經過hosts文件，你能夠手動指定一個域名和其對應的IP解析結果，而且該結果一旦被使用，一樣會被緩存到操做系統緩存中。

　　Windows系統的hosts文件在%systemroot%\system32\drivers\etc下，linux系統的hosts文件在/etc/hosts下。

　　3) 若是在hosts文件和操做系統緩存中沒有找到須要的記錄或記錄已通過期，則向域名解析服務器發送解析請求。

　　其實第一臺被訪問的域名解析服務器就是咱們平時在設置中填寫的DNS服務器一項，當操做系統緩存中也沒有命中的時候，系統會向DNS服務器正式發出解析請求。這裏是真正意義上開始解析一個未知的域名。

　　通常一臺域名解析服務器會被地理位置臨近的大量用戶使用（特別是ISP的DNS），通常常見的網站域名解析都能在這裏命中。

　　4) 若是域名解析服務器也沒有該域名的記錄，則開始遞歸+迭代解析。

　　這裏咱們舉個例子，若是咱們要解析的是mail.google.com。

　　首先咱們的域名解析服務器會向根域服務器（全球只有13臺）發出請求。顯然，僅憑13臺服務器不可能把全球全部IP都記錄下來。因此根域服務器記錄的是com域服務器的IP、cn域服務器的IP、org域服務器的IP……。若是咱們要查找.com結尾的域名，那麼咱們能夠到com域服務器去進一步解析。因此其實這部分的域名解析過程是一個樹形的搜索過程。

       

       根域服務器告訴咱們com域服務器的IP。

　　接着咱們的域名解析服務器會向com域服務器發出請求。根域服務器並無mail.google.com的IP，可是卻有google.com域服務器的IP。

　　接着咱們的域名解析服務器會向google.com域服務器發出請求。...

　　如此重複，直到得到mail.google.com的IP地址。

 

　　爲何是遞歸：問題由一開始的本機要解析mail.google.com變成域名解析服務器要解析mail.google.com，這是遞歸。

　　爲何是迭代：問題由向根域服務器發出請求變成向com域服務器發出請求再變成向google.com域發出請求，這是迭代。

　　5) 獲取域名對應的IP後，一步步向上返回，直到返回給瀏覽器。

　　2.1.2 發起TCP請求

　　瀏覽器會選擇一個大於1024的本機端口向目標IP地址的80端口發起TCP鏈接請求。通過標準的TCP握手流程，創建TCP鏈接。

　　關於TCP協議的細節，這裏就再也不闡述。這裏只是簡單地用一張圖說明一下TCP的握手過程。若是不瞭解TCP，能夠選擇跳過此段，不影響本文其餘部分的瀏覽。

        

 

　　2.1.3 發起HTTP請求

　　其本質是在創建起的TCP鏈接中，按照HTTP協議標準發送一個索要網頁的請求。

　　2.1.4 負載均衡

　　什麼是負載均衡？當一臺服務器沒法支持大量的用戶訪問時，將用戶分攤到兩個或多個服務器上的方法叫負載均衡。

　　什麼是Nginx？Nginx是一款面向性能設計的HTTP服務器，相較於Apache、lighttpd具備佔有內存少，穩定性高等優點。

　　負載均衡的方法不少，Nginx負載均衡、LVS-NAT、LVS-DR等。這裏，咱們以簡單的Nginx負載均衡爲例。關於負載均衡的多種方法詳情你們能夠Google一下。

　　Nginx有4種類型的模塊：core、handlers、filters、load-balancers。

　　咱們這裏討論其中的2種，分別是負責負載均衡的模塊load-balancers和負責執行一系列過濾操做的filters模塊。

　　1) 通常，若是咱們的平臺配備了負載均衡的話，前一步DNS解析得到的IP地址應該是咱們Nginx負載均衡服務器的IP地址。因此，咱們的瀏覽器將咱們的網頁請求發送到了Nginx負載均衡服務器上。

　　2) Nginx根據咱們設定的分配算法和規則，選擇一臺後端的真實Web服務器，與之創建TCP鏈接、並轉發咱們瀏覽器發出去的網頁請求。

　　　　Nginx默認支持 RR輪轉法 和 ip_hash法 這2種分配算法。

　　　　前者會從頭至尾一個個輪詢全部Web服務器，然後者則對源IP使用hash函數肯定應該轉發到哪一個Web服務器上，也能保證同一個IP的請求能發送到同一個Web服務器上實現會話粘連。

　　　　也有其餘擴展分配算法，如：

　　　　fair：這種算法會選擇相應時間最短的Web服務器

　　　　url_hash：這種算法會使得相同的url發送到同一個Web服務器

　　3) Web服務器收到請求，產生響應，並將網頁發送給Nginx負載均衡服務器。

　　4) Nginx負載均衡服務器將網頁傳遞給filters鏈處理，以後發回給咱們的瀏覽器。

 

　　而Filter的功能能夠理解成先把前一步生成的結果處理一遍，再返回給瀏覽器。好比能夠將前面沒有壓縮的網頁用gzip壓縮後再返回給瀏覽器。

　　2.1.5 瀏覽器渲染

　　1) 瀏覽器根據頁面內容，生成DOM Tree。根據CSS內容，生成CSS Rule Tree(規則樹)。調用JS執行引擎執行JS代碼。

　　2) 根據DOM Tree和CSS Rule Tree生成Render Tree(呈現樹)

　　3) 根據Render Tree渲染網頁

　　　　可是在瀏覽器解析頁面內容的時候，會發現頁面引用了其餘未加載的image、css文件、js文件等靜態內容，所以開始了第二部分。

　　2.2 網頁靜態資源加載

　　以阿里巴巴的淘寶網首頁的logo爲例，其url地址爲 img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg

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

　　什麼是CDN？若是我在廣州訪問杭州的淘寶網，跨省的通訊必然形成延遲。若是淘寶網能在廣東創建一個服務器，靜態資源我能夠直接從就近的廣東服務器獲取，必然能提升整個網站的打開速度，這就是CDN。CDN叫內容分發網絡，是依靠部署在各地的邊緣服務器，使用戶就近獲取所需內容，下降網絡擁塞，提升用戶訪問響應速度。

　　接下來的流程就是瀏覽器根據url加載該url下的圖片內容。本質上是瀏覽器從新開始第一部分的流程，因此這裏再也不重複闡述。區別只是負責均衡服務器後端的服務器再也不是應用服務器，而是提供靜態資源的服務器。