使用者輸入url位址，浏覽器根據域名尋找ip位址
浏覽器向伺服器發送http請求，如果伺服器段傳回以301之類的重定向，浏覽器根據相應頭中的location再次發送請求
伺服器端接受請求，處理請求生成html代碼，傳回給浏覽器，這時的html頁面代碼可能是經過壓縮的
浏覽器接收伺服器響應結果，如果有壓縮則首先進行解壓處理，緊接着就是頁面解析渲染
解析渲染該過程主要分為以下步驟：
解析html
建構dom樹
dom樹與css樣式進行附着構造呈現樹
布局
繪制
解析與建構dom樹
1）外部樣式會阻塞後續腳本執行，直到外部樣式加載并解析完畢。
2）外部樣式不會阻塞後續外部腳本的加載，但會阻塞外部腳本的執行。
從瀑布圖中我們可以看到，外部腳本與外部樣式是并行加載，但直到外部樣式加載完畢，外部腳本才開始執行
3）如果後續外部腳本含有async屬性（ie下為defer），則外部樣式不會阻塞該腳本的加載與執行
從瀑布圖中可以看到外部腳本的加載與執行并不受link的阻塞
4）對于動态建立的link标簽不會阻塞其後動态建立的script的加載與執行，不管script标簽是否具有async屬性，但對于其他非動态建立的script，以上三條結論仍适用
這是最終頁面結構
通過瀑布圖與頁面結果可以看到動态建立的外部腳本并未受link的阻塞。
link或style标簽都會被解析成dom節點。浏覽器對于樣式表還會生成cssstylesheet對象(c++代碼)，他內建子cssstyle，名額是樣式表對象而不管該對象來自于style還是link。該對象主要包含以下幾個重要屬性和方法
cssrules 即css樣式代碼
type 表示樣式表類型的字元串。對css樣式表而言，這個字元串是“type/css”。
href 通過link生成的為樣式連結，否則為undefined
insertrule(rule,index)：向cssrules集合中指定的位置插入rule字元串。ie不支援這個方法，但支援一個類似的addrule()方法。
deleterule(index)：删除cssrules集合中指定的位置的規則。ie不支援這個方法，但支援一個類似的removerule()方法。
文檔中對于所有的樣式表集合可以通過document.stylesheets來通路。同時對于style或link dom元素可以通過element.sheet來通路cssstylesheet對象，ie中則通過element.stylesheet來通路。
html解析完畢，dom樹建立完成後domcontentloaded事件即觸發，這時候可以用過script來操作dom節點。
建構呈現樹
html解析完畢後，開始建構呈現樹rendertree，這一步的主要工作在于将css樣式應用到dom節點上，webkit核心将這一過程稱為附着，其他浏覽器有不同的概念。對前端工程師而言這個過程會涉及到css層疊問題。
首先将根據樣式重要性排序，由低到高依次為：
浏覽器聲明
使用者普通聲明
作者普通聲明
作者重要聲明
使用者重要聲明
對于同一重要級别，則是根據css選擇符的特指度來判定優先級；一條樣式聲明的特指度由以下四個部分決定：s-i-c-e
聲明來自内聯的style屬性則 s+1；
聲明中含有id屬性則 i+1；
聲明中含有類、僞類、屬性選擇器則 c+1；
生命中含有元素、僞元素選擇器則 e+1；
特指度的比較類似于兩個字元串之間比較大小。
呈現樹的每一個節點即為與其相對應的dom節點的css框，框的類型與dom節點的display屬性有關，block元素生成block框，inline元素生成inline框。每一個呈現樹節點都有與之相對應的dom節點，但dom節點不一定有與之相對應的呈現樹節點，比如display屬性為none的dom節點，而且呈現樹節點在呈現樹中的位置與他們在dom樹中的位置不一定相同，比如float與絕對定位元素。
下圖為呈現樹與其相對應的dom樹節點
呈現樹構造完成後浏覽器便進行布局處理，及計算每個呈現樹節點的大小和位置資訊。有道友可能要問，前面已将樣式附着到dom節點上，不是已經有了樣式資訊為何還要計算大小。這裡可以這樣了解，以上包含大小的樣式資訊隻是存在記憶體裡，并沒有實際使用，浏覽器要根據視窗的實際大小來處理呈現樹節點的實際顯示大小和位置，比如對于margin為auto的處理。
布局是一個遞歸過程，從跟呈現節點開始，遞歸周遊子節點，計算集合幾何資訊。具體過程還是比較複雜偶也不甚了解，道友們還是查閱其他資料吧。
布局完成後，便是将呈現樹繪制出來顯示在螢幕上。對于每一個呈現樹節點來說，主要繪制順序如下：
背景顔色
背景圖檔
邊框
子呈現樹節點
輪廓
參考資料：
<a href="http://velocity.oreilly.com.cn/2010/ppts/limufromtaobao.pdf">http://velocity.oreilly.com.cn/2010/ppts/limufromtaobao.pdf</a>
<a href="http://lifesinger.wordpress.com/">http://lifesinger.wordpress.com/</a>
<a href="http://hikejun.com/blog/2012/02/02/js%e5%92%8ccss%e7%9a%84%e9%a1%ba%e5%ba%8f%e5%85%b3%e7%b3%bb/">http://hikejun.com/blog/2012/02/02/js%e5%92%8ccss%e7%9a%84%e9%a1%ba%e5%ba%8f%e5%85%b3%e7%b3%bb/</a>
<a href="http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/">http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/</a>
<a href="http://www.2cto.com/kf/201406/305852.html">http://www.2cto.com/kf/201406/305852.html</a>
<a href="http://www.w3cmm.com/dom/document-stylesheets-getstylesheet.html">http://www.w3cmm.com/dom/document-stylesheets-getstylesheet.html</a>
http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html
文章有錯誤之處歡迎各位道友不吝指正