1.背景介紹
當你在瀏覽器地址欄輸入一個URL后回車，將會發生的事情？這是一道經典的面試題，同時也是一道復雜的題目，涉及到很多東西，不同的軟件開發者對於此道問題有不同的答案，對於其中的某一點也能無限深究，今天我們就來側重於web前端來看一下究竟發生了什么。
2.知識剖析
基本流程：
①查詢ip地址
②建立tcp連接，接入服務器
③瀏覽器發起http請求
④服務器后台操作並做出http響應
⑤網頁的解析與渲染
3.常見問題
具體步驟？
4.解決方案
查詢ip地址
①瀏覽器解析出url中的域名。
②查詢瀏覽器的DNS緩存。
③瀏覽器中沒有DNS緩存，則查找本地客戶端hosts文件有無對應的ip地址。
④hosts中無，則查找本地DNS服務器（運營商提供的DNS服務器）有無對應的DNS緩存。
⑤若本地DNS沒有DNS緩存，則向根服務器查詢，進行遞歸查找。
⑥遞歸查找從頂級域名開始（如.com）,一步步縮小范圍，最終客戶端取得ip地址。
tcp連接與http連接
①http協議建立在tcp協議之上，http請求前，需先進行tcp連接，形成客戶端到服務器的穩定的通道。俗稱TCP的三次握手。
②tcp連接完成后，http請求開始，請求有多種方式，常見的有get，post等。
③http請求包含請求頭，也可能包含請求體兩部分，請求頭中包含我們希望對請求文件的操作的信息，請求體中包含傳遞給后台的參數。
④服務器收到http請求后，后台開始工作，如負載平衡，跨域等，這里就是后端的工作了。
⑤文件處理完畢，生成響應數據包，響應也包含兩部分，響應頭和相應體，響應體就是我們所請求的文件。
⑥經過網絡傳輸，文件被下載到本地客戶端，客戶端開始加載。
html渲染
①客戶端瀏覽器加載了html文件后，由上到下解析html為DOM樹（DOM Tree）。
②遇到css文件，css中的url發起http請求。
③這是第二次http請求，由於http1.1協議增加了Connection: keep-alive聲明，故tcp連接不會關閉，可以復用。
④http連接是無狀態連接，客戶端與服務器端需要重新發起請求--響應。
在請求css的過程中，解析器繼續解析html，然后到了script標簽。
⑤由於script可能會改變DOM結構，故解析器停止生成DOM樹，解析器被js阻塞，等待js文件發起http請求，然后加載。這是第三次http請求。js執行完成后解析器繼續解析。
⑥由於css文件可能會影響js文件的執行結果，因此需等css文件加載完成后再執行。
⑦瀏覽器收到css文件后，開始解析css文件為CSSOM樹（CSS Rule Tree）。
⑧CSSOM樹生成后，DOM Tree與CSS Rule Tree結合生成渲染樹（Render Tree）。
⑨Render Tree會被css文件阻塞，渲染樹生成后，先布局，繪制渲染樹中節點的屬性(位置，寬度，大小等)，然后渲染，頁面就會呈現信息。
⑩繼續邊解析邊渲染，遇到了另一個js文件，js文件執行后改變了DOM樹，渲染樹從被改變的dom開始再次渲染。
⑪繼續向下渲染，碰到一個img標簽，瀏覽器發起http請求，不會等待img加載完成，繼續向下渲染，之后再重新渲染此部分。
⑫DOM樹遇到html結束標簽，停止解析，進而渲染結束。
5.編碼實戰
6.擴展思考
有那些網站優化的方法？
①減少DNS查詢:將服務器域名的ip信息加入本地host文件。
②減少http請求數量，對於圖片使用雪碧圖,對於html文件和css文件，js文件分別進行合並操作。
③減少下載時間：壓縮圖片，使用壓縮應用壓縮文檔中的空格，刪除文件多余的語句和注釋，創造自己的js精簡庫和精簡框架,使用本地瀏覽器緩存。
④提前渲染開始時間：將css鏈接放在html頭部。
⑤減輕解析器的阻塞：將js鏈接放在body尾部。
7.參考文獻
參考一：http://www.jianshu.com/p/5b069ae8c4f2
參考二：http://blog.csdn.net/android1514/article/details/51281494
作者：xiaoyudesu
鏈接：http://www.jianshu.com/p/69c2cf84b407
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。