這個(gè)時(shí)代，是互聯(lián)網(wǎng)的時(shí)代。使用瀏覽器搜索，瀏覽網(wǎng)頁(yè)對(duì)于每個(gè)人來(lái)說(shuō)都不陌生。但是，當(dāng)你打開(kāi)瀏覽器地址欄輸入網(wǎng)址（URL），敲下回車時(shí)，瀏覽器就將你想要檢索的網(wǎng)站呈現(xiàn)在了頁(yè)面上。等一等，這個(gè)過(guò)程發(fā)生了什么？太酷了，下面將帶你一一了解瀏覽器的工作原理。
基本概念
什么是URL
- URL(Uniform Resource Locator)：統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上的資源。比如
https://www.baidu.com就是URL。URL通常對(duì)應(yīng)協(xié)議、域名、端口號(hào)及一些其他信息。 - http、https、ftp、file協(xié)議
http://jirengu.com/blog //明文傳輸，定位網(wǎng)絡(luò)上某個(gè)資源
file://Users/zuodong/Desktop/index.html //定位本地電腦上的一個(gè)文件
https://www.baidu.com //經(jīng)過(guò)加密后的http協(xié)議，是個(gè)安全的http協(xié)議
//jirengu.com/static/imgs/a.png //當(dāng)前文件URL的協(xié)議與當(dāng)前頁(yè)面協(xié)議一致
域名：對(duì)于
http://jirengu.com:8080/blog這個(gè)URL，jinrengu.com就是域名，瀏覽器實(shí)際上并不知道jirengu.com到底是什么。所以需要查找jirengu.com網(wǎng)站所在的服務(wù)器的IP地址，才能找到目標(biāo)。IP地址：每一個(gè)處于互聯(lián)網(wǎng)中的設(shè)備都有IP地址，形如
192.168.0.1（127.0.0.1代表本機(jī)的IP）。
DNS（Domain Name System）
是域名解析服務(wù)，DNS可以將域名映射到對(duì)應(yīng)的IP地址。
那么為什么不直接使用IP呢？因?yàn)橛蛎噍^于IP，有語(yǔ)義化的作用，所以要發(fā)明域名。
服務(wù)器
服務(wù)器是一臺(tái)安裝系統(tǒng)的機(jī)器，常見(jiàn)的系統(tǒng)如 Linux、windows server 2012。
Web服務(wù)器
系統(tǒng)里安裝的處理請(qǐng)求的應(yīng)用叫 Web server，常見(jiàn)的 Web服務(wù)器有 Apache、Nginx、IIS、Lighttpd。
對(duì)這些專有名詞有一定的了解后，我們來(lái)看看瀏覽器的工作原理吧
從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么？
- 在瀏覽器輸入U(xiǎn)RL
- 域名解析（解析的過(guò)程由1 - 5，找到IP為止）
- 瀏覽器緩存 - 瀏覽器會(huì)緩存DNS記錄一段時(shí)間
- 系統(tǒng)緩存 - 從Hosts 文件查找是否有該域名和對(duì)應(yīng)IP
- 路由器緩存 - 一般路由器也會(huì)緩存域名信息
- ISP DNS緩存 - 比如到電信的DNS上查找緩存
- 如果都沒(méi)有找到，則像根域名服務(wù)器查找域名對(duì)應(yīng)IP，根域名服務(wù)器把請(qǐng)求轉(zhuǎn)發(fā)到下一級(jí)，直到找到IP
- 服務(wù)器處理
Web服務(wù)器接受用戶的 Request 交給網(wǎng)站代碼，或者接受請(qǐng)求反向代理到其他Web服務(wù)器
1
如圖1：發(fā)送一個(gè)http://jirengu.com的請(qǐng)求，Web服務(wù)器（Nginx）中寫好的配置文件將http://jirengu.com與對(duì)應(yīng)文件/var/www/jirengu下的代碼匹配. -
網(wǎng)站處理流程
MVC 模型(model)-視圖(view)-控制器(controller)
- 模型（Model）：數(shù)據(jù)保存，如訪問(wèn)數(shù)據(jù)庫(kù)
- 視圖（View）：用戶界面，實(shí)現(xiàn)數(shù)據(jù)有目的顯示
- 控制器（Controller）：業(yè)務(wù)邏輯，不同層面的組織作用，控制應(yīng)用程序的流程。
/** 模擬Model, View, Controller */
var M = {}, V = {}, C = {};
/** Model 負(fù)責(zé)存放數(shù)據(jù) */
M.data = "hello world";
/** View 負(fù)責(zé)將數(shù)據(jù)輸出到頁(yè)面上 */
V.render = (M) => { alert(M.data); }
/** Controller 作為一個(gè) M 和 V 的橋梁 */
C.handleOnload = () => { V.render(M); }
/** 在網(wǎng)頁(yè)讀取時(shí)觸發(fā) Controller */
window.onload = C.handleOnload;
- 瀏覽器處理
- HTML字符串被瀏覽器接受后被一句句讀取解析
- 解析到
<link>標(biāo)簽后重新發(fā)送請(qǐng)求獲取 css - 解析到
<script>標(biāo)簽后發(fā)送請(qǐng)求獲取 js，并執(zhí)行代碼 - 解析到
<img>標(biāo)簽后發(fā)送請(qǐng)求獲取圖片資源
- 繪制網(wǎng)頁(yè)
瀏覽器根據(jù) HTML 和 CSS 計(jì)算得到渲染樹(shù)，繪制到屏幕上 js 會(huì)被執(zhí)行
結(jié)語(yǔ)：簡(jiǎn)單的操作背后，卻不知道瀏覽器及服務(wù)器之間有著這么多的行為。越接近事物原理，越覺(jué)得自己對(duì)技術(shù)，甚至是世界的認(rèn)知是多么的貧乏。在未知的道路上不斷前進(jìn)，并不知道路上會(huì)遇到什么，終點(diǎn)又在哪里，心中充滿了敬畏卻又忍不住亢奮。這大致就是每個(gè)程序員在學(xué)習(xí)技術(shù)的大道上越走越堅(jiān)定的原因吧。
