從url到頁面展現，這之中發生了什麼？
大概是這樣的流程：
- 在瀏覽器的位址列中敲入了url
- 域名解析
- 伺服器處理請求
- 瀏覽器處理
- 繪製網頁
一、在瀏覽器的位址列中敲入了url
首先，我們要知道url是什麼？
URL（Uniform Resource Locator），統一資源定位符，用於定位網際網路上的資源，實際上就是網站網址。url的格式一般為：
協議型別://<主機名>:<埠>/<路徑>/檔名
其中協議型別可以是http（超文字傳輸協議）、https、ftp（檔案傳輸協議）、telnet（遠端登入協議）、file等等。而http是最常見的網路傳輸協議，https則是進行加密的網路傳輸。
例如，我的簡書url為http://www.jianshu.com/u/b473784d730c，其中，“http”表示與web伺服器通訊採用http協議，簡書web伺服器域名為www.jianshu.com，u/b473784d730c表示所訪問的檔案存在於web伺服器上的路徑。
url格式中主機名冒號後面的數字是埠編號，因為一臺計算機常常會同時作為Web，FTP等伺服器，埠編號用來告訴web伺服器所在的主機要將請求交給哪個服務。預設情況下http服務的埠為80，不需要在url中輸入，如果web伺服器採用的不是這一個預設埠，就需要寫明服務所用的埠。常見的協議預設埠如下：
| 協議型別 | 預設埠 |
|---|---|
| http | 80 |
| ftp | 21 |
| https | 443 |
| telnet | 23 |
IP是什麼
IP是因特網中的每臺連線到網路的計算機為實現相互通訊而遵循的規則協議。每個處於網際網路中的裝置都有IP 地址，形如 192.168.0.1，而127.0.0.1代表本機的 IP。IP又分為區域網IP和公網IP。而區域網 IP 和公網 IP 是有差別的。每個網站就是靠IP來定位的。
為了便於記憶或辨識，人們使用域名來登入網站，每個域名背後有對應的IP地址。
比如對於 http://www.jianshu.com的URL，瀏覽器實際上不知道 www.jianshu.com到底是什麼東西，需要查詢www.jianshu.com網站所在伺服器的IP地址，才能找到目標，這就是下文要說的域名解析。
二、域名解析
當用戶在瀏覽器中輸入url後,你使用的電腦會發出一個DNS請求到本地DNS伺服器。本地DNS伺服器一般都是你的網路接入伺服器商提供，比如中國電信，中國移動,DNS請求到達本地DNS伺服器之後會有以下幾個步驟：
- 查詢瀏覽器快取
瀏覽器會檢查快取中有沒有這個域名對應的解析過的IP地址，如果快取中有，這個解析過程就將結束。Chrome瀏覽器看本身的DNS快取時間比較方便，在位址列輸入
chrome://net-internals/#dns，就可以看到了
- 查詢作業系統快取
如果使用者的瀏覽器快取中沒有，瀏覽器會從hosts檔案查詢是否有儲存DNS資訊，查詢是否有目標域名和對應的IP地址
- 查詢路由器快取
如果系統快取中也找不到，那麼查詢請求就會發向路由器，路由器一般會有自己的DNS快取。
- 查詢ISP(Internet Service Provider) DNS 快取
如果路由器快取中也找不到，那麼就查詢ISP DNS 快取伺服器了。
我們都知道在我們的網路配置中都會有"DNS伺服器地址"這一項，作業系統會把這個域名傳送給這裡設定的DNS，比如114.114.114.114,也就是本地區的域名伺服器，通常是提供給你接入網際網路的應用提供商。而114.114.114.114是國內移動、電信和聯通通用的DNS。
- 迭代查詢
如果前面都找不到DNS快取的話，會有以下幾個步驟：
- 本地 DNS伺服器將該請求轉發到網際網路上的根域（根域沒有名字，在DNS系統中就用一個空字串來表示。例如
www.baidu.com.現在的DNS系統都不會要求域名以.來結束，即www.baidu.com就可以解析了，但是現在很多DNS解析服務商還是會要求在填寫DNS記錄的時候以.來結尾域名。） - 根域將所要查詢域名中的頂級域（比如要查詢
www.baidu,com，該域名的頂級域就是com）的伺服器IP地址返回到本地DNS。 - 本地DNS根據返回的IP地址，再向頂級域（就是com域）傳送請求， com域伺服器再將域名中的二級域（即
www.baidu.com中的baidu.com）的IP地址返回給本地DNS。 - 本地DNS再向二級域傳送請求進行查詢。
- 之後不斷重複這樣的過程，直到本地DNS伺服器得到最終的查詢結果，並返回到主機。這時候主機才能通過域名訪問該網站。
下圖能很好的說明這個迭代查詢:
當查詢到對應的IP地址之後，通過IP地址查詢到對應的伺服器，瀏覽器將使用者發起的http請求傳送給伺服器。例如：GET http://www.baidu.com/ HTTP/1.1
三、伺服器處理請求
每臺伺服器上都會安裝處理請求的應用——Web server。常見的web server產品有apache、nginx、IIS、Lighttpd等。
當web server接收到一個HTTP請求(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。對於不同使用者傳送的請求，會結合配置檔案，把不同請求委託給伺服器上處理對應請求的程式進行處理（例如CGI指令碼，JSP指令碼，servlets，ASP指令碼，伺服器端JavaScript，或者一些其它的伺服器端技術等）。
無論它們(指令碼)的目的如何，這些伺服器端(server-side)的程式通常產生一個HTML的響應(response)來讓瀏覽器可以瀏覽。
那麼如何處理請求？實際上就是後臺處理的工作。後臺開發現在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。
處理的過程如下圖：
MVC的處理過程是這樣的：對於每一個使用者輸入的請求，首先被控制器接收，控制器決定用哪個模型來進行處理，然後模型用業務邏輯來處理使用者的請求並返回資料，最後控制器確定用哪個檢視模型，用相應的檢視格式化模型返回html字串給瀏覽器，並通過顯示頁面呈現給使用者。
四、瀏覽器處理
接下來就是瀏覽器進行處理， 通過後臺處理返回的HTML字串被瀏覽器接受後被一句句讀取解析，html頁面經歷載入、解析、渲染。
-
載入
瀏覽器對一個html頁面的載入順序是從上而下的。如果載入過程中遇到外部css檔案，瀏覽器另外發出一個請求，來獲取css檔案。遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。但是當文件載入過程中遇到js檔案，html文件會掛起渲染（載入解析渲染同步）的執行緒，不僅要等待文件中js檔案載入完畢，還要等待解析執行完畢，才可以恢復html文件的渲染執行緒。
-
解析
解析文件是指將文件轉化成為有意義的結構，也就是可讓程式碼理解和使用的結構。解析得到的結果通常是代表了文件結構的節點樹，它稱作解析樹或者語法樹，也就是DOM樹。如下圖：
css解析是指將css檔案解析為樣式表物件。如下圖：
js解析是檔案在載入的同時也進行解析
如果想深入如何解析的話可以看瀏覽器的工作原理：新式網路瀏覽器幕後揭祕這篇文章
-
渲染
即為構建渲染樹的過程，就是將DOM樹進行視覺化表示。構建這棵樹是為了以正確的順序繪製文件內容。
五、繪製網頁
瀏覽器根據 HTML 和 CSS 計算得到渲染樹，最終繪製到螢幕上
作者：Moorez
連結：https://www.jianshu.com/p/fc957e25102e
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。