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