傳統的DOM渲染方式

傳統的渲染方式分為四步 1、htmly用html解析器來解析瀏覽器在解析html文件時，會把html解析為一種稱為文件物件模型（document object model）的物件集合，簡稱dom。dom的結構是樹狀的。解析器通常把工作分給兩個元件——分詞程式負責把輸入切分成合法符號串行，解析程式負責按照句法規則分析文件結構和構建句法樹。詞法分析器知道如何過濾像空格，換行之類的無關字元。解析器輸出的樹是由ｄｏｍ元素和屬性節點組成的。解析的結果通常是乙個表徵文件的由節點組成的樹，稱為解析樹或句法樹。 2、css樣式表用css解析器來解析 css選擇器的讀取順序是從右向左。 #main div.hello span 如上先找到span然後順著往上找到class為「hello」的div再找到id為「main」的元素。成功匹配到則加入結果集，如果直到根元素html都沒有匹配，則不再遍歷這條路徑，從下乙個span開始重複這個過程。整個過程會形成一條符合規則的索引樹，樹由上至下的節點是規則中從右向左的乙個個選擇符匹配的節點。 3、dom樹和樣式表相結合生成乙個render樹

html解析完畢後，開始構建呈現樹rendertree，這一步的主要工作在於將css樣式應用到dom節點上。

css樹和dom樹連線在一起形成乙個render tree，渲染樹用來描述所有可見的dom內容，並且將css樣式資訊附加到節點上。

為了形成渲染樹，瀏覽器大致做的事情有:

1、從dom樹根節點開始，遍歷每乙個可見的節點

2、對每乙個可見的節點，找到合適的匹配的css規則，並且應用樣式

3、顯示可見節點（節點包括內容和被計算的樣式）

dom樹上的每個節點都有乙個attach方法，它接收計算好的樣式資訊，返回乙個render物件（又名renderer）

構建渲染樹時，由於包含了這些render物件，每個render物件都需要計算視覺屬性（visual properties）；這個過程通過計算每個元素的樣式屬性來完成。

4、瀏覽器會根據渲染的節點在頁面上進行渲染

構造了渲染樹以後，瀏覽器引擎開始著手布局（layout）。

瀏覽器將會通過遍歷渲染樹，呼叫每個節點的paint方法來繪製這些render物件。paint方法根據瀏覽器平台，使用不同的ui後端api（agnostic ui backend api）。通過繪製，最終將在螢幕上展示內容。

傳統的DOM渲染方式

傳統的DOM渲染方式？

傳統的DOM渲染方式

傳統的DOM渲染方式

相關推薦