（二）——經典的Web應用網絡模型 · Web開發新人培訓系列

> 本文鏈接：[Web開發新人培訓系列（二）——經典的Web應用網絡模型](http://rapheal.sinaapp.com/2014/10/24/webdev-network-model/ "本文固定鏈接 http://rapheal.sinaapp.com/2014/10/24/webdev-network-model/") > 來源：[拉風的博客](http://rapheal.sinaapp.com/) ## 前言這篇文章要介紹的是一個常見Web應用基本的過程跟網絡模型，當然，對于多數的Client/Server應用也是適用的。延續這個系列文章的風格，只管通俗不管嚴謹。 ## 概覽總體模型概覽圖： [![](https://box.kancloud.cn/2016-09-07_57cfde1c098aa.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/%E6%A6%82%E8%A7%88.png) ## DNS 用戶點開/輸入一個鏈接http://www.qq.com/index.html之后，瀏覽器需要先找到www.qq.com這個域名對應的IP地址，因為計算機是通過IP作為門牌號的，而域名你可以認為是這個IP的別名，方便人類記憶使用。一般來說，瀏覽器會先詢問本地DNS緩存，如果沒有記錄過這個域名映射的IP，那就向本地的DNS網關詢問，如果網關也不知道，就繼續往上一層的DNS服務器詢問，直到拿到這個IP地址。 [![](https://box.kancloud.cn/2016-09-07_57cfde1c26f1e.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/DNS.png) 一般來說，一臺服務器處理的請求是有限的，因此大型的應用都會有多臺proxy機器，我們可以讓DNS服務器在第一個請求返回IP1，第二個請求返回IP2,……這樣用戶的請求就會均勻的落在這些機器上，這個就是DNS負載均衡。CDN就是通過智能DNS算出離用戶最近的CDN節點的IP地址，這樣用戶可以訪問一臺離他最近的機器，大大節約連接時間。 [![](https://box.kancloud.cn/2016-09-07_57cfde1c3e86f.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/DNS%E8%B4%9F%E8%BD%BD.png) ## 代理與反向代理一般來說，瀏覽器跟真正提供Web服務的機器是沒有直接連接的，他們中間都會有代理跟反向代理。 [![](https://box.kancloud.cn/2016-09-07_57cfde1c566e1.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/%E4%BB%A3%E7%90%86%E4%B8%8E%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86.png) 大部分的公司都會內部的計算機都配置了代理服務器，其作用是所有內部的網絡請求都是通過代理去連接對方服務器，可以在代理服務器這里做惡意請求/響應的攔截，還可以緩存內部網絡所需的公共資源。 [![](https://box.kancloud.cn/2016-09-07_57cfde1c6ea9d.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/%E6%AD%A3%E5%90%91%E4%BB%A3%E7%90%86.png) 反向代理就是以代理服務器來接收網絡連接請求，我們上下文稱Proxy機器指的就是反向代理機器，Proxy機器收到請求后會經過一定的分析最后把請求內容轉發給內網對應的Web服務器，Web服務器的HTTP響應包會先到Proxy機器，然后再到用戶機器。反向代理的好處是可以負載均衡，在它后邊可以有多臺工作的Web服務器，這樣分層次之后，很多職責就明確很多了：Proxy機器負責負載均衡、攔截惡意請求、維持長連接，還可以屏蔽不工作的Web服務器；而Web服務器就只要關心自己處理的Web業務邏輯即可。往往Proxy服務器跟用戶機器保持長連接，這樣可以節省用戶每次跟服務器建立連接的消耗，而Proxy服務器跟Web服務器采用短連接的方式，這樣可以有效節約Web服務器的資源。 [![](https://box.kancloud.cn/2016-09-07_57cfde1c8b0bb.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86.png) ## Web server Web server的職責就是根據用戶的請求，返回其所需要的響應內容。往往Web server只涉及業務測邏輯的判斷以及數據的組裝，而真正的數據位于后端的存儲Server(本文不涉及)。對于一般應用來說，Web server返回的是動態產生的內容（每個用戶都不一致的動態內容或者經常編輯變動的內容），如頁面的HTML內容、JSON數據、XML數據等。而Javascript文件、CSS文件、圖片這些靜態資源（不根據用戶而變動的資源）往往存放在CDN中。 [![](https://box.kancloud.cn/2016-09-07_57cfde1ca72bd.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/Web-server.png) ## 瀏覽器從瀏覽器發起請求，經歷以上講述的步驟處理后，瀏覽器發起到從Web sever返回的HTTP包。一般來說這個響應是返回網頁的HTML。接著瀏覽器開始解析收到的HTML包，HTML里邊一般會把樣式CSS跟腳本Javascript作為外鏈請求。本文不涉及頁面渲染內容，主要為了討論整體應用的模型，因此這塊留以后探討寫文章。 ## CDN 從上邊討論知道，對于動態的內容，請求總是到Web server去動態計算獲取內容，但是對于不隨用戶狀態變化的內容我們把內容推送到CDN節點上。靜態資源的域名跟頁面HTML的域名一般來說是不一樣的，因為靜態資源的請求需要解析到CDN節點去。我們假設主請求是：www.qq.com/index.html；CDN請求是cdn.qq.com/index.css。 [![](https://box.kancloud.cn/2016-09-07_57cfde1cc071d.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/CDN.png) 一般Web應用把靜態內容推到CDN有兩種模式，一種是在上線前主動將內容推送到CDN節點，一種是CDN發現本地沒有該文件時，回源到Web server機器取內容，然后緩存在他本地。 [![](https://box.kancloud.cn/2016-09-07_57cfde1ce2993.png)](http://rapheal-wordpress.stor.sinaapp.com/uploads/2014/10/CDN%E6%8E%A8%E9%80%81%E5%86%85%E5%AE%B9.png)