vue中虛擬節點原理

/vuejs/vue/blob/dev/src/core/vdom/vnode.js

待辦項：

1）截取虛擬dom的方法出來，以及下面的四種diff

replace: 替換整個節點，某個節點值不壹樣

text：只是更新文本

reorder：移動／增加／刪除子節點

props：節點的屬性變了

瀏覽器渲染引擎工作流程都差不多，大致分為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樹的下－上解析比上－下解析效率高)， 嵌套標簽越多，解析越慢。