一、你平日在瀏覽器輸入網址這個方式，叫URL。
URL 是什么？
正式名稱為 Uniform Resource Locator (簡稱：URL) ，中文稱為統一資源定位符，就是訪問網絡上的資源的途徑。 你在網絡上看到的網頁，影片，圖片等一切資源都是通過URL去訪問或獲取。
就像現實生活一樣，你通過地址門牌去找到不同的地方。
URL 一般格式如下：
協定型式://伺服器位址:埠號（必要時需加上埠號）/路徑/檔名
以本文章URL為例： http://www.lxweimin.com/u/123
-
http://是與web伺服器通訊采用http協議協定型式 -
www.lxweimin.com是簡書伺服器域名地址 -
u/123是所訪問的文件存在于伺服器上的路徑檔名
URL 協定型式主要用作不同的傳輸方式與內容類型，以下是最常見到的形式：
-
http超文本傳輸協定資源，是網路最廣泛的協定之一，專門負責HTML網頁的發布與接收。就像你目前觀看的本文章 -
https用加密傳送的超文本傳輸協定，傳輸的網頁經過加密，現普遍采用，有關加密資料可參見這里 -
ftp檔案傳輸協定，負責檔案傳輸，可以進行檔案共享 -
mailto電子郵件位址，專門負責電子郵件的傳輸，@是電子郵件必須有的
更多的協定型式可參考這里
二、當你輸入網址后，發生了什么？
先了解什么是 IP 地址
正式名稱為 Internet Protocol (簡稱：IP) ，中文稱為網際協議。每個處于互聯網中的設備都有 IP 地址，以實現相互通訊。例如127.0.0.1是代表本機的 IP。IP 又分為區域網 IP 和公網 IP。簡單而言：
- 區域網 IP 屬于非注冊地址，專門為組織機構內部使用，通過網際網路是不能訪問私有IP的，就如你公司中的內聯網。
- 公網 IP 則是需要注冊，通過它直接訪問網際網路，在任何地方只有能連網都能訪問公網 IP。
理論上，我們知道 IP 地址，就可以訪問網絡上的網頁等資源。但恐怕你也記不了這些難辨認又沒有意思的數字吧。于是就有域名的出現。
你輸入的網址名稱就是域名
域名就是把 IP 地址語義化，使人容易記憶及辨認。利用域名對應 IP 地址。
以 http://www.lxweimin.com 為例，瀏覽器不會知道 www.lxweimin.com 到底是在網絡哪個位置，它需要查找 www.lxweimin.com 這個域名背后對應所在伺服器的 IP 地址，才能找到目標。這個過程叫域名解析。
三、進行域名解析
當你輸入網址后，瀏覽器會進行以下一系列流程，透過域名伺服器(Domain Name Server, DNS) ，去進行域名解析，查找域名是對應哪個 IP 地址，最后從該 IP 地址獲取網頁等網絡資源。
- 查找瀏覽器緩存
如果你先前在瀏覽器曾經到訪過網站。瀏覽器會緩存DNS記錄一段時間，這樣就找到對應的 IP 地址。域名解析結束。如果未曾到訪過網站就會繼續進行域名解析。
- 查找系統緩存
從電腦系統中 Hosts 的文件查找有沒有DNS記錄，是否有相關的對應的 IP 地址。如果沒有，域名解析繼續。
- 查找路由器緩存
如果有其他設備使用的路由器曾經到訪過網站。路由器也會緩存DNS記錄，是否有相關的對應的 IP 地址。如果沒有，域名解析繼續。
- 查找 ISP DNS 緩存
以上還是沒有，就會向你的網絡供應商 (Internet Service Provider, ISP) 查找有沒有相關DNS記錄。
- 查找根域名伺服器供應商
ISP DNS 緩存還是沒有，就會向根域名伺服器供應商，查找相關對應的 IP 地址。根域名伺服器把請求轉發給下一級，直到找到對應的IP為止。
- 為什么修改 DNS 為 114.114.114.114 或 8.8.8.8 可以解決電腦上不了網的問題？
8.8.8.8 是谷歌提供的DNS伺服器的 IP 地址，114.114.114.114 是國內電信網絡供應商。如果我們網頁顯示不了，就說明我們以上一系列流程都找不到相關 IP 地址，你可以嘗試直接從谷歌或電信提供的DNS伺服器中查找相關的 IP 地址
- 什么是DNS挾持？
例如：以上1－5流程中，其中hosts或緩存資料遭篡改，導致域名解析到不正確的IP地址，導致訪問錯誤的 IP 地址。如將一個銀行域名指向不正確的 IP 地址，造成威脅
四、當域名解析成功，找到相關 IP 地址，接下來到Web伺服器處理請求
每臺伺服器上都會安裝處理請求的應用：Web server。常見的web server 有apache、nginx、IIS、Lighttpd等。
當 web serve r接收到一個 HTTP 請求 (request)，便會進行一個網站處理流程，最后產生一個 HTML 的響應(response)給瀏覽器。
伺服器內網站處理流程
網站處理是實際后臺處理的工作。后臺開發現在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。
MVC是一個設計模式，將應用程序分成三個核心部件：
模型（model），視圖（view），控制器（controller）
MVC的處理過程：
- 每一個用戶輸入的請求
- 首先被路由接收，再交由控制器決定用哪個模型來進行處理
- 將用戶輸入的指令數據傳給模型進行
- 進行業務邏輯判斷，按需要向數據庫存取
- 根據業務邏輯選擇視圖
- 控制器用業務邏輯相應的數據填入視圖模型
- 將處理好的視圖模版的HTML交回控制器
- 生成 HTML 字符串返給瀏覽器處理，并通過顯示頁面呈現給用戶。
五、最后伺服器將處理好的HTML，交給瀏覽器處理，最后顯示在你的屏幕上
接下來就是瀏覽器進行處理， 伺服器將處理好的HTML字符串交給瀏覽器后被一句句讀取解析。過程主要分為
載入，解析，渲染
- 載入
由于瀏覽器對 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>
瀏覽器另外發出一個請求，來獲取 CSS 文件。遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。但必須留意當文檔加載過程中遇到 Javascript(js) 文件（如上例），HTML 文檔加載解析渲染同步，不僅要等待文檔中 js 文件加載完畢，還要等待解析執行完畢，才可以恢復 HTML 文檔的渲染線程，導致 styles.css 樣式文件和<body>標簽都無法被加載，這會影響到頁面加載的速度，帶來不良用戶體驗。
- 解析，渲染
瀏覽器是一個邊解析邊渲染的過程。首先瀏覽器解析HTML文件構建DOM樹，然后解析CSS文件構建渲染樹，等到渲染樹構建完成后，瀏覽器開始布局渲染樹并將其繪制到屏幕上。
總結
從你輸入網址，到網頁出現這個看似簡單且短的時間過程中，原來背后是牽涉這么多的步驟及概念，這真不簡單喔。通過寫這篇文章，對前端這條熱門面試題目，也有初步的了解了。
本文是小弟學習前端寫有關于從你輸入網址，到網頁出現，這過程到發生了什么的博文，請大家多多指教。如有任何意見及交流，可在下方留言，謝謝！
