一腮郊、你平日在瀏覽器輸入網(wǎng)址這個(gè)方式，叫URL筹燕。
URL 是什么轧飞？
正式名稱為 Uniform Resource Locator (簡稱：URL) ，中文稱為統(tǒng)一資源定位符庄萎，就是訪問網(wǎng)絡(luò)上的資源的途徑踪少。 你在網(wǎng)絡(luò)上看到的網(wǎng)頁，影片糠涛，圖片等一切資源都是通過URL去訪問或獲取援奢。
就像現(xiàn)實(shí)生活一樣，你通過地址門牌去找到不同的地方忍捡。
URL 一般格式如下：
協(xié)定型式://伺服器位址:埠號(hào)（必要時(shí)需加上埠號(hào)）/路徑/檔名
以本文章URL為例： http://www.reibang.com/u/123
-
http://是與web伺服器通訊采用http協(xié)議協(xié)定型式 -
www.reibang.com是簡書伺服器域名地址 -
u/123是所訪問的文件存在于伺服器上的路徑檔名
URL 協(xié)定型式主要用作不同的傳輸方式與內(nèi)容類型集漾，以下是最常見到的形式：
-
http超文本傳輸協(xié)定資源，是網(wǎng)路最廣泛的協(xié)定之一砸脊，專門負(fù)責(zé)HTML網(wǎng)頁的發(fā)布與接收具篇。就像你目前觀看的本文章 -
https用加密傳送的超文本傳輸協(xié)定，傳輸?shù)木W(wǎng)頁經(jīng)過加密凌埂，現(xiàn)普遍采用驱显，有關(guān)加密資料可參見這里 -
ftp檔案傳輸協(xié)定，負(fù)責(zé)檔案傳輸瞳抓，可以進(jìn)行檔案共享 -
mailto電子郵件位址埃疫，專門負(fù)責(zé)電子郵件的傳輸，@是電子郵件必須有的
更多的協(xié)定型式可參考這里
二孩哑、當(dāng)你輸入網(wǎng)址后栓霜，發(fā)生了什么？
先了解什么是 IP 地址
正式名稱為 Internet Protocol (簡稱：IP) 横蜒，中文稱為網(wǎng)際協(xié)議胳蛮。每個(gè)處于互聯(lián)網(wǎng)中的設(shè)備都有 IP 地址销凑，以實(shí)現(xiàn)相互通訊。例如127.0.0.1是代表本機(jī)的 IP仅炊。IP 又分為區(qū)域網(wǎng) IP 和公網(wǎng) IP斗幼。簡單而言：
- 區(qū)域網(wǎng) IP 屬于非注冊地址，專門為組織機(jī)構(gòu)內(nèi)部使用茂洒，通過網(wǎng)際網(wǎng)路是不能訪問私有IP的孟岛，就如你公司中的內(nèi)聯(lián)網(wǎng)。
- 公網(wǎng) IP 則是需要注冊督勺，通過它直接訪問網(wǎng)際網(wǎng)路渠羞，在任何地方只有能連網(wǎng)都能訪問公網(wǎng) IP。
理論上智哀，我們知道 IP 地址次询，就可以訪問網(wǎng)絡(luò)上的網(wǎng)頁等資源。但恐怕你也記不了這些難辨認(rèn)又沒有意思的數(shù)字吧瓷叫。于是就有域名的出現(xiàn)屯吊。
你輸入的網(wǎng)址名稱就是域名
域名就是把 IP 地址語義化，使人容易記憶及辨認(rèn)摹菠。利用域名對(duì)應(yīng) IP 地址盒卸。
以 http://www.reibang.com 為例，瀏覽器不會(huì)知道 www.reibang.com 到底是在網(wǎng)絡(luò)哪個(gè)位置次氨，它需要查找 www.reibang.com 這個(gè)域名背后對(duì)應(yīng)所在伺服器的 IP 地址蔽介，才能找到目標(biāo)。這個(gè)過程叫域名解析煮寡。
三虹蓄、進(jìn)行域名解析
當(dāng)你輸入網(wǎng)址后，瀏覽器會(huì)進(jìn)行以下一系列流程幸撕，透過域名伺服器(Domain Name Server, DNS) 薇组，去進(jìn)行域名解析，查找域名是對(duì)應(yīng)哪個(gè) IP 地址坐儿，最后從該 IP 地址獲取網(wǎng)頁等網(wǎng)絡(luò)資源律胀。
- 查找瀏覽器緩存
如果你先前在瀏覽器曾經(jīng)到訪過網(wǎng)站。瀏覽器會(huì)緩存DNS記錄一段時(shí)間貌矿，這樣就找到對(duì)應(yīng)的 IP 地址累铅。域名解析結(jié)束。如果未曾到訪過網(wǎng)站就會(huì)繼續(xù)進(jìn)行域名解析站叼。
- 查找系統(tǒng)緩存
從電腦系統(tǒng)中 Hosts 的文件查找有沒有DNS記錄，是否有相關(guān)的對(duì)應(yīng)的 IP 地址菇民。如果沒有尽楔，域名解析繼續(xù)投储。
- 查找路由器緩存
如果有其他設(shè)備使用的路由器曾經(jīng)到訪過網(wǎng)站。路由器也會(huì)緩存DNS記錄阔馋，是否有相關(guān)的對(duì)應(yīng)的 IP 地址玛荞。如果沒有，域名解析繼續(xù)呕寝。
- 查找 ISP DNS 緩存
以上還是沒有勋眯，就會(huì)向你的網(wǎng)絡(luò)供應(yīng)商 (Internet Service Provider, ISP) 查找有沒有相關(guān)DNS記錄。
- 查找根域名伺服器供應(yīng)商
ISP DNS 緩存還是沒有下梢，就會(huì)向根域名伺服器供應(yīng)商客蹋，查找相關(guān)對(duì)應(yīng)的 IP 地址。根域名伺服器把請求轉(zhuǎn)發(fā)給下一級(jí)孽江，直到找到對(duì)應(yīng)的IP為止讶坯。
- 為什么修改 DNS 為 114.114.114.114 或 8.8.8.8 可以解決電腦上不了網(wǎng)的問題？
8.8.8.8 是谷歌提供的DNS伺服器的 IP 地址岗屏，114.114.114.114 是國內(nèi)電信網(wǎng)絡(luò)供應(yīng)商辆琅。如果我們網(wǎng)頁顯示不了，就說明我們以上一系列流程都找不到相關(guān) IP 地址这刷，你可以嘗試直接從谷歌或電信提供的DNS伺服器中查找相關(guān)的 IP 地址
- 什么是DNS挾持婉烟？
例如：以上1－5流程中，其中hosts或緩存資料遭篡改暇屋，導(dǎo)致域名解析到不正確的IP地址似袁，導(dǎo)致訪問錯(cuò)誤的 IP 地址。如將一個(gè)銀行域名指向不正確的 IP 地址率碾，造成威脅
四叔营、當(dāng)域名解析成功，找到相關(guān) IP 地址所宰，接下來到Web伺服器處理請求
每臺(tái)伺服器上都會(huì)安裝處理請求的應(yīng)用：Web server绒尊。常見的web server 有apache、nginx仔粥、IIS婴谱、Lighttpd等。
當(dāng) web serve r接收到一個(gè) HTTP 請求 (request)躯泰，便會(huì)進(jìn)行一個(gè)網(wǎng)站處理流程谭羔，最后產(chǎn)生一個(gè) HTML 的響應(yīng)(response)給瀏覽器。
伺服器內(nèi)網(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）
MVC的處理過程：
- 每一個(gè)用戶輸入的請求
- 首先被路由接收，再交由控制器決定用哪個(gè)模型來進(jìn)行處理
- 將用戶輸入的指令數(shù)據(jù)傳給模型進(jìn)行
- 進(jìn)行業(yè)務(wù)邏輯判斷沙郭，按需要向數(shù)據(jù)庫存取
- 根據(jù)業(yè)務(wù)邏輯選擇視圖
- 控制器用業(yè)務(wù)邏輯相應(yīng)的數(shù)據(jù)填入視圖模型
- 將處理好的視圖模版的HTML交回控制器
- 生成 HTML 字符串返給瀏覽器處理佛呻，并通過顯示頁面呈現(xiàn)給用戶。
五病线、最后伺服器將處理好的HTML吓著，交給瀏覽器處理，最后顯示在你的屏幕上
接下來就是瀏覽器進(jìn)行處理送挑， 伺服器將處理好的HTML字符串交給瀏覽器后被一句句讀取解析绑莺。過程主要分為
載入，解析让虐，渲染
- 載入
由于瀏覽器對(duì) HTML 頁面加載順序是從上而下的紊撕。如果加載過程中遇到外部 css (如下）
<html>
<head>
<script type="text/javascript" src="style.js"></script>
<script type="text/javascript" src="style1.js"></script>
<script type="text/javascript" src="style2.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello, world!
</body>
</html>
瀏覽器另外發(fā)出一個(gè)請求，來獲取 CSS 文件赡突。遇到圖片資源对扶，瀏覽器也會(huì)另外發(fā)出一個(gè)請求，來獲取圖片資源惭缰。但必須留意當(dāng)文檔加載過程中遇到 Javascript(js) 文件（如上例）浪南，HTML 文檔加載解析渲染同步，不僅要等待文檔中 js 文件加載完畢漱受，還要等待解析執(zhí)行完畢络凿，才可以恢復(fù) HTML 文檔的渲染線程，導(dǎo)致 styles.css 樣式文件和<body>標(biāo)簽都無法被加載昂羡，這會(huì)影響到頁面加載的速度絮记，帶來不良用戶體驗(yàn)。
- 解析虐先，渲染
瀏覽器是一個(gè)邊解析邊渲染的過程怨愤。首先瀏覽器解析HTML文件構(gòu)建DOM樹，然后解析CSS文件構(gòu)建渲染樹蛹批，等到渲染樹構(gòu)建完成后撰洗，瀏覽器開始布局渲染樹并將其繪制到屏幕上。
總結(jié)
從你輸入網(wǎng)址腐芍，到網(wǎng)頁出現(xiàn)這個(gè)看似簡單且短的時(shí)間過程中差导，原來背后是牽涉這么多的步驟及概念，這真不簡單喔猪勇。通過寫這篇文章设褐，對(duì)前端這條熱門面試題目，也有初步的了解了。
本文是小弟學(xué)習(xí)前端寫有關(guān)于從你輸入網(wǎng)址络断，到網(wǎng)頁出現(xiàn)裁替，這過程到發(fā)生了什么的博文，請大家多多指教貌笨。如有任何意見及交流，可在下方留言襟沮，謝謝锥惋！
