前言
當(dāng)用戶打開瀏覽器，在地址欄輸入 https://www.baidu.com/讨韭，按下回車脂信，頁(yè)面展示百度首頁(yè)癣蟋。整個(gè)過程發(fā)生了什么呢？
一狰闪、輸入U(xiǎn)RL
URL統(tǒng)一資源定位符疯搅，也平時(shí)我們說的網(wǎng)址。瀏覽器通過URL來查找和定位資源的位置埋泵。
url的格式一般為：
協(xié)議類型://<服務(wù)器地址>:<服務(wù)器端口號(hào)>/<文件路徑>/
常見的協(xié)議有http幔欧、https、telnet丽声、ftp礁蔗、file等。
- 其中http是最常見的超文本傳輸協(xié)議
- 而https（超文本傳輸安全協(xié)議）則是由http通過與SSL （安全套接層）或TLS（安全傳輸協(xié)議）的組合使用雁社，加密的HTTP的通信內(nèi)容浴井。因此HTTPS比HTTP協(xié)議更加安全。
服務(wù)器地址是URL指定待訪問的地址歧胁∽趟牵可以是域名或主機(jī)號(hào)厉碟，或ip地址
服務(wù)器端口號(hào)指服務(wù)器連接的網(wǎng)絡(luò)端口號(hào)喊巍。若用戶省去，則為默認(rèn)端口號(hào)
- 因?yàn)橐慌_(tái)計(jì)算機(jī)常常會(huì)同時(shí)作為Web箍鼓，F(xiàn)TP等服務(wù)器崭参，端口編號(hào)用來告訴web服務(wù)器所在的主機(jī)要將請(qǐng)求交給哪個(gè)服務(wù)。
- 默認(rèn)情況下http服務(wù)的端口為80款咖。ftp為21何暮，HTTPS為443，telnet為23.
文件路徑則是服務(wù)器上文件路徑定位上的資源铐殃，也就是目錄
https://www.baidu.com/使用的是HTTPS協(xié)議海洼，服務(wù)器地址則是域名。
二富腊、域名解析
- DNS服務(wù)是提供域名到IP地址之間的解析服務(wù)坏逢。計(jì)算機(jī)即可以被賦予ip地址，也可以被賦予主機(jī)號(hào)和域名赘被，比如www.baidu.com是整。
- 用戶通常使用主機(jī)號(hào)與域名來訪問其他計(jì)算機(jī)，因?yàn)楦菀子洃洝?/li>
- IP地址是指互聯(lián)網(wǎng)協(xié)議地址民假，每個(gè)處于互聯(lián)網(wǎng)中的設(shè)備都有IP 地址浮入，形如192.168.1.10
- 局域網(wǎng) IP 和公網(wǎng) IP 是有差別的
- 127.0.0.1代表本機(jī)的 IP
當(dāng)用戶在瀏覽器中輸入https://www.baidu.com/后,你使用的計(jì)算機(jī)會(huì)發(fā)出一個(gè)DNS請(qǐng)求到本地DNS服務(wù)器。本地DNS服務(wù)器一般都是你的網(wǎng)絡(luò)接入服務(wù)器商提供羊异，比如中國(guó)電信事秀，中國(guó)移動(dòng),中國(guó)聯(lián)通DNS請(qǐng)求到達(dá)本地DNS服務(wù)器之后會(huì)有以下幾個(gè)步驟
1 搜索瀏覽器緩存
瀏覽器會(huì)緩存DNS記錄一段時(shí)間彤断，且有數(shù)量限制
2 搜索操作系統(tǒng)緩存
從 Hosts 文件查找是否有該域名與對(duì)應(yīng) IP
3 搜索路由器緩存
一般路由器也會(huì)緩存域名信息
4搜索ISP(互聯(lián)網(wǎng)服務(wù)提供商）NDS緩存
比如到中國(guó)移動(dòng)的 DNS 上查找緩存
5若都沒有找到，則向根域名服務(wù)器查找域名對(duì)應(yīng) IP秽晚，根域名服務(wù)器把請(qǐng)求轉(zhuǎn)發(fā)到下一級(jí)瓦糟，直到找到對(duì)應(yīng)IP
三 .TCP連接
- 拿到域名對(duì)應(yīng)的IP地址之后，指瀏覽器會(huì)以一個(gè)隨機(jī)端口（1024 < 端口 < 65535）向服務(wù)器的WEB程序（常用的有httpd,nginx等）80端口發(fā)起TCP的連接請(qǐng)求赴蝇。
- 3次握手菩浙，詳細(xì)展開很麻煩的
四. 建立TCP連接后發(fā)起http請(qǐng)求、
進(jìn)過TCP3次握手之后，瀏覽器發(fā)起了http的請(qǐng)求，使用的http的方法 一般是GET 方法妒牙，請(qǐng)求的URL是 / ,協(xié)議是HTTP/1.0或HTTP/1.1
五贬芥、 服務(wù)器處理 ——響應(yīng)http請(qǐng)求，響應(yīng)報(bào)文
每臺(tái)服務(wù)器上都會(huì)安裝處理請(qǐng)求的應(yīng)用——web server著洼。常見的web server產(chǎn)品有apache、nginx、IIS或Lighttpd等疫蔓。
當(dāng)web server接收到一個(gè)HTTP請(qǐng)求，會(huì)返回一個(gè)HTTP響應(yīng)身冬，例如送回一個(gè)HTML頁(yè)面衅胀。對(duì)于不同用戶發(fā)送的請(qǐng)求，會(huì)結(jié)合配置文件酥筝，把不同請(qǐng)求委托給服務(wù)器上處理對(duì)應(yīng)請(qǐng)求的程序進(jìn)行處理
這些服務(wù)器端(server-side)的程序通常產(chǎn)生一個(gè)HTML的響應(yīng)(response)來讓瀏覽器可以瀏覽滚躯。
那么如何處理請(qǐng)求？實(shí)際上就是后臺(tái)處理的工作嘿歌。后臺(tái)開發(fā)現(xiàn)在有很多框架掸掏，但大部分都還是按照MVC設(shè)計(jì)模式進(jìn)行搭建的。
MVC是三個(gè)單詞的首字母縮寫宙帝，它們是Model（模型）丧凤、View（視圖）和Controller（控制器）。
1.最上面的一層步脓，是直接面向最終用戶的"視圖層"（View）愿待。視圖是用戶看到并與之交互的界面。這是前端工作的主力部分
2.模型（Model）沪编，模型是將實(shí)際開發(fā)中的業(yè)務(wù)規(guī)則和所涉及的數(shù)據(jù)格式模型化呼盆，應(yīng)用于模型的代碼只需寫一次就可以被多個(gè)視圖重用。在MVC的三個(gè)部件中蚁廓，模型擁有最多的處理任務(wù)访圃。一個(gè)模型能為多個(gè)視圖提供數(shù)據(jù)。
3.控制器接受用戶的輸入并調(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è)給用戶。
七否淤、瀏覽器處理——加載悄但、解析、渲染
接下來就是瀏覽器進(jìn)行處理石抡， 通過后臺(tái)處理返回的HTML字符串被瀏覽器接受后被一句句讀取解析檐嚣，html頁(yè)面經(jīng)歷加載、解析啰扛、渲染嚎京。
加載
瀏覽器對(duì)一個(gè)html頁(yè)面的加載順序是從上而下的。如果加載過程中遇到外部css文件隐解，瀏覽器另外發(fā)出一個(gè)請(qǐng)求鞍帝，來獲取css文件。遇到圖片資源厢漩，瀏覽器也會(huì)另外發(fā)出一個(gè)請(qǐng)求膜眠，來獲取圖片資源岩臣。但是當(dāng)文檔加載過程中遇到j(luò)s文件溜嗜，html文檔會(huì)掛起渲染（加載解析渲染同步）的線程，不僅要等待文檔中js文件加載完畢架谎，還要等待解析執(zhí)行完畢炸宵，才可以恢復(fù)html文檔的渲染線程。
解析
- 解析文檔是指將文檔轉(zhuǎn)化成為有意義的結(jié)構(gòu)谷扣，也就是可讓代碼理解和使用的結(jié)構(gòu)土全。解析得到的結(jié)果通常是代表了文檔結(jié)構(gòu)的節(jié)點(diǎn)樹，它稱作解析樹或者語(yǔ)法樹会涎，也就是DOM樹裹匙。如下圖：
-
css解析是指將css文件解析為樣式表對(duì)象。如下圖：
24.png - js解析是文件在加載的同時(shí)也進(jìn)行解析
詳細(xì)的解析過程請(qǐng)看這
渲染
即為構(gòu)建渲染樹的過程末秃，就是將DOM樹進(jìn)行可視化表示概页。構(gòu)建這棵樹是為了以正確的順序繪制文檔內(nèi)容。
八练慕、繪制網(wǎng)頁(yè)
瀏覽器根據(jù) HTML 和 CSS 計(jì)算得到渲染樹惰匙，最終繪制到屏幕上
作者：彭榮輝
鏈接：http://www.reibang.com/u/0f804364a8a8
來源：簡(jiǎn)書
著作權(quán)歸作者所有技掏。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處项鬼。
參看文章：
前端經(jīng)典面試題: 從輸入U(xiǎn)RL到頁(yè)面加載發(fā)生了什么哑梳？
導(dǎo)航到某個(gè)網(wǎng)址時(shí)會(huì)發(fā)生什么？
一次完整的HTTP事務(wù)是怎樣一個(gè)過程绘盟？
前端面試題：從url到頁(yè)面展現(xiàn)鸠真，這之中發(fā)生了什么？
在瀏覽器地址欄輸入一個(gè)URL后回車龄毡，背后會(huì)進(jìn)行哪些技術(shù)步驟弧哎？
從URL輸入到頁(yè)面展現(xiàn)發(fā)生了什么？
從URL輸入到頁(yè)面展現(xiàn)的過程-前端筆記
瀏覽器工作原理：從 URL 輸入到頁(yè)面展現(xiàn)到底發(fā)生了什么稚虎？
MVC模型結(jié)構(gòu)是什么
瀏覽器~加載撤嫩，解析，渲染
