1. 程式人生 > >從輸入網址到顯示網頁的過程分析

從輸入網址到顯示網頁的過程分析

作為一個軟體開發者,你一定會對網路應用如何工作有一個完整的層次化的認知,同樣這裡也包括這些應用所用到的技術:像瀏覽器,HTTP,HTML,網路伺服器,需求處理等等。
本文將更深入的研究當你輸入一個網址的時候,後臺到底發生了一件件什麼樣的事~

1.首先嘛,你得在瀏覽器裡輸入要網址:facebook.com

2.瀏覽器查詢域名的IP地址
導航的第一步是通過訪問的域名找出其IP地址。DNS查詢過程如下:
*瀏覽器快取–瀏覽器會快取DNS記錄一段時間。有趣的是,作業系統沒有告訴瀏覽器儲存DNS記錄的時間,這樣不同瀏覽器會儲存個自固定的一個時間(2分鐘到30分鐘不等)。
*系統快取–如果在瀏覽器快取裡沒有找到需要的記錄,瀏覽器會做一個系統呼叫(windows裡是gethostbyname)。這樣便可獲得系統快取中的記錄。
*路由器快取–接著,前面的查詢請求發向路由器,它一般會有自己的DNS快取。
*ISPDNS快取–接下來要check的就是ISP快取DNS的伺服器。在這一般都能找到相應的快取記錄。
*遞迴搜尋–你的ISP的DNS伺服器從跟域名伺服器開始進行遞迴搜尋,從.com頂級域名伺服器到Facebook的域名伺服器。一般DNS伺服器的快取中會有.com域名伺服器中的域名,所以到頂級伺服器的匹配過程不是那麼必要了。
DNS有一點令人擔憂,這就是像wikipedia.org或者facebook.com這樣的整個域名看上去只是對應一個單獨的IP地址。還好,有幾種方法可以消除這個瓶頸:
*迴圈DNS是DNS查詢時返回多個IP時的解決方案。舉例來說,Facebook.com實際上就對應了四個IP地址。
*負載平衡器是以一個特定IP地址進行偵聽並將網路請求轉發到叢集伺服器上的硬體裝置。一些大型的站點一般都會使用這種昂貴的高效能負載平衡器。
*地理DNS根據使用者所處的地理位置,通過把域名對映到多個不同的IP地址提高可擴充套件性。這樣不同的伺服器不能夠更新同步狀態,但對映靜態內容的話非常好。
*Anycast是一個IP地址對映多個物理主機的路由技術。美中不足,Anycast與TCP協議適應的不是很好,所以很少應用在那些方案中。
大多數DNS伺服器使用Anycast來獲得高效低延遲的DNS查詢。

3.瀏覽器給web伺服器傳送一個HTTP請求
因為像Facebook主頁這樣的動態頁面,開啟後在瀏覽器快取中很快甚至馬上就會過期,毫無疑問他們不能從中讀取。
所以,瀏覽器將把一下請求傳送到Facebook所在的伺服器:
GETHTTP://facebook.com/HTTP/1.1
Accept:application/x-ms-application,image/jpeg,application/xaml+xml,[...]
User-Agent:Mozilla/4.0(compatible;MSIE8.0;WindowsNT6.1;WOW64;[...]
Accept-Encoding:gzip,deflate
Connection:Keep-Alive
Host:facebook.com
Cookie:datr=1265876274-[...];locale=en_US;lsd=WW[...];c_user=2101[...]
GET這個請求定義了要讀取的URL:“HTTP://facebook.com/”。瀏覽器自身定義(User-Agent頭),和它希望接受什麼型別的相應(AcceptandAccept-Encoding頭).Connection頭要求伺服器為了後邊的請求不要關閉TCP連線。
請求中也包含瀏覽器儲存的該域名的cookies。可能你已經知道,在不同頁面請求當中,cookies是與跟蹤一個網站狀態相匹配的鍵值。這樣cookies會儲存登入使用者名稱,伺服器分配的密碼和一些使用者設定等。Cookies會以文字文件形式儲存在客戶機裡,每次請求時傳送給伺服器。
用來看原始HTTP請求及其相應的工具很多。作者比較喜歡使用fiddler,當然也有像FireBug這樣其他的工具。這些軟體在網站優化時會幫上很大忙。
除了獲取請求,還有一種是傳送請求,它常在提交表單用到。傳送請求通過URL傳遞其引數(e.g.:HTTP://robozzle.com/puzzle.aspx?id=85)。傳送請求在請求正文頭之後傳送其引數。
像“HTTP://facebook.com/”中的斜槓是至關重要的。這種情況下,瀏覽器能安全的新增斜槓。而像“HTTP://example.com/folderOrFile”這樣的地址,因為瀏覽器不清楚folderOrFile到底是資料夾還是檔案,所以不能自動新增斜槓。這時,瀏覽器就不加斜槓直接訪問地址,伺服器會響應一個重定向,結果造成一次不必要的握手。

4.facebook服務的永久重定向響應
Facebook伺服器發回給瀏覽器的響應:
HTTP/1.1301MovedPermanently
Cache-Control:private,no-store,no-cache,must-revalidate,post-check=0,
pre-check=0
Expires:Sat,01Jan200000:00:00GMT
Location:HTTP://www.facebook.com/
P3P:CP=”DSPLAW”
Pragma:no-cache
Set-Cookie:made_write_conn=deleted;expires=Thu,12-Feb-200905:09:50GMT;
path=/;domain=.facebook.com;httponly
Content-Type:text/html;charset=utf-8
X-Cnection:close
Date:Fri,12Feb201005:09:51GMT
Content-Length:0
伺服器給瀏覽器響應一個301永久重定向響應,這樣瀏覽器就會訪問“HTTP://www.facebook.com/”而非“HTTP://facebook.com/”。
為什麼伺服器一定要重定向而不是直接發會使用者想看的網頁內容呢?這個問題有好多有意思的答案。
其中一個原因跟搜尋引擎排名有關。你看,如果一個頁面有兩個地址,就像HTTP://www.igoro.com/和HTTP://igoro.com/,搜尋引擎會認為它們是兩個網站,結果造成每一個的搜尋連結都減少從而降低排名。而搜尋引擎知道301永久重定向是什麼意思,這樣就會把訪問帶www的和不帶www的地址歸到同一個網站排名下。
還有一個是用不同的地址會造成快取友好性變差。當一個頁面有好幾個名字時,它可能會在快取裡出現好幾次。

5.瀏覽器跟蹤重定向地址
現在,瀏覽器知道了“HTTP://www.facebook.com/”才是要訪問的正確地址,所以它會發送另一個獲取請求:
GETHTTP://www.facebook.com/HTTP/1.1
Accept:application/x-ms-application,image/jpeg,application/xaml+xml,[...]
Accept-Language:en-US
User-Agent:Mozilla/4.0(compatible;MSIE8.0;WindowsNT6.1;WOW64;[...]
Accept-Encoding:gzip,deflate
Connection:Keep-Alive
Cookie:lsd=XW[...];c_user=21[...];x-referer=[...]
Host:www.facebook.com
頭資訊以之前請求中的意義相同。

6.伺服器“處理”請求
伺服器接收到獲取請求,然後處理並返回一個響應。
這表面上看起來是一個順向的任務,但其實這中間發生了很多有意思的東西-就像作者部落格這樣簡單的網站,何況像facebook那樣訪問量大的網站呢!
*Web伺服器軟體
web伺服器軟體(像IIS和阿帕奇)接收到HTTP請求,然後確定執行什麼請求處理來處理它。請求處理就是一個能夠讀懂請求並且能生成HTML來進行響應的程式(像ASP.NET,PHP,RUBY…)。
舉個最簡單的例子,需求處理可以以對映網站地址結構的檔案層次儲存。像HTTP://example.com/folder1/page1.aspx這個地址會對映/httpdocs/folder1/page1.aspx這個檔案。web伺服器軟體可以設定成為地址人工的對應請求處理,這樣page1.aspx的釋出地址就可以是HTTP://example.com/folder1/page1。
*請求處理
請求處理閱讀請求及它的引數和cookies。它會讀取也可能更新一些資料,並講資料儲存在伺服器上。然後,需求處理會生成一個HTML響應。
所有動態網站都面臨一個有意思的難點-如何儲存資料。小網站一半都會有一個SQL資料庫來儲存資料,儲存大量資料和/或訪問量大的網站不得不找一些辦法把資料庫分配到多臺機器上。解決方案有:sharding(基於主鍵值講資料表分散到多個數據庫中),複製,利用弱語義一致性的簡化資料庫。
委託工作給批處理是一個廉價保持資料更新的技術。舉例來講,Fackbook得及時更新新聞feed,但資料支援下的“你可能認識的人”功能只需要每晚更新(作者猜測是這樣的,改功能如何完善不得而知)。批處理作業更新會導致一些不太重要的資料陳舊,但能使資料更新耕作更快更簡潔。

7.伺服器發回一個HTML響應
伺服器生成並返回的響應:
HTTP/1.1200OK
Cache-Control:private,no-store,no-cache,must-revalidate,post-check=0,
pre-check=0
Expires:Sat,01Jan200000:00:00GMT
P3P:CP=”DSPLAW”
Pragma:no-cache
Content-Encoding:gzip
Content-Type:text/html;charset=utf-8
X-Cnection:close
Transfer-Encoding:chunked
Date:Fri,12Feb201009:05:55GMT
[email protected]
[...]
整個響應大小為35kB,其中大部分在整理後以blob型別傳輸。
內容編碼頭告訴瀏覽器整個響應體用gzip演算法進行壓縮。解壓blob塊後,你可以看到如下期望的HTML:
“HTTP://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
lang=”en”id=”facebook”>

關於壓縮,頭資訊說明了是否快取這個頁面,如果快取的話如何去做,有什麼cookies要去設定(前面這個響應裡沒有這點)和隱私資訊等等。
請注意報頭中把Content-type設定為“text/html”。報頭讓瀏覽器將該響應內容以HTML形式呈現,而不是以檔案形式下載它。瀏覽器會根據報頭資訊決定如何解釋該響應,不過同時也會考慮像URL擴充套件內容等其他因素。

8.瀏覽器開始顯示HTML
在瀏覽器沒有完整接受全部HTML文件時,它就已經開始顯示頁面了

9.瀏覽器傳送獲取嵌入在HTML中的物件
在瀏覽器顯示HTML時,它會注意到需要獲取其他地址內容的標籤。這時,瀏覽器會發送一個獲取請求來重新獲得這些檔案。
下面是幾個我們訪問facebook.com時需要重獲取的幾個URL:
*圖片
HTTP://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
HTTP://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif

*CSS式樣表
HTTP://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
HTTP://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css

*JavaScript檔案
HTTP://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
HTTP://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js

這些地址都要經歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查詢這些域名,傳送請求,重定向等等…
但不像動態頁面那樣,靜態檔案會允許瀏覽器對其進行快取。有的檔案可能會不需要與伺服器通訊,而從快取中直接讀取。伺服器的響應中包含了靜態檔案儲存的期限資訊,所以瀏覽器知道要把它們快取多長時間。還有,每個響應都可能包含像版本號一樣工作的ETag頭(被請求變數的實體值),如果瀏覽器觀察到檔案的版本ETag資訊已經存在,就馬上停止這個檔案的傳輸。
試著猜猜看“fbcdn.net”在地址中代表什麼?聰明的答案是”Facebook內容分發網路”。Facebook利用內容分發網路(CDN)分發像圖片,CSS表和JavaScript檔案這些靜態檔案。所以,這些檔案會在全球很多CDN的資料中心中留下備份。
靜態內容往往代表站點的頻寬大小,也能通過CDN輕鬆的複製。通常網站會使用第三方的CDN。例如,Facebook的靜態檔案由最大的CDN提供商Akamai來託管。
舉例來講,當你試著pingstatic.ak.fbcdn.net的時候,可能會從某個akamai.net伺服器上獲得響應。有意思的是,當你同樣再ping一次的時候,響應的伺服器可能就不一樣,這說明幕後的負載平衡開始起作用了。

10.瀏覽器傳送非同步(AJAX)請求
在Web2.0偉大精神的指引下,頁面顯示完成後客戶端仍與伺服器端保持著聯絡。
以Facebook聊天功能為例,它會持續與伺服器保持聯絡來及時更新你那些亮亮灰灰的好友狀態。為了更新這些頭像亮著的好友狀態,在瀏覽器中執行的JavaScript程式碼會給伺服器傳送非同步請求。這個非同步請求傳送給特定的地址,它是一個按照程式構造的獲取或傳送請求。還是在Facebook這個例子中,客戶端傳送給HTTP://www.facebook.com/ajax/chat/buddy_list.php一個釋出請求來獲取你好友裡哪個線上的狀態資訊。
提起這個模式,就必須要講講”AJAX”–“非同步JavaScript和XML”,雖然伺服器為什麼用XML格式來進行響應也沒有個一清二白的原因。再舉個例子吧,對於非同步請求,Facebook會返回一些JavaScript的程式碼片段。
除了其他,fiddler這個工具能夠讓你看到瀏覽器傳送的非同步請求。事實上,你不僅可以被動的做為這些請求的看客,還能主動出擊修改和重新發送它們。AJAX請求這麼容易被蒙,可著實讓那些計分的線上遊戲開發者們鬱悶的了。(當然,可別那樣騙人家~)
Facebook聊天功能提供了關於AJAX一個有意思的問題案例:把資料從伺服器端推送到客戶端。因為HTTP是一個請求-響應協議,所以聊天伺服器不能把新訊息發給客戶。取而代之的是客戶端不得不隔幾秒就輪詢下伺服器端看自己有沒有新訊息。
這些情況發生時長輪詢是個減輕伺服器負載挺有趣的技術。如果當被輪詢時伺服器沒有新訊息,它就不理這個客戶端。而當尚未超時的情況下收到了該客戶的新訊息,伺服器就會找到未完成的請求,把新訊息做為響應返回給客戶端。
總結一下

希望看了本文,你能明白不同的網路模組是如何協同工作的

原文地址:http://www.chinahtml.com/1007/127890385919293_2.html

相關推薦

輸入網址顯示網頁過程分析

作為一個軟體開發者,你一定會對網路應用如何工作有一個完整的層次化的認知,同樣這裡也包括這些應用所用到的技術:像瀏覽器,HTTP,HTML,網路伺服器,需求處理等等。 本文將更深入的研究當你輸入一個網址的時候,後臺到底發生了一件件什麼樣的事~ 1.首先嘛,你得在瀏覽器裡輸入要

輸入網址顯示網頁的全過程分析

example 變量 搜索 認識 硬件 兩種 http協議 eva check 作為一個軟件開發者,你一定會對網絡應用如何工作有一個完整的層次化的認知,同樣這裏也包括這些應用所用到的技術:像瀏覽器,HTTP,HTML,網絡服務器,需求處理等等。本文將更深入的研究當你輸入一個

輸入網址顯示網頁,這個過程究竟發生了什麼?

當輸入URL、敲下回車、最後瀏覽器頁面顯示,這裡面有什麼故事?鍵盤到作業系統、作業系統到瀏覽器、瀏覽器到伺服器、伺服器返回資料頁面渲染…… 鍵盤到作業系統 回車鍵按下時,與鍵盤相關的電路閉合,通過消抖操作,鍵盤的電路系統將回車鍵轉化為鍵碼13。按鍵被按下會觸發中斷事件,回

輸入URL到網頁呈現的過程

1、域名解析 當我們在瀏覽器中輸入一個URL,例如”www.google.com”時,這個地址並不是谷歌網站真正意義上的地址。網際網路上每一臺計算機的唯一標識是它的IP地址,因此我們輸入的網址首先需要先解析為IP地址,這一過程叫做DNS解析。 DNS解析是一個遞迴查詢的過程。例如

【計算機網路】輸入網址網頁顯示的整個流程

                            輸入網址到網頁顯示的整個流程 最近在看一些大廠的筆經面經時,經常看到這個問題,索性在今天也把自己

輸入網址到返回頁面經歷了哪些過程

開啟瀏覽器,在位址列中輸入baidu.com這個網址,會返回一個地址為https://www.baidu.com/的百度首頁。那麼,在這之間都發生了什麼呢? 在此期間經歷了四個過程,如下:域名解析:根據

在瀏覽器中輸入網址網頁展現全部過程

序 最近接觸到了整個網站的開發流程,所以就總結一下網站的執行機制,對網路應用如何工作有一個完整的層次化的認知。 第一步過程 首先,你得在瀏覽器裡輸入要網址: 例如百度或者facebook。 第二步過程 瀏覽器查詢域名的IP地址(域名就是指輸入的網址) 瀏覽

Activity 載入佈局檔案到顯示過程分析

在Activity 生命週期函式執行過程詳解中介紹了ActivityThread、Instrumentation、ActivityManagerService啟動activity的過程,本文主要介紹Activity從載入佈局檔案到顯示的過程。 SetC

LIVE555學習3:live555MediaServer講解——Live555啟動到響應Client過程分析

文章目錄 1 概述 2 程式碼分析 2.1 doEventLoop 2.2 計劃任務 2.3 RTSP服務 2.3.1 呼叫關係 2.3.2 Server監聽埠的建立 2.3.3 計劃任務

瀏覽器輸入一個地址的過程分析

瀏覽器輸入一個地址的過程分析? DNS解析過程,尋找對應的伺服器ip地址 (應用層) 可能會有一次向外部DNS的請求 (參照 DNS過程分析) 建立TCP連線,利用這個連線傳送資料 (傳輸層) 三次握手 封裝HTTP請求包,HTTP或HT

輸入網址到最後瀏覽器呈現頁面內容,中間發生了什麼?

1.準備當你在瀏覽器中輸入網址(例如www.test.com)並且敲了回車以後, 瀏覽器首先要做的事情就是獲得test.com的IP地址,具體的做法就是傳送一個UDP的包給DNS伺服器,DNS伺服器會返

詳細探祕Linux 和 Window 雙系統訪問Windows 磁碟需要輸入密碼問題解決過程分析

> 將要講很多的內容真正產生作用的配置就只有下面這一句而已。如果你只是想要解決問題看這一句就行了,後面都沒有必要在看下去了。 > 將allow-active標籤中的auth_admin_keep 改為 yes 即可。 如果你也想知道這個配置是怎麼找到的,可以繼續接著往下看。跟著我的思路我相信能對你在分析問題

瀏覽器中輸入url地址到瀏覽器中顯示網頁內容 的過程分析

此文是我總結了一些經驗和各種大神知識綜合而成的。  1.首先當然是瀏覽器紅輸入url地址,            但是當你輸入baidu 為什麼最終的URL地址是www.baidu.com呢?

瀏覽器地址欄輸入網址,到網頁徹底打開,中間都發生了什麽?

流氓軟件 打開 軟件 獲取 大量 上一個 負責 一段 動態腳本 從瀏覽器地址欄輸入網址,到網頁徹底打開,中間都發生了什麽? 這是一道經典面試題,以前我以為只有我喜歡出這道題,後來在微博上發現其他技術大牛也出這道題。 這道題其實測試的不是具體特定的技術,而是對整個上網

愛創課堂每日一題第五十七天-一個頁面輸入 URL 到頁面加載顯示完成,這個過程中都發生了什麽?

前端 前端學習 前端入門 北京前端分為4個步驟: (1),當發送一個URL請求時,不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL,瀏覽器都會開啟一個線程來處理這個請求,同時在遠程DNS服務器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。 (2), 瀏覽器與遠程

瀏覽器輸入網址到頁面顯示的全過程

物理層 頁面 緩存 本地磁盤 緩存服務器 ip報頭 行數 web dns 【前言】從全局來講,當鍵入一個url時,肯定是需要從服務器請求某個頁面或某條數據然後顯示到用戶自己的電腦屏幕上。這個過程中其實包括:DNS對url域名的解析(在url中解析出服務器所在的IP地

一個頁面輸入URL到頁面加載顯示完成,這個過程中發生了什麽?

域名服務器 tex -type 發送請求 頁面加載 異步 htm dns查詢 tcp 1.瀏覽器通過DNS查找域名對應的IP地址(DNS查詢:瀏覽器緩存-->系統緩存-->路由器緩存-->ISP DNS 緩存 -->根域名服務器) 2.瀏覽器向Web

輸入url到顯示網頁發生了什麼

原文連結:https://juejin.im/post/5bf23afa6fb9a049be5d1494 在瀏覽器中輸入url到顯示網頁主要包含兩個部分: 網路通訊和頁面渲染 網際網路內各網路裝置間的通訊都遵循TCP/IP協議,利用TCP/IP協議族進行網路通訊時,會通過分層順序與對方進行通訊。分層由高到低

瀏覽器輸入網址顯示網站頁面之間到底發生了什麼?系列(最後一篇)

 個人部落格網站文章地址:http://blog.mclink.xyz/index/article/index/id/40.html  通過之前文章的鋪墊,網路包穿過了防火牆後,就能到達伺服器了,那麼這篇文章就講請求到達web伺服器,響應返回瀏覽器的過程。多,是最後一部分了。

Chromium網頁輸入事件捕捉和手勢檢測過程分析

       連續的輸入事件可能會產生一定的手勢操作,例如滑動手勢和捏合手勢。在Chromium中,網頁的輸入事件是在Browser程序中捕捉的。Browser程序捕獲輸入事件之後,會進行手勢操作檢測。檢測出來的手勢操作將會發送給Render程序處理,因為它們需要應用在網頁之