最近開始學習前端，看了網上許多相關的文章，老師和已工作的朋友也都證實，“在瀏覽器中輸入URL到整個頁面顯示在用戶面前時這個過程中到底發生了什么”是繞不開的面試題之一。如果我被面試到這個題目，該如何回答呢？所以我來自問自答一番。
這個過程分為以下幾個步驟：
1.域名解析
這里首先解釋3個名詞：
URL（Uniform Resource Locator）
統一資源定位符，即域名，也就是我們常說的網址。比如http://www.baidu.com 就是百度網站的URL。http超文字傳輸通訊協定是WWW萬維網和瀏覽器最主要的溝通方式。www.google.com指服務器地址，必要時會加上端口號若為HTTP的默認值“:80”可省略。在WWW中想要連結到某個網頁，便需要給瀏覽器一個位址，而URL在此的功能就是告知瀏覽器某個資源在哪個位置。IP地址
IP是因特網中的每臺連接到網絡的計算機為實現相互通信而遵循的規則協議。互聯網上每一臺計算機的唯一標識是它的IP地址，形如202.108.22.5，IP地址并不方便記憶。 為了便于記憶或辨識，用戶使用域名來登錄網站，每個域名背后有對應的IP地址。每個網站就是靠IP來定位的。瀏覽器并不能識別URL是什么，因此URL輸入后，瀏覽器首先要做得是域名解析。DNS
DNS（Domain Name System，域名系統）是互聯網的一項服務。 它作為將域名和IP地址相互映射的一個分布式數據庫，能夠使人更方便地訪問互聯網。DNS實際上充當了一個翻譯的角色，實現了網址到IP地址的轉換。
了解這幾點，再講網址到IP地址轉換的過程就很容易理解了。
瀏覽器首次登陸或者相隔一段時間內登陸某個網站，解析過程如下：
（1）輸入URL地址后，瀏覽器會從電腦C盤的hosts文件查找是否有存儲DNS信息，查找是否有目標域名和對應的IP地址；
（2）從路由器的緩存DNS信息中查找；
（3）ISP DNS緩存查找，從網絡服務商（比如電信）的DNS緩存信息中查找；
（4）經由以上三種查找方法還沒查找到目標URL對應的IP的話，就會向根域名DNS服務器查找目標URL的對應IP，根域名服務器會向下級服務器轉送請求，層層下發，直至找到對應IP并把它緩存到本地，供下次查詢使用。
如果是近期登陸過的網站，本地瀏覽器會有DNS緩存，可以直接查找到IP地址。知道IP地址之后，通過IP地址查找到對應的服務器，瀏覽器將用戶發起的http請求發送給服務器。
2.服務器處理用戶請求
服務器是一臺安裝系統的機器。常見的服務器有Linux、Windows server 2012等。系統里安裝的處理請求的軟件叫Web server。
Web server是一個統一管控的工具。結合配置文件，Web server把接收到的用戶請求交給網站代碼，或者接受請求反向代理到其他Web server，然后返回后才程序處理的結果。
3.網站處理流程
網站處理，就是實際后臺處理的工作。后臺開發現在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。
MVC是一個設計模式，將應用程序分成三個核心部件：模型（model）-- 視圖（view）--控制器（controller），它們各自處理自己的任務，實現輸入、處理和輸出的分離。
（1）視圖（view）
視圖是用戶看到并與之交互的界面。這是前端工作的主要部分。
（2）模型（model）
模型是將實際開發中的業務規則和所涉及的數據格式模型化，應用于模型的代碼只需寫一次就可以被多個視圖重用。在MVC的三個部件中，模型擁有最多的處理任務。一個模型能為多個視圖提供數據。
（3）控制器（controller）
控制器接受用戶的輸入并調用模型和視圖去完成用戶的需求。Controller處于管理角色，從視圖接收請求并決定調用哪個模型構件去處理請求，然后再確定用哪個視圖來顯示模型處理返回的數據。
總結而言，首先控制器接收用戶的請求，并決定應該調用哪個模型來進行處理，然后模型用業務邏輯來處理用戶的請求并返回數據，最后控制器用相應的視圖格式化模型返回html字符串給瀏覽器，瀏覽器呈現網頁給用戶。因此，下一步就來到瀏覽器處理階段。
4.瀏覽器處理
通過后臺處理返回的html字符串結果會被瀏覽器讀取解析，對應就是html頁面加載、解析、渲染的工作。
（1）加載
HTML字符串被瀏覽器接受后被一句句讀取解析，解析到link 標簽后重新發送請求獲取css；解析到 script標簽后發送請求獲取 js，并執行代碼；解析到img 標簽后發送請求獲取圖片資源。并同步進行加載解析。
（2）解析、渲染
解析的過程，其實就是生成解析樹，即dom樹。dom樹是由dom元素及屬性節點組成，加上css解析的樣式對象和js解析后的動作實現。而渲染，就是將DOM樹進行可視化表示。下一步就來到了繪制網頁的工作階段。
5.繪制網頁
瀏覽器根據 HTML 和 CSS 計算得到渲染樹，繪制到屏幕上，js 會被執行，由此最終完成了頁面展示。
總結
這篇文章寫得很糾結，很多步驟我自己心里知道是那么回事，但沒有能力用自己的語言表述出來，只會照本宣科地把自己學的內容搬過來。這也跟我的計算機基礎比較薄弱有關，以后會注意加強這一塊的補充，把知識潛移默化到自己頭腦中。
