一、真實(shí)DOM和其解析流程？
? ? 瀏覽器渲染引擎工作流程都差不多，大致分為5步，創(chuàng)建DOM樹(shù)——?jiǎng)?chuàng)建StyleRules——?jiǎng)?chuàng)建Render樹(shù)——布局Layout——繪制Painting
????第一步，用HTML分析器，分析HTML元素，構(gòu)建一顆DOM樹(shù)(標(biāo)記化和樹(shù)構(gòu)建)。
? ? 第二步，用CSS分析器，分析CSS文件和元素上的inline樣式，生成頁(yè)面的樣式表。
? ? 第三步，將DOM樹(shù)和樣式表，關(guān)聯(lián)起來(lái)，構(gòu)建一顆Render樹(shù)(這一過(guò)程又稱(chēng)為Attachment)。每個(gè)DOM節(jié)點(diǎn)都有attach方法，接受樣式信息，返回一個(gè)render對(duì)象(又名renderer)。這些render對(duì)象最終會(huì)被構(gòu)建成一顆Render樹(shù)。
? ? 第四步，有了Render樹(shù)，瀏覽器開(kāi)始布局，為每個(gè)Render樹(shù)上的節(jié)點(diǎn)確定一個(gè)在顯示屏上出現(xiàn)的精確坐標(biāo)。
? ? 第五步，Render樹(shù)和節(jié)點(diǎn)顯示坐標(biāo)都有了，就調(diào)用每個(gè)節(jié)點(diǎn)paint方法，把它們繪制出來(lái)。?
? ? DOM樹(shù)的構(gòu)建是文檔加載完成開(kāi)始的？構(gòu)建DOM數(shù)是一個(gè)漸進(jìn)過(guò)程，為達(dá)到更好用戶(hù)體驗(yàn)，渲染引擎會(huì)盡快將內(nèi)容顯示在屏幕上。它不必等到整個(gè)HTML文檔解析完畢之后才開(kāi)始構(gòu)建render數(shù)和布局。
? ? Render樹(shù)是DOM樹(shù)和CSSOM樹(shù)構(gòu)建完畢才開(kāi)始構(gòu)建的嗎？這三個(gè)過(guò)程在實(shí)際進(jìn)行的時(shí)候又不是完全獨(dú)立，而是會(huì)有交叉。會(huì)造成一邊加載，一遍解析，一遍渲染的工作現(xiàn)象。
? ? CSS的解析是從右往左逆向解析的(從DOM樹(shù)的下－上解析比上－下解析效率高)，嵌套標(biāo)簽越多，解析越慢。
二、JS操作真實(shí)DOM的代價(jià)！
????????用我們傳統(tǒng)的開(kāi)發(fā)模式，原生JS或JQ操作DOM時(shí)，瀏覽器會(huì)從構(gòu)建DOM樹(shù)開(kāi)始從頭到尾執(zhí)行一遍流程。在一次操作中，我需要更新10個(gè)DOM節(jié)點(diǎn)，瀏覽器收到第一個(gè)DOM請(qǐng)求后并不知道還有9次更新操作，因此會(huì)馬上執(zhí)行流程，最終執(zhí)行10次。例如，第一次計(jì)算完，緊接著下一個(gè)DOM更新請(qǐng)求，這個(gè)節(jié)點(diǎn)的坐標(biāo)值就變了，前一次計(jì)算為無(wú)用功。計(jì)算DOM節(jié)點(diǎn)坐標(biāo)值等都是白白浪費(fèi)的性能。即使計(jì)算機(jī)硬件一直在迭代更新，操作DOM的代價(jià)仍舊是昂貴的，頻繁操作還是會(huì)出現(xiàn)頁(yè)面卡頓，影響用戶(hù)體驗(yàn)。
三、為什么需要虛擬DOM，它有什么好處?
? ? ? ? Web界面由DOM樹(shù)(樹(shù)的意思是數(shù)據(jù)結(jié)構(gòu))來(lái)構(gòu)建，當(dāng)其中一部分發(fā)生變化時(shí)，其實(shí)就是對(duì)應(yīng)某個(gè)DOM節(jié)點(diǎn)發(fā)生了變化，
????????虛擬DOM就是為了解決瀏覽器性能問(wèn)題而被設(shè)計(jì)出來(lái)的。如前，若一次操作中有10次更新DOM的動(dòng)作，虛擬DOM不會(huì)立即操作DOM，而是將這10次更新的diff內(nèi)容保存到本地一個(gè)JS對(duì)象中，最終將這個(gè)JS對(duì)象一次性attch到DOM樹(shù)上，再進(jìn)行后續(xù)操作，避免大量無(wú)謂的計(jì)算量。所以，用JS對(duì)象模擬DOM節(jié)點(diǎn)的好處是，頁(yè)面的更新可以先全部反映在JS對(duì)象(虛擬DOM)上，操作內(nèi)存中的JS對(duì)象的速度顯然要更快，等更新完成后，再將最終的JS對(duì)象映射成真實(shí)的DOM，交由瀏覽器去繪制。
四、實(shí)現(xiàn)虛擬DOM
? ? ? ? 例如一個(gè)真實(shí)的DOM節(jié)點(diǎn)。
????????我們用JS來(lái)模擬DOM節(jié)點(diǎn)實(shí)現(xiàn)虛擬DOM。
? ? ? ? 其中的Element方法具體怎么實(shí)現(xiàn)的呢？
????????第一個(gè)參數(shù)是節(jié)點(diǎn)名（如div），第二個(gè)參數(shù)是節(jié)點(diǎn)的屬性（如class），第三個(gè)參數(shù)是子節(jié)點(diǎn)（如ul的li）。除了這三個(gè)參數(shù)會(huì)被保存在對(duì)象上外，還保存了key和count。其相當(dāng)于形成了虛擬DOM樹(shù)。
? ? ? ? 有了JS對(duì)象后，最終還需要將其映射成真實(shí)DOM
? ? ? ? 我們已經(jīng)完成了創(chuàng)建虛擬DOM并將其映射成真實(shí)DOM，這樣所有的更新都可以先反應(yīng)到虛擬DOM上，如何反應(yīng)？需要用到Diff算法。
? ? ? ? 兩棵樹(shù)如果完全比較時(shí)間復(fù)雜度是O(n^3)，但參照《深入淺出React和Redux》一書(shū)中的介紹，React的Diff算法的時(shí)間復(fù)雜度是O(n)。要實(shí)現(xiàn)這么低的時(shí)間復(fù)雜度，意味著只能平層的比較兩棵樹(shù)的節(jié)點(diǎn)，放棄了深度遍歷。這樣做，似乎犧牲掉了一定的精確性來(lái)?yè)Q取速度，但考慮到現(xiàn)實(shí)中前端頁(yè)面通常也不會(huì)跨層移動(dòng)DOM元素，這樣做是最優(yōu)的。
? ? ? ? 深度優(yōu)先遍歷，記錄差異
? ? ? ? 。。。。
? ? ? ? Diff操作
? ? ? ? 在實(shí)際代碼中，會(huì)對(duì)新舊兩棵樹(shù)進(jìn)行一個(gè)深度的遍歷，每個(gè)節(jié)點(diǎn)都會(huì)有一個(gè)標(biāo)記。每遍歷到一個(gè)節(jié)點(diǎn)就把該節(jié)點(diǎn)和新的樹(shù)進(jìn)行對(duì)比，如果有差異就記錄到一個(gè)對(duì)象中。
? ? ? ? 下面我們創(chuàng)建一棵新樹(shù)，用于和之前的樹(shù)進(jìn)行比較，來(lái)看看Diff算法是怎么操作的。
? ? ? ? 平層Diff，只有以下4種情況：
? ? ? ? 1、節(jié)點(diǎn)類(lèi)型變了，例如下圖中的P變成了H3。我們將這個(gè)過(guò)程稱(chēng)之為REPLACE。直接將舊節(jié)點(diǎn)卸載并裝載新節(jié)點(diǎn)。舊節(jié)點(diǎn)包括下面的子節(jié)點(diǎn)都將被卸載，如果新節(jié)點(diǎn)和舊節(jié)點(diǎn)僅僅是類(lèi)型不同，但下面的所有子節(jié)點(diǎn)都一樣時(shí)，這樣做效率不高。但為了避免O(n^3)的時(shí)間復(fù)雜度，這樣是值得的。這也提醒了開(kāi)發(fā)者，應(yīng)該避免無(wú)謂的節(jié)點(diǎn)類(lèi)型的變化，例如運(yùn)行時(shí)將div變成p沒(méi)有意義。
? ? ? ? 2、節(jié)點(diǎn)類(lèi)型一樣，僅僅屬性或?qū)傩灾底兞恕?/b>我們將這個(gè)過(guò)程稱(chēng)之為PROPS。此時(shí)不會(huì)觸發(fā)節(jié)點(diǎn)卸載和裝載，而是節(jié)點(diǎn)更新。
? ? ? ? 3、文本變了，文本對(duì)也是一個(gè)Text Node，也比較簡(jiǎn)單，直接修改文字內(nèi)容就行了，我們將這個(gè)過(guò)程稱(chēng)之為TEXT。
? ? ? ? 4、移動(dòng)／增加／刪除 子節(jié)點(diǎn)，我們將這個(gè)過(guò)程稱(chēng)之為REORDER。看一個(gè)例子，在A、B、C、D、E五個(gè)節(jié)點(diǎn)的B和C中的BC兩個(gè)節(jié)點(diǎn)中間加入一個(gè)F節(jié)點(diǎn)。
? ? ? ? 我們簡(jiǎn)單粗暴的做法是遍歷每一個(gè)新虛擬DOM的節(jié)點(diǎn)，與舊虛擬DOM對(duì)比相應(yīng)節(jié)點(diǎn)對(duì)比，在舊DOM中是否存在，不同就卸載原來(lái)的按上新的。這樣會(huì)對(duì)F后邊每一個(gè)節(jié)點(diǎn)進(jìn)行操作。卸載C，裝載F，卸載D，裝載C，卸載E，裝載D，裝載E。效率太低。
? ? ? ? 如果我們?cè)贘SX里為數(shù)組或枚舉型元素增加上key后，它能夠根據(jù)key，直接找到具體位置進(jìn)行操作，效率比較高。常見(jiàn)的最小編輯距離問(wèn)題，可以用Levenshtein Distance算法來(lái)實(shí)現(xiàn)，時(shí)間復(fù)雜度是O(M*N)，但通常我們只要一些簡(jiǎn)單的移動(dòng)就能滿(mǎn)足需要，降低精確性，將時(shí)間復(fù)雜度降低到O(max(M,N))即可。
映射成真實(shí)DOM
? ??????虛擬DOM有了，Diff也有了，現(xiàn)在就可以將Diff應(yīng)用到真實(shí)DOM上了。深度遍歷DOM將Diff的內(nèi)容更新進(jìn)去。
我們會(huì)有兩個(gè)虛擬DOM(js對(duì)象，new/old進(jìn)行比較diff)，用戶(hù)交互我們操作數(shù)據(jù)變化new虛擬DOM，old虛擬DOM會(huì)映射成實(shí)際DOM(js對(duì)象生成的DOM文檔)通過(guò)DOM fragment操作給瀏覽器渲染。當(dāng)修改new虛擬DOM，會(huì)把newDOM和oldDOM通過(guò)diff算法比較，得出diff結(jié)果數(shù)據(jù)表(用4種變換情況表示)。再把diff結(jié)果表通過(guò)DOM?fragment更新到瀏覽器DOM中。
虛擬DOM的存在的意義？vdom 的真正意義是為了實(shí)現(xiàn)跨平臺(tái)，服務(wù)端渲染，以及提供一個(gè)性能還算不錯(cuò) Dom 更新策略。vdom 讓整個(gè) mvvm 框架靈活了起來(lái)
Diff算法只是為了虛擬DOM比較替換效率更高，通過(guò)Diff算法得到diff算法結(jié)果數(shù)據(jù)表(需要進(jìn)行哪些操作記錄表)。原本要操作的DOM在vue這邊還是要操作的，只不過(guò)用到了js的DOM?fragment來(lái)操作dom（統(tǒng)一計(jì)算出所有變化后統(tǒng)一更新一次DOM）進(jìn)行瀏覽器DOM一次性更新。其實(shí)DOM?fragment我們不用平時(shí)發(fā)開(kāi)也能用，但是這樣程序員寫(xiě)業(yè)務(wù)代碼就用把DOM操作放到fragment里，這就是框架的價(jià)值，程序員才能專(zhuān)注于寫(xiě)業(yè)務(wù)代碼。
