前端面試題：從url到頁面展示，這之中發生了什麼？

這裏markdown格式跟簡書不太同樣，排版可能不是很好，能夠轉到個人簡書上看

咱們日常在地址欄裏輸入一些網址時，頁面很快就會出現，但在這之中到底發生了什麼事情呢？

大概是這樣的流程：

• 在瀏覽器的地址欄中敲入了url
• 域名解析
• 服務器處理請求
• 瀏覽器處理
• 繪製網頁

1、在瀏覽器的地址欄中敲入了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地址，才能找到目標，這就是下文要說的域名解析。

2、域名解析

當用戶在瀏覽器中輸入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

3、服務器處理請求

每臺服務器上都會安裝處理請求的應用——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字符串給瀏覽器，並經過顯示頁面呈現給用戶。

4、瀏覽器處理

接下來就是瀏覽器進行處理， 經過後臺處理返回的HTML字符串被瀏覽器接受後被一句句讀取解析，html頁面經歷加載、解析、渲染。

• 加載

  瀏覽器對一個html頁面的加載順序是從上而下的。若是加載過程當中遇到外部css文件，瀏覽器另外發出一個請求，來獲取css文件。遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。可是當文檔加載過程當中遇到js文件，html文檔會掛起渲染（加載解析渲染同步）的線程，不只要等待文檔中js文件加載完畢，還要等待解析執行完畢，才能夠恢復html文檔的渲染線程。

• 解析

  解析文檔是指將文檔轉化成爲有意義的結構，也就是可以讓代碼理解和使用的結構。解析獲得的結果一般是表明了文檔結構的節點樹，它稱做解析樹或者語法樹，也就是DOM樹。以下圖：

css解析將css文件解析爲樣式表對象。以下圖：

js解析文件在加載的同時也進行解析
若是想深刻如何解析的話能夠看瀏覽器的工做原理：新式網絡瀏覽器幕後揭祕這篇文章

• 渲染

  即爲構建渲染樹的過程，就是將DOM樹進行可視化表示。構建這棵樹是爲了以正確的順序繪製文檔內容。

5、繪製網頁

瀏覽器根據 HTML 和 CSS 計算獲得渲染樹，最終繪製到屏幕上

---

參考的文章：
前端經典面試題: 從輸入URL到頁面加載發生了什麼？
What really happens when you navigate to a URL
從URL輸入到頁面展示
 MVC模型結構是什麼
域名詳解
瀏覽器~加載，解析，渲染

---

因爲本人的能力有限，若是哪裏寫的不對的話，請指出！感謝您的觀看?