輸入url到渲染出頁面的過程

輸入地址

瀏覽器查找域名的 IP 地址

這一步包括 DNS 具體的查找過程，包括：瀏覽器緩存->系統緩存->路由器緩存...

瀏覽器向 web 服務器發送一個 HTTP 請求

服務器的永久重定向響應（從 http://example.com 到 http://www.example.com）

瀏覽器跟蹤重定向地址

服務器處理請求

服務器返回一個 HTTP 響應

瀏覽器顯示 HTML

瀏覽器發送請求獲取嵌入在 HTML 中的資源（如圖片、音頻、視頻、CSS、JS等等）

瀏覽器發送異步請求

 

 

 

一、咱們開始在瀏覽器中輸入網址的時候，瀏覽器其實就已經在智能的匹配可能得 url 了，他會從歷史記錄，書籤等地方，找到已經輸入的字符串可能對應的 url，而後給出智能提示。

二、在例如輸入了 baidu 或者 qq 之類的域名後，咱們能夠按下 ctrl + enter ，來自動補全，生成 qq.com 或者 baidu.com 的網址，而後發起請求。請求一旦發起，瀏覽器首先要作的事情就是解析這個域名，通常來講，瀏覽器會首先查看本地硬盤的 hosts 文件，看看其中有沒有和這個域名對應的規則，若是有的話就直接使用 hosts 文件裏面的 ip 地址，說道這裏，你們可能想到，這個地方就存在安全隱患了，若是有病毒把一些經常使用的域名，修改 hosts  文件，指向一些惡意的 ip，那麼瀏覽器也會不加判斷的去鏈接，是的，這正是不少病毒的慣用手法。若是在本地的 hosts 文件沒有可以找到對應的 ip 地址，瀏覽器會向 dns 域名解析服務器發起域名解析請求，dns 的域名解析是遞歸的，（還有另外 dns 是迭代的），遞歸的 dns 首先會查看本身的 dns 緩存，若是緩存可以命中，那麼就從緩存中把 ip 地址返回給瀏覽器，若是找不到對應的域名的 ip 地址，那麼就向上轉發請求，無論怎麼說，這個遞歸查詢的過程，對於瀏覽器來講是透明的，他只要坐等 ip地址送回來就能夠了。

三、獲得 ip 地址後，瀏覽器會開始構造一個 http 請求，一個典型的 http request header 通常須要包括請求的方法，例如 GET 或者 POST 等，不經常使用的還有 PUT 和 DELETE 方法，更加不經常使用的還有 HEAD 和 OPTION 以及 TRACE 方法，通常的瀏覽器只能發起 GET 或者 POST 請求，

應用層的 http 請求準備好後，

瀏覽器在傳輸層發起一條到達服務器的 tcp 鏈接，這個時候應該開始三次握手的過程，tcp 包被封裝到網絡層的 ip 包裏面，ip 包再被封裝到數據鏈路層的數據幀結構中，再經過物理層的比特流送出去，這些分層的意義在於分工合做，數據鏈路層經過 CSMA/CD 協議保證了相鄰兩臺主機之間的數據報文傳遞，而網絡層的 ip 數據包經過不一樣子網之間的路由器的路由算法和路由轉發，保證了互聯網上兩臺遙遠主機之間的點對點的通信，不過這種傳輸不可靠，因而可靠性就由傳輸層的 tcp 協議來保證，tcp 經過慢開始，乘法減少等手段來進行流量控制和擁塞避免，同時提供了兩臺遙遠主機上進程到進程的通訊，最終保證了 http 的請求頭可以被遠方的服務器上正在監聽的 http 服務器進程收到，終於，數據包在跳與跳之間被拆了又封裝，在子網與子網之間被轉發了又轉發，最後進入了服務器的操做系統的緩衝區，服務器的操做系統由此給正在被阻塞住的 accept 函數一個返回，將他喚醒。

四、http 服務器首先會查看重寫規則，而後若是是文件真實存在，例如一些圖片，或者 css js 等的靜態文件，就會直接把這個文件返回

五、歷經千辛萬苦，咱們請求的響應終於到達了客戶端的瀏覽器，響應到達瀏覽器以後，瀏覽器首先判斷狀態碼，若是是 200 開頭的就好辦，直接進入渲染流程，若是是 300 開頭的就要去相應頭裏面找 location 域，根據這個 location 的指引，進行跳轉，這裏跳轉須要開啓一個跳轉計數器，是爲了不兩個或者多個頁面之間造成的循環的跳轉，當跳轉次數過多以後，瀏覽器會報錯，同時中止。若是是 400 開頭或者 500 開頭的狀態碼，瀏覽器也會給出一個錯誤頁面。

當瀏覽獲得一個正確的 200 響應以後，接下來面臨的一個問題就是多國語言的編碼解析了。

六、解決了字符集的問題，接下來就是構建 dom 樹了，構建出來的 dom 本質上仍是一棵抽象的邏輯樹，構建 dom 樹的過程當中，若是遇到了由 script 標籤包起來的 js 動態腳本代碼，那麼會把代碼送到 js 引擎裏面去跑，若是遇到了 style 標籤包圍起來的 css 代碼，也會保存下來，用於稍後的渲染。若是遇到了 img 等引用外部文件的標籤，那麼瀏覽器會根據指定的 url 再次發起一個新的 http 請求，去把這個文件拉取回來，值得一提的是，對於同一個域名下的下載過程來講，瀏覽器通常容許的併發請求是有限的，一般控制在兩個左右，因此若是有不少的圖片的話，通常出於優化的目的，都會把這些圖片使用一臺靜態文件的服務器來保存起來，負責響應，從而減小主服務器的壓力。

七、dom 樹構造好了以後，就是根據 dom 樹和 css 樣式表來構造 render 樹了，這個纔是真正的用於渲染到頁面上的一個一個的矩形框的樹，對於 render 樹上每個框，須要肯定他的 x y 座標，尺寸，邊框，字體，形態，等等諸多方面的東西，render 樹一旦構建完成，整個頁面也就準備好了。

須要說明的是，下載頁面，構建 dom 樹，構建 render 樹這三個步驟，實際上並非嚴格的前後順序的，爲了加快速度，提升效率，讓用戶不要等那麼久，如今通常都並行的往前推動的，現代的瀏覽器都是一邊下載，下載到了一點數據就開始構建 dom 樹，也一邊開始構建 render 樹，構建了一點就顯示一點出來，這樣用戶看起來就不用等待那麼久了。