前言

? ? ? ? 登錄網(wǎng)站，是我們每個人每天都會做的事。從打開瀏覽器，在地址輸入框輸入URL，按下enter鍵回車，網(wǎng)站頁面就展示在我們面前。而這背后發(fā)生了什么，讓這個頁面得以展現(xiàn)在我們面前，是今天這篇博文想要說明的。

? ? ? ? 其實這個知識點，在大學的計算機導論課堂上也有過教授，通路是一時理解了，加上了解幾個概念也就算翻篇了。這兩天在課上聽老師講這個主題的時候，順帶勾起大學課堂上的記憶，加上2016年工作上有接觸到項目的后臺開發(fā)工作，在同事的幫助下使用MyBatis框架做了一些功能開發(fā)，對MVC流程有了更實際地接觸和理解，所以對這一主題，更有動筆的興趣。

一、URL是什么

? ? ? ? URL（Uniform Resource Locator），統(tǒng)一資源定位符，實際就是網(wǎng)站網(wǎng)址，又稱域名。在茫茫網(wǎng)絡世界中，瀏覽器就是靠URL來查找資源位置。URL包含協(xié)議部分，是瀏覽器和www萬維網(wǎng)之間的溝通方式，它會告訴瀏覽器正確在網(wǎng)路上找到資源位置。常見的協(xié)議有http、https、ftp、file、telnet等。其中http是最常見的網(wǎng)絡傳輸協(xié)議，而https則是進行加密的網(wǎng)絡傳輸。

? ? ? ?IP的意義

? ? ? ?為了便于記憶或辨識，人們使用域名來登錄網(wǎng)站，每個域名背后有對應的IP地址。每個網(wǎng)站就是靠IP來定位的。IP是因特網(wǎng)中的每臺連接到網(wǎng)絡的計算機為實現(xiàn)相互通信而遵循的規(guī)則協(xié)議。IP分為局域網(wǎng)IP和全網(wǎng)IP。辦公中常用的飛秋工具，就是使用辦公室局域網(wǎng)IP進行通信的典型表現(xiàn)。每臺計算機的本機IP都是127.0.0.1（即localhost）。瀏覽器并不能識別URL是什么，因此從輸入URL開始，瀏覽器就要做域名解析，也就是IP尋址的工作。

二、IP尋址過程簡述

? ? ? ?這里先說明DNS概念

? ? ? ?DNS（Domain Name System，域名系統(tǒng)）——記錄域名和IP地址相互映射的信息，人們可以免于記住IP數(shù)串。全國DNS信息可在網(wǎng)上查找到，各省都有對應分配不同的IP網(wǎng)段。大型企業(yè)會有自己的DNS服務器，專門存儲域名和IP的映射關系，例如為大多數(shù)人熟知的谷歌DNS服務器，地址8.8.8.8。

? ? ? ?DNS解析是瀏覽器的實際尋址方式。IP尋址過程復雜，涉及多層設備和概念知識。在此，我只簡單記錄兩種使用情況下的DNS解析方式，以作了解。

? ? ? ?情況1：對于瀏覽器首次登陸或者相隔一段時間內登陸某個網(wǎng)站

? ? ? （1）輸入URL地址后，瀏覽器會從電腦C盤的hosts文件查找是否有存儲DNS信息，查找是否有目標域名和對應的IP地址；

? ? ? （2）從路由器的緩存DNS信息中查找；

? ? ? （3）ISP DNS緩存查找，從網(wǎng)絡服務商（比如電信）的DNS緩存信息中查找；

? ? ? （4）經(jīng)由以上三種查找方法還沒查找到目標URL對應的IP的話，就會向根域名DNS服務器查找目標URL的對應IP，根域名服務器會向下級服務器轉送請求，層層下發(fā)，直至找到對應IP為止。

? ? ? ?情況2：對于近期內有在瀏覽器登錄過的網(wǎng)站，本地瀏覽器會有DNS緩存，可以直接查找到IP地址。

? ? ? ?經(jīng)過以上IP尋址的過程，目標URL查找到對應的IP地址之后，通過IP地址查找到對應的服務器，瀏覽器將用戶發(fā)起的http請求發(fā)送給服務器。下一步就到了服務器處理階段的工作。

三、服務器處理用戶請求

? ? ? ? 每臺服務器上都會安裝處理請求的應用——web server。常見的web server產(chǎn)品有apache、nginx、IIS或Lighttpd等。

? ? ? ?web server 擔任管控的角色，對于不同用戶發(fā)送的請求，會結合配置文件，把不同請求委托給服務器上處理對應請求的程序進行處理（例如CGI腳本，JSP腳本，servlets，ASP腳本，服務器端JavaScript，或者一些其它的服務器端技術等），然后返回后臺程序處理產(chǎn)生的結果作為響應。

? ? ? ? 服務器上程序處理用戶請求的這部分，就是下一步要講的網(wǎng)站處理階段的工作。

四、網(wǎng)站處理階段

? ? ? 網(wǎng)站處理，就是實際后臺處理的工作。后臺開發(fā)現(xiàn)在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。

? ? ? ?MVC是一個設計模式，將應用程序分成三個核心部件：模型（model）-- 視圖（view）--控制器（controller），它們各自處理自己的任務，實現(xiàn)輸入、處理和輸出的分離。

? ? ? 1、視圖（view）

? ? ? 視圖是用戶看到并與之交互的界面。這是前端工作的主力部分。

? ? ? ?2、模型（model）

? ? ? ?模型是將實際開發(fā)中的業(yè)務規(guī)則和所涉及的數(shù)據(jù)格式模型化，應用于模型的代碼只需寫一次就可以被多個視圖重用。在MVC的三個部件中，模型擁有最多的處理任務。一個模型能為多個視圖提供數(shù)據(jù)。

? ? ? ?3、控制器（controller）

? ? ? ?控制器接受用戶的輸入并調用模型和視圖去完成用戶的需求。Controller處于管理角色，從視圖接收請求并決定調用哪個模型構件去處理請求，然后再確定用哪個視圖來顯示模型處理返回的數(shù)據(jù)。

? ? ? ?總結而言，首先控制器接收用戶的請求，并決定應該調用哪個模型來進行處理，然后模型用業(yè)務邏輯來處理用戶的請求并返回數(shù)據(jù)，最后控制器用相應的視圖格式化模型返回html字符串給瀏覽器，瀏覽器呈現(xiàn)網(wǎng)頁給用戶。因此，下一步就來到瀏覽器處理階段。

五、瀏覽器處理

? ? ? ?通過后臺處理返回的html字符串結果會被瀏覽器讀取解析，對應就是html頁面加載、解析、渲染的工作。

? ? ? ?1、加載

? ? ? ?瀏覽器對一個html頁面的加載順序是從上而下的，并在加載過程并行進行解析渲染處理。在這個過程中遇到link標簽、image標簽、script標簽時，瀏覽器會再次向服務器發(fā)送請求獲取css文件、圖片資源、js文件，并執(zhí)行js代碼，同步進行加載解析。

? ? ? ? 2、解析、渲染

? ? ? ? 解析的過程，其實就是生成解析樹，即dom樹。dom樹是由dom元素及屬性節(jié)點組成，加上css解析的樣式對象和js解析后的動作實現(xiàn)。而渲染，就是將DOM樹進行可視化表示。下一步就來到了繪制網(wǎng)頁的工作階段。

六、繪制網(wǎng)頁

? ? ? ?瀏覽器通過上面步驟計算得到渲染樹，是DOM樹的可視化表示，構建渲染樹使頁面以正確的順序繪制出來，遵循一定的渲染規(guī)則，經(jīng)過一系列的渲染工作，實現(xiàn)網(wǎng)站頁面的繪制，由此最終完成了頁面展示。

后記

? ? ? ?以上就是從URL輸入到頁面展示的全部過程。寫這篇文章的過程，在網(wǎng)上查閱了相關的資料，就為了對過程中步驟的表述能夠準確。在查閱的過程，發(fā)現(xiàn)每個小點鋪開來講的話，都會牽扯出很多知識點要談。這篇文章，只能是淺談中的淺談。學習無止境，新一年繼續(xù)努力！