最近開始學(xué)習(xí)前端筋量，看了網(wǎng)上許多相關(guān)的文章烹吵，老師和已工作的朋友也都證實(shí)碉熄，“在瀏覽器中輸入U(xiǎn)RL到整個(gè)頁(yè)面顯示在用戶面前時(shí)這個(gè)過程中到底發(fā)生了什么”是繞不開的面試題之一。如果我被面試到這個(gè)題目肋拔，該如何回答呢锈津？所以我來自問自答一番。
這個(gè)過程分為以下幾個(gè)步驟：
1.域名解析
這里首先解釋3個(gè)名詞：
URL（Uniform Resource Locator）
統(tǒng)一資源定位符凉蜂，即域名琼梆，也就是我們常說的網(wǎng)址。比如http://www.baidu.com 就是百度網(wǎng)站的URL窿吩。http超文字傳輸通訊協(xié)定是WWW萬維網(wǎng)和瀏覽器最主要的溝通方式茎杂。www.google.com指服務(wù)器地址，必要時(shí)會(huì)加上端口號(hào)若為HTTP的默認(rèn)值“:80”可省略纫雁。在WWW中想要連結(jié)到某個(gè)網(wǎng)頁(yè)煌往，便需要給瀏覽器一個(gè)位址，而URL在此的功能就是告知瀏覽器某個(gè)資源在哪個(gè)位置轧邪。IP地址
IP是因特網(wǎng)中的每臺(tái)連接到網(wǎng)絡(luò)的計(jì)算機(jī)為實(shí)現(xiàn)相互通信而遵循的規(guī)則協(xié)議刽脖。互聯(lián)網(wǎng)上每一臺(tái)計(jì)算機(jī)的唯一標(biāo)識(shí)是它的IP地址忌愚，形如202.108.22.5曲管，IP地址并不方便記憶。 為了便于記憶或辨識(shí)硕糊，用戶使用域名來登錄網(wǎng)站院水，每個(gè)域名背后有對(duì)應(yīng)的IP地址。每個(gè)網(wǎng)站就是靠IP來定位的简十。瀏覽器并不能識(shí)別URL是什么檬某，因此URL輸入后，瀏覽器首先要做得是域名解析螟蝙。DNS
DNS（Domain Name System橙喘，域名系統(tǒng)）是互聯(lián)網(wǎng)的一項(xiàng)服務(wù)。 它作為將域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)胶逢，能夠使人更方便地訪問互聯(lián)網(wǎng)。DNS實(shí)際上充當(dāng)了一個(gè)翻譯的角色饰潜，實(shí)現(xiàn)了網(wǎng)址到IP地址的轉(zhuǎn)換初坠。
了解這幾點(diǎn)，再講網(wǎng)址到IP地址轉(zhuǎn)換的過程就很容易理解了彭雾。
瀏覽器首次登陸或者相隔一段時(shí)間內(nèi)登陸某個(gè)網(wǎng)站碟刺，解析過程如下：
（1）輸入U(xiǎn)RL地址后，瀏覽器會(huì)從電腦C盤的hosts文件查找是否有存儲(chǔ)DNS信息薯酝，查找是否有目標(biāo)域名和對(duì)應(yīng)的IP地址半沽；
（2）從路由器的緩存DNS信息中查找爽柒；
（3）ISP DNS緩存查找，從網(wǎng)絡(luò)服務(wù)商（比如電信）的DNS緩存信息中查找者填；
（4）經(jīng)由以上三種查找方法還沒查找到目標(biāo)URL對(duì)應(yīng)的IP的話浩村，就會(huì)向根域名DNS服務(wù)器查找目標(biāo)URL的對(duì)應(yīng)IP，根域名服務(wù)器會(huì)向下級(jí)服務(wù)器轉(zhuǎn)送請(qǐng)求占哟，層層下發(fā)心墅，直至找到對(duì)應(yīng)IP并把它緩存到本地，供下次查詢使用榨乎。
如果是近期登陸過的網(wǎng)站怎燥，本地瀏覽器會(huì)有DNS緩存，可以直接查找到IP地址蜜暑。知道IP地址之后铐姚，通過IP地址查找到對(duì)應(yīng)的服務(wù)器，瀏覽器將用戶發(fā)起的http請(qǐng)求發(fā)送給服務(wù)器肛捍。
2.服務(wù)器處理用戶請(qǐng)求
服務(wù)器是一臺(tái)安裝系統(tǒng)的機(jī)器隐绵。常見的服務(wù)器有Linux、Windows server 2012等篇梭。系統(tǒng)里安裝的處理請(qǐng)求的軟件叫Web server氢橙。
Web server是一個(gè)統(tǒng)一管控的工具。結(jié)合配置文件恬偷，Web server把接收到的用戶請(qǐng)求交給網(wǎng)站代碼悍手，或者接受請(qǐng)求反向代理到其他Web server，然后返回后才程序處理的結(jié)果袍患。
3.網(wǎng)站處理流程
網(wǎng)站處理坦康，就是實(shí)際后臺(tái)處理的工作。后臺(tá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）
視圖是用戶看到并與之交互的界面夭谤。這是前端工作的主要部分。
（2）模型（model）
模型是將實(shí)際開發(fā)中的業(yè)務(wù)規(guī)則和所涉及的數(shù)據(jù)格式模型化巫糙，應(yīng)用于模型的代碼只需寫一次就可以被多個(gè)視圖重用朗儒。在MVC的三個(gè)部件中，模型擁有最多的處理任務(wù)。一個(gè)模型能為多個(gè)視圖提供數(shù)據(jù)醉锄。
（3）控制器（controller）
控制器接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求乏悄。Controller處于管理角色，從視圖接收請(qǐng)求并決定調(diào)用哪個(gè)模型構(gòu)件去處理請(qǐng)求恳不，然后再確定用哪個(gè)視圖來顯示模型處理返回的數(shù)據(jù)檩小。
總結(jié)而言，首先控制器接收用戶的請(qǐng)求妆够，并決定應(yīng)該調(diào)用哪個(gè)模型來進(jìn)行處理识啦，然后模型用業(yè)務(wù)邏輯來處理用戶的請(qǐng)求并返回?cái)?shù)據(jù)，最后控制器用相應(yīng)的視圖格式化模型返回html字符串給瀏覽器神妹，瀏覽器呈現(xiàn)網(wǎng)頁(yè)給用戶颓哮。因此，下一步就來到瀏覽器處理階段鸵荠。
4.瀏覽器處理
通過后臺(tái)處理返回的html字符串結(jié)果會(huì)被瀏覽器讀取解析冕茅，對(duì)應(yīng)就是html頁(yè)面加載、解析蛹找、渲染的工作姨伤。
（1）加載
HTML字符串被瀏覽器接受后被一句句讀取解析，解析到link 標(biāo)簽后重新發(fā)送請(qǐng)求獲取css庸疾；解析到 script標(biāo)簽后發(fā)送請(qǐng)求獲取 js乍楚，并執(zhí)行代碼；解析到img 標(biāo)簽后發(fā)送請(qǐng)求獲取圖片資源届慈。并同步進(jìn)行加載解析徒溪。
（2）解析、渲染
解析的過程金顿，其實(shí)就是生成解析樹臊泌，即dom樹。dom樹是由dom元素及屬性節(jié)點(diǎn)組成揍拆，加上css解析的樣式對(duì)象和js解析后的動(dòng)作實(shí)現(xiàn)渠概。而渲染，就是將DOM樹進(jìn)行可視化表示嫂拴。下一步就來到了繪制網(wǎng)頁(yè)的工作階段播揪。
5.繪制網(wǎng)頁(yè)
瀏覽器根據(jù) HTML 和 CSS 計(jì)算得到渲染樹，繪制到屏幕上筒狠，js 會(huì)被執(zhí)行剪芍，由此最終完成了頁(yè)面展示。
總結(jié)
這篇文章寫得很糾結(jié)窟蓝，很多步驟我自己心里知道是那么回事，但沒有能力用自己的語(yǔ)言表述出來，只會(huì)照本宣科地把自己學(xué)的內(nèi)容搬過來运挫。這也跟我的計(jì)算機(jī)基礎(chǔ)比較薄弱有關(guān)状共，以后會(huì)注意加強(qiáng)這一塊的補(bǔ)充，把知識(shí)潛移默化到自己頭腦中谁帕。
