前言
扯一扯從你輸入網址到網頁呈現發生了什么。
一. 輸入URL
URL(Uniform Resource Locator)，統一資源定位符,它是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。它也包含協議部分，是瀏覽器和萬維網之間溝通的方式，常見的協議有http、https、ftp、file····
二 .域名的解析
當你輸入http://baidu.com時，實際上瀏覽器并不知道baidu.com是什么東西，它需要查找baidu.com的所在服務器的IP地址才能找到目標。
1.什么是域名
例如在http://baidu.com中，baidu.com就是該網址的域名。
2.為什么不直接使用IP地址而發明域名
因為域名比一串數字的IP地址更容易記住，所以使用域名。
3.IP地址是什么
IP地址是指互聯網協議地址（Internet Protocol Address）。IP地址是IP協議提供的一種統一的地址格式，它為互聯網上的每一個網絡和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差異。
- 每個網絡上的設備都有IP地址例如
192.168.0.1。 - 局域網的IP地址和公網的IP地址是有差異的。
-
127.0.0.1代表本機的IP地址。
4.域名解析的流程
- 瀏覽器會自動緩存DNS記錄一段時間，瀏覽器會檢查緩存中有沒有這個域名對應的解析過的IP地址，如果有解析過程就此結束。
- 系統緩存，從系統Hosts文件中查找是否有該域名和對應的IP。
- 路由器緩存，一般路由器也會緩存域名信息。
- IPS DNS緩存- 比如到電信的DNS 上查找緩存。
- 如果以上方法都沒有找到，則向根域名服務器查找對應的IP地址，根域名服務器把請求轉發到下一級，一直到找到IP。
問：當電腦上不了網了，為什么修改DNS為
8.8.8.8或者114.114.114.114?
答：
8.8.8.8是谷歌提供的DNS服務器，跳過上述步驟1-5，直接在谷歌提供的DNS服務器里查找該域名。同理114.114.114.114是電信提供的DNS服務器。
經過以上IP尋址的過程，目標URL查找到對應的IP地址之后，通過IP地址查找到對應的服務器，瀏覽器將用戶發起的http請求發送給服務器。下一步就到了服務器處理階段的工作。
三.服務器處理
每臺服務器上都會安裝處理請求的應用web server，常見的web server產品有Apache、Nginx、IIS、Lighttpd····
web server 擔任管控的角色，對于不同用戶發送的請求，會結合配置文件，把不同請求委托給服務器上處理對應請求的程序進行處理（例如CGI腳本，JSP腳本，servlets，ASP腳本，Node.js，或者一些其它的服務器端技術等），然后返回后臺程序處理產生的結果作為響應。
四.網站處理階段
MVC
MVC是一種使用MVC（Model-View-Control 模型-視圖-控制器）設計創建web程序的模式。
- Model（模型）模型是將實際開發中的業務規則和所涉及的數據格式模型化，應用于模型的代碼只需寫一次就可以被多個視圖重用。在MVC的三個部件中，模型擁有最多的處理任務。一個模型能為多個視圖提供數據。*
- View（視圖）是應用程序中用于處理程序數據邏輯部分。
- Control（控制器）控制器接受用戶的輸入并調用模型和視圖去完成用戶的需求。Controller處于管理角色，從視圖接收請求并決定調用哪個模型構件去處理請求，然后再確定用哪個視圖來顯示模型處理返回的數據。
總結而言，首先控制器接收用戶的請求，并決定應該調用哪個模型來進行處理，然后模型用業務邏輯來處理用戶的請求并返回數據，最后控制器用相應的視圖格式化模型返回html字符串給瀏覽器，瀏覽器呈現網頁給用戶。因此，下一步就來到瀏覽器處理階段。
瀏覽器處理
HTML字符串被瀏覽器接受后被一句句讀取解析，解析到link 標簽后重新發送請求獲取css，解析到，script標簽后發送請求獲取 js，并執行代碼，解析到img 標簽后發送請求獲取圖片資源。
加載
瀏覽器對html頁面的加載是自頂向下的，并在加載的過程中進行解析與渲染。遇到link，image，script標簽時瀏覽器會再次向服務器發送請求獲取相應的css文件，圖片文件，js文件，并執行js代碼。
解析與渲染
將html文檔解析生成解析樹（DOM樹），這是由DOM元素以及屬性節點組成，樹根是document對象。
構建渲染樹是DOM樹可視化的表示，目的是為了以正確的順序繪制文檔內容。不可見的DOM元素不會被插入渲染樹中（例如display:none;）,還有像一些節點的位置為絕對或浮動定位，這些節點會在文本流之外，因此會在兩棵樹上的不同位置，渲染樹標識出真實的位置，并用一個占位結構標識出他們原來的位置。
六. 繪制網站
瀏覽器根據渲染樹繪制網站并最終展現在瀏覽器上。
