當我們在浏覽器輸入網址并回車後，一切從這裡開始。
我們在浏覽器輸入網址，其實就是要向伺服器請求我們想要的頁面内容，所有浏覽器首先要确認的是域名所對應的伺服器在哪裡。将域名解析成對應的伺服器IP位址這項工作，是由DNS伺服器來完成的。
用戶端收到你輸入的域名位址後，它首先去找本地的hosts檔案，檢查在該檔案中是否有相應的域名、IP對應關系，如果有，則向其IP位址發送請求，如果沒有，再去找DNS伺服器。一般使用者很少去編輯修改hosts檔案。
DNS伺服器層次結構
浏覽器用戶端向本地DNS伺服器發送一個含有域名www.cnblogs.com的DNS查詢封包。本地DNS伺服器把查詢封包轉發到根DNS伺服器，根DNS伺服器注意到其com字尾，于是向本地DNS伺服器傳回comDNS伺服器的IP位址。本地DNS伺服器再次向comDNS伺服器發送查詢請求，comDNS伺服器注意到其www.cnblogs.com字尾并用負責該域名的權威DNS伺服器的IP位址作為回應。最後，本地DNS伺服器将含有www.cnblogs.com的IP位址的響應封包發送給用戶端。
從用戶端到本地伺服器屬于遞歸查詢，而DNS伺服器之間的互動屬于疊代查詢。 正常情況下，本地DNS伺服器的緩存中已有comDNS伺服器的位址，是以請求根域名伺服器這一步不是必需的。
費了一頓周折終于拿到伺服器IP了，下一步自然就是連結到該伺服器。對于用戶端與伺服器的TCP連結，必然要說的就是『三次握手』。
三次握手
用戶端發送一個帶有SYN标志的資料包給服務端，服務端收到後，回傳一個帶有SYN/ACK标志的資料包以示傳達确認資訊，最後用戶端再回傳一個帶ACK标志的資料包，代表握手結束，連接配接成功。
上圖也可以這麼了解：
用戶端：“你好，在家不，有你快遞。”
服務端：“在的，送來就行。”
用戶端：“好嘞。”
與伺服器建立了連接配接後，就可以向伺服器發起請求了。這裡我們先看下請求封包的結構（如下圖）：
請求封包
在浏覽器中檢視封包首部（以google浏覽器為例）：
請求行包括請求方法、URI、HTTP版本。首部字段傳遞重要資訊，包括請求首部字段、通用首部字段和實體首部字段。我們可以從封包中看到發出的請求的具體資訊。具體每個首部字段的作用，這裡不做過多闡述。
伺服器端收到請求後的由web伺服器（準确說應該是http伺服器）處理請求，諸如Apache、Ngnix、IIS等。web伺服器解析使用者請求，知道了需要排程哪些資源檔案，再通過相應的這些資源檔案處理使用者請求和參數，并調用資料庫資訊，最後将結果通過web伺服器傳回給浏覽器用戶端。
伺服器處理請求
在HTTP裡，有請求就會有響應，哪怕是錯誤資訊。這裡我們同樣看下響應封包的組成結構：
響應封包
在響應結果中都會有個一個HTTP狀态碼，比如我們熟知的200、301、404、500等。通過這個狀态碼我們可以知道伺服器端的處理是否正常，并能了解具體的錯誤。
狀态碼由3位數字和原因短語組成。根據首位數字，狀态碼可以分為五類：
狀态碼類别
為了避免伺服器與用戶端雙方的資源占用和損耗，當雙方沒有請求或響應傳遞時，任意一方都可以發起關閉請求。與建立TCP連接配接的3次握手類似，關閉TCP連接配接，需要4次握手。
4次握手
上圖可以這麼了解：
用戶端：“兄弟，我這邊沒資料要傳了，咱關閉連接配接吧。”
服務端：“收到，我看看我這邊有木有資料了。”
服務端：“兄弟，我這邊也沒資料要傳你了，咱可以關閉連接配接了。”
準确地說，浏覽器需要加載解析的不僅僅是HTML，還包括CSS、JS。以及還要加載圖檔、視訊等其他媒體資源。
浏覽器通過解析HTML，生成DOM樹，解析CSS，生成CSS規則樹，然後通過DOM樹和CSS規則樹生成渲染樹。渲染樹與DOM樹不同，渲染樹中并沒有head、display為none等不必顯示的節點。
要注意的是，浏覽器的解析過程并非是串連進行的，比如在解析CSS的同時，可以繼續加載解析HTML，但在解析執行JS腳本時，會停止解析後續HTML，這就會出現阻塞問題，關于JS阻塞相關問題，這裡不過多闡述,後面會單獨開篇講解。
根據渲染樹布局，計算CSS樣式，即每個節點在頁面中的大小和位置等幾何資訊。HTML預設是流式布局的，CSS和js會打破這種布局，改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念：replaint和reflow。
replaint：螢幕的一部分重畫，不影響整體布局，比如某個CSS的背景色變了，但元素的幾何尺寸和位置不變。 reflow： 意味着元件的幾何尺寸變了，我們需要重新驗證并計算渲染樹。是渲染樹的一部分或全部發生了變化。這就是Reflow，或是Layout。
是以我們應該盡量減少reflow和replaint，我想這也是為什麼現在很少有用table布局的原因之一。
最後浏覽器繪制各個節點，将頁面展示給使用者。
更多技術分享，歡迎關注『網站建設運維百科』
參考： http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ http://taligarsiel.com/Projects/howbrowserswork1.htm https://www.zhihu.com/question/34873227 圖檔制作工具：Axure、PS、 Ulead GIF Animator、 ProcessOn