摘要：比如對于的，瀏覽器實際上不知道到底是什么東西，需要查找網(wǎng)站所在服務器的地址，才能找到目標，這就是下文要說的域名解析。二域名解析當用戶在瀏覽器中輸入后你使用的電腦會發(fā)出一個請求到本地服務器。

這里markdown格式跟簡書不太一樣，排版可能不是很好，可以轉(zhuǎn)到我的簡書上看

我們平常在地址欄里輸入一些網(wǎng)址時，頁面很快就會出現(xiàn)，但在這之中到底發(fā)生了什么事情呢？

在瀏覽器的地址欄中敲入了url

域名解析

服務器處理請求

瀏覽器處理

繪制網(wǎng)頁

首先，我們要知道url是什么？

URL（Uniform Resource Locator），統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上的資源，實際上就是網(wǎng)站網(wǎng)址。url的格式一般為：

協(xié)議類型://<主機名>:<端口>/<路徑>/文件名

其中協(xié)議類型可以是http（超文本傳輸協(xié)議）、https、ftp（文件傳輸協(xié)議）、telnet（遠程登錄協(xié)議）、file等等。而http是最常見的網(wǎng)絡傳輸協(xié)議，https則是進行加密的網(wǎng)絡傳輸。

例如，我的簡書url為http://www.jianshu.com/u/b473784d730c，其中，“http”表示與web服務器通訊采用http協(xié)議，簡書web服務器域名為www.jianshu.com，u/b473784d730c表示所訪問的文件存在于web服務器上的路徑。

url格式中主機名冒號后面的數(shù)字是端口編號，因為一臺計算機常常會同時作為Web，F(xiàn)TP等服務器，端口編號用來告訴web服務器所在的主機要將請求交給哪個服務。默認情況下http服務的端口為80，不需要在url中輸入，如果web服務器采用的不是這一個默認端口，就需要寫明服務所用的端口。常見的協(xié)議默認端口如下：

IP是什么

IP是因特網(wǎng)中的每臺連接到網(wǎng)絡的計算機為實現(xiàn)相互通信而遵循的規(guī)則協(xié)議。每個處于互聯(lián)網(wǎng)中的設備都有IP 地址，形如 192.168.0.1，而127.0.0.1代表本機的 IP。IP又分為局域網(wǎng)IP和公網(wǎng)IP。而局域網(wǎng) IP 和公網(wǎng) IP 是有差別的。每個網(wǎng)站就是靠IP來定位的。

為了便于記憶或辨識，人們使用域名來登錄網(wǎng)站，每個域名背后有對應的IP地址。

比如對于 http://www.jianshu.com的URL，瀏覽器實際上不知道 www.jianshu.com到底是什么東西，需要查找www.jianshu.com網(wǎng)站所在服務器的IP地址，才能找到目標，這就是下文要說的域名解析。

當用戶在瀏覽器中輸入url后,你使用的電腦會發(fā)出一個DNS請求到本地DNS服務器。本地DNS服務器一般都是你的網(wǎng)絡接入服務器商提供，比如中國電信，中國移動,DNS請求到達本地DNS服務器之后會有以下幾個步驟：

查找瀏覽器緩存

瀏覽器會檢查緩存中有沒有這個域名對應的解析過的IP地址，如果緩存中有，這個解析過程就將結(jié)束。Chrome瀏覽器看本身的DNS緩存時間比較方便，在地址欄輸入chrome://net-internals/#dns，就可以看到了

查找操作系統(tǒng)緩存

如果用戶的瀏覽器緩存中沒有，瀏覽器會從hosts文件查找是否有存儲DNS信息，查找是否有目標域名和對應的IP地址

查找路由器緩存

如果系統(tǒng)緩存中也找不到，那么查詢請求就會發(fā)向路由器，路由器一般會有自己的DNS緩存。

查找ISP(Internet Service Provider) DNS 緩存

如果路由器緩存中也找不到，那么就查詢ISP DNS 緩存服務器了。

我們都知道在我們的網(wǎng)絡配置中都會有"DNS服務器地址"這一項，操作系統(tǒng)會把這個域名發(fā)送給這里設置的DNS，比如114.114.114.114,也就是本地區(qū)的域名服務器，通常是提供給你接入互聯(lián)網(wǎng)的應用提供商。而114.114.114.114是國內(nèi)移動、電信和聯(lián)通通用的DNS。

迭代查詢

如果前面都找不到DNS緩存的話，會有以下幾個步驟：

本地 DNS服務器將該請求轉(zhuǎn)發(fā)到互聯(lián)網(wǎng)上的根域（根域沒有名字，在DNS系統(tǒng)中就用一個空字符串來表示。例如www.baidu.com.現(xiàn)在的DNS系統(tǒng)都不會要求域名以.來結(jié)束，即www.baidu.com就可以解析了，但是現(xiàn)在很多DNS解析服務商還是會要求在填寫DNS記錄的時候以.來結(jié)尾域名。）

根域?qū)⑺樵冇蛎械捻敿売颍ū热缫樵?b>www.baidu,com，該域名的頂級域就是com）的服務器IP地址返回到本地DNS。

本地DNS根據(jù)返回的IP地址，再向頂級域（就是com域）發(fā)送請求， com域服務器再將域名中的二級域（即www.baidu.com中的baidu.com）的IP地址返回給本地DNS。

本地DNS再向二級域發(fā)送請求進行查詢。

之后不斷重復這樣的過程，直到本地DNS服務器得到最終的查詢結(jié)果，并返回到主機。這時候主機才能通過域名訪問該網(wǎng)站。
下圖能很好的說明這個迭代查詢:

當查找到對應的IP地址之后，通過IP地址查找到對應的服務器，瀏覽器將用戶發(fā)起的http請求發(fā)送給服務器。例如：GET http://www.baidu.com/ HTTP/1.1

每臺服務器上都會安裝處理請求的應用——Web server。常見的web server產(chǎn)品有apache、nginx、IIS、Lighttpd等。

當web server接收到一個HTTP請求(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。對于不同用戶發(fā)送的請求，會結(jié)合配置文件，把不同請求委托給服務器上處理對應請求的程序進行處理（例如CGI腳本，JSP腳本，servlets，ASP腳本，服務器端JavaScript，或者一些其它的服務器端技術等）。

無論它們(腳本)的目的如何，這些服務器端(server-side)的程序通常產(chǎn)生一個HTML的響應(response)來讓瀏覽器可以瀏覽。

那么如何處理請求？實際上就是后臺處理的工作。后臺開發(fā)現(xiàn)在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。

處理的過程如下圖：

MVC的處理過程是這樣的：對于每一個用戶輸入的請求，首先被控制器接收，控制器決定用哪個模型來進行處理，然后模型用業(yè)務邏輯來處理用戶的請求并返回數(shù)據(jù)，最后控制器確定用哪個視圖模型，用相應的視圖格式化模型返回html字符串給瀏覽器，并通過顯示頁面呈現(xiàn)給用戶。

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

加載

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

解析

解析文檔是指將文檔轉(zhuǎn)化成為有意義的結(jié)構，也就是可讓代碼理解和使用的結(jié)構。解析得到的結(jié)果通常是代表了文檔結(jié)構的節(jié)點樹，它稱作解析樹或者語法樹，也就是DOM樹。如下圖：

css解析將css文件解析為樣式表對象。如下圖：

js解析文件在加載的同時也進行解析
如果想深入如何解析的話可以看瀏覽器的工作原理：新式網(wǎng)絡瀏覽器幕后揭秘這篇文章

渲染

即為構建渲染樹的過程，就是將DOM樹進行可視化表示。構建這棵樹是為了以正確的順序繪制文檔內(nèi)容。

瀏覽器根據(jù) HTML 和 CSS 計算得到渲染樹，最終繪制到屏幕上

參考的文章：
前端經(jīng)典面試題: 從輸入URL到頁面加載發(fā)生了什么？
What really happens when you navigate to a URL
從URL輸入到頁面展現(xiàn)
?MVC模型結(jié)構是什么
域名詳解
瀏覽器~加載，解析，渲染

由于本人的能力有限，如果哪里寫的不對的話，請指出！感謝您的觀看?