從 URL 輸入到頁面展現(xiàn)發(fā)生了什么
當(dāng)在瀏覽器地址欄輸入網(wǎng)址，如：<a>http://www.baidu.com</a>后瀏覽器是怎么把最終的頁面呈現(xiàn)出來的呢？這個過程可以大致分為：
1.在瀏覽器輸入URL
2.域名解析
3.服務(wù)器處理
4.網(wǎng)站處理
5.瀏覽器處理，繪制網(wǎng)頁
1.在瀏覽器輸入URL
用戶輸入url，例如<a>http://[www.baidu.com</a>。其中http為協(xié)議，www.baidu.com為網(wǎng)絡(luò)地址，及指出需要的資源在那臺計算機(jī)上。一般網(wǎng)絡(luò)地址可以為域名或IP地址，此處為域名。使用域名是為了方便記憶，但是為了讓計算機(jī)理解這個地址還需要把它解析為IP地址。
HTTP請求包括請求報頭和請求主體兩個部分，其中請求報頭包含了至關(guān)重要的信息，包括請求的方法（GET / POST）、目標(biāo)url、遵循的協(xié)議（http / https / ftp…），返回的信息是否需要緩存，以及客戶端是否發(fā)送cookie等。
2.域名解析
客戶端先檢查本地是否有對應(yīng)的IP地址，若找到則返回響應(yīng)的IP地址。若沒找到則請求上級DNS服務(wù)器，直至找到或到根節(jié)點(diǎn)。
域名解析流程：
1.瀏覽器緩存 – 瀏覽器會緩存DNS記錄一段時間
2.系統(tǒng)緩存 - 從 Hosts 文件查找是否有該域名和對應(yīng) IP。
3.路由器緩存 – 一般路由器也會緩存域名信息。
4.ISP DNS 緩存 – 比如到電信的 DNS 上查找緩存。
5.如果都沒有找到，則向根域名服務(wù)器查找域名對應(yīng) IP，根域名服務(wù)器把請求轉(zhuǎn)發(fā)到下一級，知道找到 IP
3.web服務(wù)器處理
服務(wù)器是一臺安裝系統(tǒng)的機(jī)器，常見的系統(tǒng)如Linux、windows server 2012系統(tǒng)里安裝的處理請求的應(yīng)用叫 Web server常見的 web服務(wù)器有 Apache、Nginx、IIS、Lighttpd。
服務(wù)接收到客戶端發(fā)送的請求后，查找客戶端請求的資源，并返回響應(yīng)報文，響應(yīng)報文中包括一個重要的信息——狀態(tài)碼。狀態(tài)碼由三位數(shù)字組成，其中比較常見的是200 OK表示請求成功。301表示永久重定向，即請求的資源已經(jīng)永久轉(zhuǎn)移到新的位置。在返回301狀態(tài)碼的同時，響應(yīng)報文也會附帶重定向的url，客戶端接收到后將http請求的url做相應(yīng)的改變再重新發(fā)送。404 not found 表示客戶端請求的資源找不到。
4.網(wǎng)站處理流程
MVC 模型(model)-視圖(view)-控制器(controller)
流程：用戶請求頁面-->Rails路由-->控制器-->數(shù)據(jù)庫-->模型-->視圖-->控制器-->用戶。
請求成功后，服務(wù)器會返回相應(yīng)的HTML文件。接下來就到了頁面的渲染階段了。
5.瀏覽器處理，繪制網(wǎng)頁
現(xiàn)代瀏覽器渲染頁面的過程是這樣的：HTML以構(gòu)建DOM樹 –> 構(gòu)建渲染樹 –> 布局渲染樹 –> 繪制渲染樹。
DOM樹是由HTML文件中的標(biāo)簽排列組成，渲染樹是在DOM樹中加入CSS或HTML中的style樣式而形成。渲染樹只包含需要顯示在頁面中的DOM元素，像<head>元素或display屬性值為none的元素都不在渲染樹中。
在瀏覽器還沒接收到完整的HTML文件時，它就開始渲染頁面了，在遇到外部鏈入的腳本標(biāo)簽或樣式標(biāo)簽或圖片時，會再次發(fā)送HTTP請求重復(fù)上述的步驟。在收到CSS文件后會對已經(jīng)渲染的頁面重新渲染，加入它們應(yīng)有的樣式，圖片文件加載完立刻顯示在相應(yīng)位置。在這一過程中可能會觸發(fā)頁面的重繪或重排。