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

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

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

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

域名解析

服務(wù)器處理請(qǐng)求

瀏覽器處理

繪制網(wǎng)頁

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

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

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

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

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

url格式中主機(jī)名冒號(hào)后面的數(shù)字是端口編號(hào)，因?yàn)橐慌_(tái)計(jì)算機(jī)常常會(huì)同時(shí)作為Web，F(xiàn)TP等服務(wù)器，端口編號(hào)用來告訴web服務(wù)器所在的主機(jī)要將請(qǐng)求交給哪個(gè)服務(wù)。默認(rèn)情況下http服務(wù)的端口為80，不需要在url中輸入，如果web服務(wù)器采用的不是這一個(gè)默認(rèn)端口，就需要寫明服務(wù)所用的端口。常見的協(xié)議默認(rèn)端口如下：

IP是什么

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

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

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

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

查找瀏覽器緩存

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

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

如果用戶的瀏覽器緩存中沒有，瀏覽器會(huì)從hosts文件查找是否有存儲(chǔ)DNS信息，查找是否有目標(biāo)域名和對(duì)應(yīng)的IP地址

查找路由器緩存

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

查找ISP(Internet Service Provider) DNS 緩存

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

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

迭代查詢

如果前面都找不到DNS緩存的話，會(huì)有以下幾個(gè)步驟：

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

根域?qū)⑺樵冇蛎械捻敿?jí)域（比如要查詢www.baidu,com，該域名的頂級(jí)域就是com）的服務(wù)器IP地址返回到本地DNS。

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

本地DNS再向二級(jí)域發(fā)送請(qǐng)求進(jìn)行查詢。

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

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

每臺(tái)服務(wù)器上都會(huì)安裝處理請(qǐng)求的應(yīng)用——Web server。常見的web server產(chǎn)品有apache、nginx、IIS、Lighttpd等。

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

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

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

處理的過程如下圖：

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

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

加載

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

解析

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

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

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

渲染

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

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

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

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