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