本人有若干成套學習視頻, 可試看! 可試看! 可試看, 重要的事情說三遍 包含Java, 數據結構與算法, iOS, 安卓, python, flutter等等, 如有需要, 聯系微信tsaievan.
當你在瀏覽器中輸入網址時發生了什么?
這不僅僅是一個面試問題, 也是我們每次在瀏覽器里輸入網址的時候也常常思考這個問題, 這篇文章給我們提供了針對這個問題的一些思考.
Step 1. URL被輸進瀏覽器地址欄
Step 2. 如果你的請求對象在瀏覽器緩存中, 請看Step 8
Step 3. DNS查找服務器ip地址
當我們想連接google.com時, 我們實際上是連接 google的web服務器的主機. 這主機有一個74.125.236.65的ip地址, 此時, 如果你在瀏覽器中輸入http://74.125.236.65, 也會顯示google的主頁, 看起來http://google.com和http://74.125.236.65是同一個東西, 沒什么區別, 但其實不是這樣, 每一秒鐘, Google都要接收巨量的網絡請求,為了滿足這一點, Google在多個地點都擁有多個服務器, 因而我們需要讓Google決定哪一臺服務器最能滿足我們的需求. 使用google.com就為我們做到了這一點. 我們在瀏覽器里輸入google.com, DNS(Domain Name System)開始起作用, 并將URL解析為合適的ip地址
下面幾點總結了DNS服務器工作的步驟:
檢查瀏覽器緩存
瀏覽器會在一定時間內保存DNS緩存記錄, 所以,DNS查詢第一步就是來到這里檢查操作系統緩存
如果瀏覽器沒有緩存記錄, 就看操作系統是否保存了最近的DNS查詢緩存路由緩存
如果上面步驟都沒有獲取到DNS記錄, 那么將會查看路由是否有緩存ISP緩存
如果所有步驟都失敗, 那么就會去ISP尋找. 首先, 將會在ISP緩存中找, 如果沒找到,ISP的DNS的遞歸查找將起作用. 像Google這樣的網站, 通過DNS查找到正確的ip地址是一個極其復雜的過程.
Step 4. 瀏覽器建立一個和服務器的TCP連接
Step 5. 瀏覽器想服務器發送一個HTTP請求
瀏覽器根據HTTP協議向服務器發送一個GET請求
GET http://google.com/ HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Host: google.com
Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]
瀏覽器以請求頭的形式向URL關聯的服務器發送一些元信息. User-Agent描述了瀏覽器的屬性, Accept-Encoding描述了可以接收的響應的類型.Connection告訴服務器保持已經建立的TCP連接. 請求也包含Cookies, 這是保存在客戶端的一些元信息, 它包含了之前瀏覽同一個站點的session信息, 這些session信息以鍵值對的形式保存. 例如: 登錄Google的用戶名.
Step 6. 服務器處理請求
瀏覽器包裝的HTTP請求被服務器上運行的特殊程序所處理, 常見的服務器有Apache和IIS等. web服務器把這些請求轉給合適的請求處理者處理
例如URL-http://edusagar.com/index.php被一個在PHP文件(index.php)寫入的程序所處理. 一旦GET請求被接收, Apache服務器部署了執行index.php文件的環境. 然后, 這個php程序將會產生一個響應-在本例中是一個HTML響應. 這個響應會根據HTTP協議被返回給瀏覽器.
Step 7. 瀏覽器收到HTTP響應
HTTP/1.1 200 OK
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Pragma: no-cache
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Connection: Keep-Alive
Content-length: 1215
Date: Fri, 30 May 2014 08:10:15 GMT
.........<some blob> ................
HTTP響應會標明服務器返回的狀態碼:
1xx 信息消息
2xx 響應成功
3xx 定位到其他URL
4xx 客戶端錯誤
5xx 服務端錯誤
服務端設定多種其他的響應頭幫助瀏覽器渲染合適的內容, Content-Typ告訴瀏覽器顯示何種類型的內容. Content-length表明響應的字節數. 根據Content-Encoding, 瀏覽器可以解析響應體的數據
Step 8. 瀏覽器顯示HTML內容
Rendering of html content is also done in phases.
渲染HTML內容也在這個階段完成
瀏覽器先渲染HTML的初略的框架, 然后發送多個GET請求去獲取其他內容. 例如: 如果一個HTML響應包含一張圖片<img src="/assets/img/logo.png" />的標簽, 瀏覽器將發送一個HTTP的GET請求到服務器去獲取這張圖片. 這個過程又會把整個流程再走一遍, 但其實情況并沒那么糟, 圖片, JS, CSS文件等, 這些靜態文件將被瀏覽器緩存, 下次就不用再去從服務器獲取了.
Step 9. 客戶端與服務器的交互
一旦HTML頁面被加載, 用戶就有多種途徑和服務器交互. 例如, 他可以填寫一個登錄表單登錄網站, 這同樣需要走上述的流程, 唯一的區別是這個HTTP請求是POST而不是GET, 服務器將發送表單數據到服務器去處理(本例中是用戶名和密碼)
一旦服務器給用戶授權, 它將會發送合適的HTML內容(可能是用戶的資料)返回給瀏覽器, 隱忍用戶可以在登錄請求處理之后看到新的頁面
Step 10 AJAX 查詢
另一種客戶端與服務器的交互是通過AJAX(Asynchronous JavaScript And XML)]請求, 這是一個異步的GET/POST請求, 服務器可以通過多種途徑返回響應json,xml,html等, AJAX請求不阻塞當前的頁面, 而是在后臺線程運行, 正因如此, 可以動態地通過發起AJAX請求去修改web頁面.
希望本文能夠對文章標題所提出的問題給予讀者一點提示
What happens when you type a URL in browser
