無意中看到寒冬關於前端的九個問題，細細想來我也只是對第
一、二、九問有所了解，正好也趁著這個機會梳理一下自己的知識體系。由於本人對http協議以及dns對url的解析問題並不了解，所以這裡之**url請求載入到瀏覽器端時，瀏覽器對html的解析到呈現過程，後來經過幾位道友分享，整理了一下url解析的過程，如下：
使用者輸入url位址，瀏覽器根據網域名稱尋找ip位址
瀏覽器向伺服器傳送http請求，如果伺服器段返回以301之類的重定向，瀏覽器根據相應頭中的location再次傳送請求
伺服器端接受請求，處理請求生成html**，返回給瀏覽器，這時的html頁面**可能是經過壓縮的
瀏覽器接收伺服器響應結果，如果有壓縮則首先進行解壓處理，緊接著就是頁面解析渲染
解析渲染該過程主要分為以下步驟：
解析html
構建dom樹
dom樹與css樣式進行附著構造呈現樹
布局繪製
解析與構建dom樹
前兩步我們放在一起討論，瀏覽器的實際工作也是將他們放在一起進行的。對於html瀏覽器有專門的html解析器來解析html，並在解析的過程中構建dom樹。在這裡我們討論兩種dom元素的解析，即樣式（link、style）與指令碼檔案（script）。由於瀏覽器採用自上而下的方式解析，在遇到這兩種元素時都會阻塞瀏覽器的解析，直到外部資源載入並解析或執行完畢後才會繼續向下解析html。對於樣式與指令碼的先後順序同樣也會影響到瀏覽器的解析過程，究其原因主要在於：script指令碼執行過程中可能會修改html介面（如document.write函式）；dom節點的css樣式會影響js的執行結果。在我的測試中得到以下四條結論：
1）外部樣式會阻塞後續指令碼執行，直到外部樣式載入並解析完畢。
test
通過瀑布圖與頁面結果可以看到動態建立的外部指令碼並未受link的阻塞。
link或style標籤都會被解析成dom節點。瀏覽器對於樣式表還會生成cssstylesheet物件(c++**)，他整合子cssstyle，指標是樣式表物件而不管該物件來自於style還是link。該物件主要包含以下幾個重要屬性和方法
文件中對於所有的樣式表集合可以通過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的處理。
布局是乙個遞迴過程，從跟呈現節點開始，遞迴遍歷子節點，計算集合幾何資訊。具體過程還是比較複雜偶也不甚了解，道友們還是查閱其他資料吧。
繪製
布局完成後，便是將呈現樹繪製出來顯示在螢幕上。對於每乙個呈現樹節點來說，主要繪製順序如下：
背景顏色
背景邊框
子呈現樹節點
輪廓
HTML渲染過程
這裡的過程從伺服器返回html文件開始，瀏覽器請求伺服器的過程不多做介紹。解析html和構建dom是同時執行的，當瀏覽器收到html文件時，瀏覽器通過html直譯器解析html和構建dom樹。瀏覽器採用的是自上而下解析。所以在構建dom樹時兩個標籤會阻塞解析，就是會涉及到外部資源的link和scri...
html渲染過程
dom document object model 瀏覽器將html解析成樹形的資料結構，簡稱dom cssom css object model，瀏覽器將css 解析成樹形的資料結構 dom和cssom都是以bytes characters nodes object model 這樣的方式生成最終...
html渲染過程
直到外部資本載入並解析或履行結束後才會繼續向下解析html。關於款式與指令碼的先後順序相同也會影響到瀏覽器的解析程序，究其原因首要在於 script指令碼履行程序中可能會修改html介面 如document.write函式 dom節點的css款式會影響js的履行成果。在我的測驗中得到以下四條結論 1...