前言
? ? ? ? 登錄網(wǎng)站，是我們每個人每天都會做的事。從打開瀏覽器，在地址輸入框輸入URL，按下enter鍵回車，網(wǎng)站頁面就展示在我們面前。而這背后發(fā)生了什么，讓這個頁面得以展現(xiàn)在我們面前，是今天這篇博文想要說明的。
? ? ? ? 其實這個知識點，在大學(xué)的計算機導(dǎo)論課堂上也有過教授，通路是一時理解了，加上了解幾個概念也就算翻篇了。這兩天在課上聽老師講這個主題的時候，順帶勾起大學(xué)課堂上的記憶，加上2016年工作上有接觸到項目的后臺開發(fā)工作，在同事的幫助下使用MyBatis框架做了一些功能開發(fā)，對MVC流程有了更實際地接觸和理解，所以對這一主題，更有動筆的興趣。
一、URL是什么
? ? ? ? URL（Uniform Resource Locator），統(tǒng)一資源定位符，實際就是網(wǎng)站網(wǎng)址，又稱域名。在茫茫網(wǎng)絡(luò)世界中，瀏覽器就是靠URL來查找資源位置。URL包含協(xié)議部分，是瀏覽器和www萬維網(wǎng)之間的溝通方式，它會告訴瀏覽器正確在網(wǎng)路上找到資源位置。常見的協(xié)議有http、https、ftp、file、telnet等。其中http是最常見的網(wǎng)絡(luò)傳輸協(xié)議，而https則是進(jìn)行加密的網(wǎng)絡(luò)傳輸。
? ? ? ?IP的意義
? ? ? ?為了便于記憶或辨識，人們使用域名來登錄網(wǎng)站，每個域名背后有對應(yīng)的IP地址。每個網(wǎng)站就是靠IP來定位的。IP是因特網(wǎng)中的每臺連接到網(wǎng)絡(luò)的計算機為實現(xiàn)相互通信而遵循的規(guī)則協(xié)議。IP分為局域網(wǎng)IP和全網(wǎng)IP。辦公中常用的飛秋工具，就是使用辦公室局域網(wǎng)IP進(jìn)行通信的典型表現(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)上查找到，各省都有對應(yīng)分配不同的IP網(wǎng)段。大型企業(yè)會有自己的DNS服務(wù)器，專門存儲域名和IP的映射關(guān)系，例如為大多數(shù)人熟知的谷歌DNS服務(wù)器，地址8.8.8.8。
? ? ? ?DNS解析是瀏覽器的實際尋址方式。IP尋址過程復(fù)雜，涉及多層設(shè)備和概念知識。在此，我只簡單記錄兩種使用情況下的DNS解析方式，以作了解。
? ? ? ?情況1：對于瀏覽器首次登陸或者相隔一段時間內(nèi)登陸某個網(wǎng)站
? ? ? （1）輸入URL地址后，瀏覽器會從電腦C盤的hosts文件查找是否有存儲DNS信息，查找是否有目標(biāo)域名和對應(yīng)的IP地址；
? ? ? （2）從路由器的緩存DNS信息中查找；
? ? ? （3）ISP DNS緩存查找，從網(wǎng)絡(luò)服務(wù)商（比如電信）的DNS緩存信息中查找；
? ? ? （4）經(jīng)由以上三種查找方法還沒查找到目標(biāo)URL對應(yīng)的IP的話，就會向根域名DNS服務(wù)器查找目標(biāo)URL的對應(yīng)IP，根域名服務(wù)器會向下級服務(wù)器轉(zhuǎn)送請求，層層下發(fā)，直至找到對應(yīng)IP為止。
? ? ? ?情況2：對于近期內(nèi)有在瀏覽器登錄過的網(wǎng)站，本地瀏覽器會有DNS緩存，可以直接查找到IP地址。
? ? ? ?經(jīng)過以上IP尋址的過程，目標(biāo)URL查找到對應(yīng)的IP地址之后，通過IP地址查找到對應(yīng)的服務(wù)器，瀏覽器將用戶發(fā)起的http請求發(fā)送給服務(wù)器。下一步就到了服務(wù)器處理階段的工作。
三、服務(wù)器處理用戶請求
? ? ? ? 每臺服務(wù)器上都會安裝處理請求的應(yīng)用——web server。常見的web server產(chǎn)品有apache、nginx、IIS或Lighttpd等。
? ? ? ?web server 擔(dān)任管控的角色，對于不同用戶發(fā)送的請求，會結(jié)合配置文件，把不同請求委托給服務(wù)器上處理對應(yīng)請求的程序進(jìn)行處理（例如CGI腳本，JSP腳本，servlets，ASP腳本，服務(wù)器端JavaScript，或者一些其它的服務(wù)器端技術(shù)等），然后返回后臺程序處理產(chǎn)生的結(jié)果作為響應(yīng)。
? ? ? ? 服務(wù)器上程序處理用戶請求的這部分，就是下一步要講的網(wǎng)站處理階段的工作。
四、網(wǎng)站處理階段
? ? ? 網(wǎng)站處理，就是實際后臺處理的工作。后臺開發(fā)現(xiàn)在有很多框架，但大部分都還是按照MVC設(shè)計模式進(jìn)行搭建的。
? ? ? ?MVC是一個設(shè)計模式，將應(yīng)用程序分成三個核心部件：模型（model）-- 視圖（view）--控制器（controller），它們各自處理自己的任務(wù)，實現(xiàn)輸入、處理和輸出的分離。
? ? ? 1、視圖（view）
? ? ? 視圖是用戶看到并與之交互的界面。這是前端工作的主力部分。
? ? ? ?2、模型（model）
? ? ? ?模型是將實際開發(fā)中的業(yè)務(wù)規(guī)則和所涉及的數(shù)據(jù)格式模型化，應(yīng)用于模型的代碼只需寫一次就可以被多個視圖重用。在MVC的三個部件中，模型擁有最多的處理任務(wù)。一個模型能為多個視圖提供數(shù)據(jù)。
? ? ? ?3、控制器（controller）
? ? ? ?控制器接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求。Controller處于管理角色，從視圖接收請求并決定調(diào)用哪個模型構(gòu)件去處理請求，然后再確定用哪個視圖來顯示模型處理返回的數(shù)據(jù)。
? ? ? ?總結(jié)而言，首先控制器接收用戶的請求，并決定應(yīng)該調(diào)用哪個模型來進(jìn)行處理，然后模型用業(yè)務(wù)邏輯來處理用戶的請求并返回數(shù)據(jù)，最后控制器用相應(yīng)的視圖格式化模型返回html字符串給瀏覽器，瀏覽器呈現(xiàn)網(wǎng)頁給用戶。因此，下一步就來到瀏覽器處理階段。
五、瀏覽器處理
? ? ? ?通過后臺處理返回的html字符串結(jié)果會被瀏覽器讀取解析，對應(yīng)就是html頁面加載、解析、渲染的工作。
? ? ? ?1、加載
? ? ? ?瀏覽器對一個html頁面的加載順序是從上而下的，并在加載過程并行進(jìn)行解析渲染處理。在這個過程中遇到link標(biāo)簽、image標(biāo)簽、script標(biāo)簽時，瀏覽器會再次向服務(wù)器發(fā)送請求獲取css文件、圖片資源、js文件，并執(zhí)行js代碼，同步進(jìn)行加載解析。
? ? ? ? 2、解析、渲染
? ? ? ? 解析的過程，其實就是生成解析樹，即dom樹。dom樹是由dom元素及屬性節(jié)點組成，加上css解析的樣式對象和js解析后的動作實現(xiàn)。而渲染，就是將DOM樹進(jìn)行可視化表示。下一步就來到了繪制網(wǎng)頁的工作階段。
六、繪制網(wǎng)頁
? ? ? ?瀏覽器通過上面步驟計算得到渲染樹，是DOM樹的可視化表示，構(gòu)建渲染樹使頁面以正確的順序繪制出來，遵循一定的渲染規(guī)則，經(jīng)過一系列的渲染工作，實現(xiàn)網(wǎng)站頁面的繪制，由此最終完成了頁面展示。
后記
? ? ? ?以上就是從URL輸入到頁面展示的全部過程。寫這篇文章的過程，在網(wǎng)上查閱了相關(guān)的資料，就為了對過程中步驟的表述能夠準(zhǔn)確。在查閱的過程，發(fā)現(xiàn)每個小點鋪開來講的話，都會牽扯出很多知識點要談。這篇文章，只能是淺談中的淺談。學(xué)習(xí)無止境，新一年繼續(xù)努力！
