前言
? ? ? ? 登錄網(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)絡(luò)世界中，瀏覽器就是靠URL來查找資源位置猾担。URL包含協(xié)議部分，是瀏覽器和www萬維網(wǎng)之間的溝通方式刺下，它會告訴瀏覽器正確在網(wǎng)路上找到資源位置绑嘹。常見的協(xié)議有http、https橘茉、ftp工腋、file、telnet等畅卓。其中http是最常見的網(wǎng)絡(luò)傳輸協(xié)議擅腰，而https則是進行加密的網(wǎng)絡(luò)傳輸。
? ? ? ?IP的意義
? ? ? ?為了便于記憶或辨識翁潘，人們使用域名來登錄網(wǎ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進行通信的典型表現(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的映射關(guān)系有送，例如為大多數(shù)人熟知的谷歌DNS服務器，地址8.8.8.8僧家。
? ? ? ?DNS解析是瀏覽器的實際尋址方式雀摘。IP尋址過程復雜，涉及多層設(shè)備和概念知識八拱。在此阵赠，我只簡單記錄兩種使用情況下的DNS解析方式，以作了解肌稻。
? ? ? ?情況1：對于瀏覽器首次登陸或者相隔一段時間內(nèi)登陸某個網(wǎng)站
? ? ? （1）輸入URL地址后清蚀，瀏覽器會從電腦C盤的hosts文件查找是否有存儲DNS信息，查找是否有目標域名和對應的IP地址爹谭；
? ? ? （2）從路由器的緩存DNS信息中查找枷邪；
? ? ? （3）ISP DNS緩存查找，從網(wǎng)絡(luò)服務商（比如電信）的DNS緩存信息中查找诺凡；
? ? ? （4）經(jīng)由以上三種查找方法還沒查找到目標URL對應的IP的話东揣，就會向根域名DNS服務器查找目標URL的對應IP，根域名服務器會向下級服務器轉(zhuǎn)送請求腹泌，層層下發(fā)嘶卧，直至找到對應IP為止。
? ? ? ?情況2：對于近期內(nèi)有在瀏覽器登錄過的網(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ā)送的請求瘾蛋，會結(jié)合配置文件，把不同請求委托給服務器上處理對應請求的程序進行處理（例如CGI腳本矫限，JSP腳本哺哼，servlets，ASP腳本叼风，服務器端JavaScript取董，或者一些其它的服務器端技術(shù)等），然后返回后臺程序處理產(chǎn)生的結(jié)果作為響應无宿。
? ? ? ? 服務器上程序處理用戶請求的這部分茵汰，就是下一步要講的網(wǎng)站處理階段的工作。
四孽鸡、網(wǎng)站處理階段
? ? ? 網(wǎng)站處理蹂午，就是實際后臺處理的工作。后臺開發(fā)現(xiàn)在有很多框架彬碱，但大部分都還是按照MVC設(shè)計模式進行搭建的豆胸。
? ? ? ?MVC是一個設(shè)計模式，將應用程序分成三個核心部件：模型（model）-- 視圖（view）--控制器（controller）巷疼，它們各自處理自己的任務晚胡，實現(xiàn)輸入、處理和輸出的分離皮迟。
? ? ? 1搬泥、視圖（view）
? ? ? 視圖是用戶看到并與之交互的界面桑寨。這是前端工作的主力部分伏尼。
? ? ? ?2、模型（model）
? ? ? ?模型是將實際開發(fā)中的業(yè)務規(guī)則和所涉及的數(shù)據(jù)格式模型化尉尾，應用于模型的代碼只需寫一次就可以被多個視圖重用爆阶。在MVC的三個部件中，模型擁有最多的處理任務。一個模型能為多個視圖提供數(shù)據(jù)辨图。
? ? ? ?3班套、控制器（controller）
? ? ? ?控制器接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求。Controller處于管理角色故河，從視圖接收請求并決定調(diào)用哪個模型構(gòu)件去處理請求吱韭，然后再確定用哪個視圖來顯示模型處理返回的數(shù)據(jù)。
? ? ? ?總結(jié)而言鱼的，首先控制器接收用戶的請求理盆，并決定應該調(diào)用哪個模型來進行處理，然后模型用業(yè)務邏輯來處理用戶的請求并返回數(shù)據(jù)凑阶，最后控制器用相應的視圖格式化模型返回html字符串給瀏覽器猿规，瀏覽器呈現(xiàn)網(wǎng)頁給用戶。因此宙橱，下一步就來到瀏覽器處理階段姨俩。
五、瀏覽器處理
? ? ? ?通過后臺處理返回的html字符串結(jié)果會被瀏覽器讀取解析师郑，對應就是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樹的可視化表示，構(gòu)建渲染樹使頁面以正確的順序繪制出來扶歪，遵循一定的渲染規(guī)則理肺，經(jīng)過一系列的渲染工作，實現(xiàn)網(wǎng)站頁面的繪制善镰，由此最終完成了頁面展示哲嘲。
后記
? ? ? ?以上就是從URL輸入到頁面展示的全部過程。寫這篇文章的過程媳禁，在網(wǎng)上查閱了相關(guān)的資料眠副，就為了對過程中步驟的表述能夠準確。在查閱的過程竣稽，發(fā)現(xiàn)每個小點鋪開來講的話囱怕，都會牽扯出很多知識點要談。這篇文章毫别，只能是淺談中的淺談娃弓。學習無止境，新一年繼續(xù)努力岛宦！
