虛擬DOM

1、真實DOM和其解析流程？

    瀏覽器渲染引擎工做流程都差很少，大體分爲5步，建立DOM樹——建立StyleRules——建立Render樹——佈局Layout——繪製Painting

    第一步，用HTML分析器，分析HTML元素，構建一顆DOM樹(標記化和樹構建)。

    第二步，用CSS分析器，分析CSS文件和元素上的inline樣式，生成頁面的樣式表。

    第三步，將DOM樹和樣式表，關聯起來，構建一顆Render樹(這一過程又稱爲Attachment)。每一個DOM節點都有attach方法，接受樣式信息，返回一個render對象(又名renderer)。這些render對象最終會被構建成一顆Render樹。

    第四步，有了Render樹，瀏覽器開始佈局，爲每一個Render樹上的節點肯定一個在顯示屏上出現的精確座標。

    第五步，Render樹和節點顯示座標都有了，就調用每一個節點paint方法，把它們繪製出來。 

    DOM樹的構建是文檔加載完成開始的？構建DOM數是一個漸進過程，爲達到更好用戶體驗，渲染引擎會盡快將內容顯示在屏幕上。它沒必要等到整個HTML文檔解析完畢以後纔開始構建render數和佈局。

    Render樹是DOM樹和CSSOM樹構建完畢纔開始構建的嗎？這三個過程在實際進行的時候又不是徹底獨立，而是會有交叉。會形成一邊加載，一遍解析，一遍渲染的工做現象。

    CSS的解析是從右往左逆向解析的(從DOM樹的下－上解析比上－下解析效率高)，嵌套標籤越多，解析越慢。

 

webkit渲染引擎工做流程

2、JS操做真實DOM的代價！

        用咱們傳統的開發模式，原生JS或JQ操做DOM時，瀏覽器會從構建DOM樹開始從頭至尾執行一遍流程。在一次操做中，我須要更新10個DOM節點，瀏覽器收到第一個DOM請求後並不知道還有9次更新操做，所以會立刻執行流程，最終執行10次。例如，第一次計算完，緊接着下一個DOM更新請求，這個節點的座標值就變了，前一次計算爲無用功。計算DOM節點座標值等都是白白浪費的性能。即便計算機硬件一直在迭代更新，操做DOM的代價仍舊是昂貴的，頻繁操做仍是會出現頁面卡頓，影響用戶體驗。

3、爲何須要虛擬DOM，它有什麼好處?

        Web界面由DOM樹(樹的意思是數據結構)來構建，當其中一部分發生變化時，其實就是對應某個DOM節點發生了變化，

        虛擬DOM就是爲了解決瀏覽器性能問題而被設計出來的。如前，若一次操做中有10次更新DOM的動做，虛擬DOM不會當即操做DOM，而是將這10次更新的diff內容保存到本地一個JS對象中，最終將這個JS對象一次性attch到DOM樹上，再進行後續操做，避免大量無謂的計算量。因此，用JS對象模擬DOM節點的好處是，頁面的更新能夠先所有反映在JS對象(虛擬DOM)上，操做內存中的JS對象的速度顯然要更快，等更新完成後，再將最終的JS對象映射成真實的DOM，交由瀏覽器去繪製。

做者：LoveBugs_King 連接：https://www.jianshu.com/p/af0b398602bc 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。