大概是這樣的流程：
- 在瀏覽器的地址欄中敲入了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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。