一捂齐、真實DOM和其解析流程蛮放？
? ? 瀏覽器渲染引擎工作流程都差不多，大致分為5步奠宜，創(chuàng)建DOM樹——創(chuàng)建StyleRules——創(chuàng)建Render樹——布局Layout——繪制Painting
????第一步包颁，用HTML分析器，分析HTML元素压真，構(gòu)建一顆DOM樹(標(biāo)記化和樹構(gòu)建)徘六。
? ? 第二步，用CSS分析器榴都，分析CSS文件和元素上的inline樣式，生成頁面的樣式表漠其。
? ? 第三步嘴高，將DOM樹和樣式表，關(guān)聯(lián)起來和屎，構(gòu)建一顆Render樹(這一過程又稱為Attachment)拴驮。每個DOM節(jié)點(diǎn)都有attach方法，接受樣式信息柴信，返回一個render對象(又名renderer)套啤。這些render對象最終會被構(gòu)建成一顆Render樹。
? ? 第四步随常，有了Render樹潜沦，瀏覽器開始布局萄涯，為每個Render樹上的節(jié)點(diǎn)確定一個在顯示屏上出現(xiàn)的精確坐標(biāo)坪它。
? ? 第五步绩社，Render樹和節(jié)點(diǎn)顯示坐標(biāo)都有了讯屈，就調(diào)用每個節(jié)點(diǎn)paint方法衅澈，把它們繪制出來个扰。?
? ? DOM樹的構(gòu)建是文檔加載完成開始的恃泪？構(gòu)建DOM數(shù)是一個漸進(jìn)過程谈撒，為達(dá)到更好用戶體驗坑律，渲染引擎會盡快將內(nèi)容顯示在屏幕上臂痕。它不必等到整個HTML文檔解析完畢之后才開始構(gòu)建render數(shù)和布局伯襟。
? ? Render樹是DOM樹和CSSOM樹構(gòu)建完畢才開始構(gòu)建的嗎？這三個過程在實際進(jìn)行的時候又不是完全獨(dú)立握童，而是會有交叉姆怪。會造成一邊加載，一遍解析舆瘪，一遍渲染的工作現(xiàn)象片效。
? ? CSS的解析是從右往左逆向解析的(從DOM樹的下－上解析比上－下解析效率高)，嵌套標(biāo)簽越多英古，解析越慢淀衣。
二、JS操作真實DOM的代價召调！
????????用我們傳統(tǒng)的開發(fā)模式膨桥，原生JS或JQ操作DOM時，瀏覽器會從構(gòu)建DOM樹開始從頭到尾執(zhí)行一遍流程唠叛。在一次操作中只嚣，我需要更新10個DOM節(jié)點(diǎn)，瀏覽器收到第一個DOM請求后并不知道還有9次更新操作艺沼，因此會馬上執(zhí)行流程册舞，最終執(zhí)行10次。例如障般，第一次計算完调鲸，緊接著下一個DOM更新請求，這個節(jié)點(diǎn)的坐標(biāo)值就變了挽荡，前一次計算為無用功藐石。計算DOM節(jié)點(diǎn)坐標(biāo)值等都是白白浪費(fèi)的性能。即使計算機(jī)硬件一直在迭代更新定拟，操作DOM的代價仍舊是昂貴的于微，頻繁操作還是會出現(xiàn)頁面卡頓，影響用戶體驗。
三株依、為什么需要虛擬DOM驱证，它有什么好處?
? ? ? ? Web界面由DOM樹(樹的意思是數(shù)據(jù)結(jié)構(gòu))來構(gòu)建，當(dāng)其中一部分發(fā)生變化時勺三，其實就是對應(yīng)某個DOM節(jié)點(diǎn)發(fā)生了變化雷滚，
????????虛擬DOM就是為了解決瀏覽器性能問題而被設(shè)計出來的。如前吗坚，若一次操作中有10次更新DOM的動作祈远，虛擬DOM不會立即操作DOM，而是將這10次更新的diff內(nèi)容保存到本地一個JS對象中商源，最終將這個JS對象一次性attch到DOM樹上车份，再進(jìn)行后續(xù)操作，避免大量無謂的計算量牡彻。所以扫沼，用JS對象模擬DOM節(jié)點(diǎn)的好處是，頁面的更新可以先全部反映在JS對象(虛擬DOM)上庄吼，操作內(nèi)存中的JS對象的速度顯然要更快缎除，等更新完成后，再將最終的JS對象映射成真實的DOM总寻，交由瀏覽器去繪制器罐。
四、實現(xiàn)虛擬DOM
? ? ? ? 例如一個真實的DOM節(jié)點(diǎn)渐行。
????????我們用JS來模擬DOM節(jié)點(diǎn)實現(xiàn)虛擬DOM轰坊。
? ? ? ? 其中的Element方法具體怎么實現(xiàn)的呢？
????????第一個參數(shù)是節(jié)點(diǎn)名（如div）祟印，第二個參數(shù)是節(jié)點(diǎn)的屬性（如class）肴沫，第三個參數(shù)是子節(jié)點(diǎn)（如ul的li）。除了這三個參數(shù)會被保存在對象上外蕴忆，還保存了key和count颤芬。其相當(dāng)于形成了虛擬DOM樹。
? ? ? ? 有了JS對象后套鹅，最終還需要將其映射成真實DOM
? ? ? ? 我們已經(jīng)完成了創(chuàng)建虛擬DOM并將其映射成真實DOM驻襟，這樣所有的更新都可以先反應(yīng)到虛擬DOM上，如何反應(yīng)芋哭？需要用到Diff算法。
? ? ? ? 兩棵樹如果完全比較時間復(fù)雜度是O(n^3)郁副，但參照《深入淺出React和Redux》一書中的介紹减牺，React的Diff算法的時間復(fù)雜度是O(n)。要實現(xiàn)這么低的時間復(fù)雜度，意味著只能平層的比較兩棵樹的節(jié)點(diǎn)拔疚，放棄了深度遍歷肥隆。這樣做，似乎犧牲掉了一定的精確性來換取速度稚失，但考慮到現(xiàn)實中前端頁面通常也不會跨層移動DOM元素栋艳，這樣做是最優(yōu)的。
? ? ? ? 深度優(yōu)先遍歷句各，記錄差異
? ? ? ? 吸占。。凿宾。矾屯。
? ? ? ? Diff操作
? ? ? ? 在實際代碼中，會對新舊兩棵樹進(jìn)行一個深度的遍歷初厚，每個節(jié)點(diǎn)都會有一個標(biāo)記件蚕。每遍歷到一個節(jié)點(diǎn)就把該節(jié)點(diǎn)和新的樹進(jìn)行對比，如果有差異就記錄到一個對象中产禾。
? ? ? ? 下面我們創(chuàng)建一棵新樹排作，用于和之前的樹進(jìn)行比較，來看看Diff算法是怎么操作的亚情。
? ? ? ? 平層Diff妄痪，只有以下4種情況：
? ? ? ? 1、節(jié)點(diǎn)類型變了势似，例如下圖中的P變成了H3拌夏。我們將這個過程稱之為REPLACE。直接將舊節(jié)點(diǎn)卸載并裝載新節(jié)點(diǎn)履因。舊節(jié)點(diǎn)包括下面的子節(jié)點(diǎn)都將被卸載障簿，如果新節(jié)點(diǎn)和舊節(jié)點(diǎn)僅僅是類型不同，但下面的所有子節(jié)點(diǎn)都一樣時栅迄，這樣做效率不高站故。但為了避免O(n^3)的時間復(fù)雜度，這樣是值得的毅舆。這也提醒了開發(fā)者西篓，應(yīng)該避免無謂的節(jié)點(diǎn)類型的變化，例如運(yùn)行時將div變成p沒有意義憋活。
? ? ? ? 2岂津、節(jié)點(diǎn)類型一樣，僅僅屬性或?qū)傩灾底兞恕?/b>我們將這個過程稱之為PROPS悦即。此時不會觸發(fā)節(jié)點(diǎn)卸載和裝載吮成，而是節(jié)點(diǎn)更新橱乱。
? ? ? ? 3、文本變了粱甫，文本對也是一個Text Node泳叠，也比較簡單，直接修改文字內(nèi)容就行了茶宵，我們將這個過程稱之為TEXT危纫。
? ? ? ? 4、移動／增加／刪除 子節(jié)點(diǎn)乌庶，我們將這個過程稱之為REORDER种蝶。看一個例子安拟，在A蛤吓、B、C糠赦、D会傲、E五個節(jié)點(diǎn)的B和C中的BC兩個節(jié)點(diǎn)中間加入一個F節(jié)點(diǎn)。
? ? ? ? 我們簡單粗暴的做法是遍歷每一個新虛擬DOM的節(jié)點(diǎn)拙泽，與舊虛擬DOM對比相應(yīng)節(jié)點(diǎn)對比淌山，在舊DOM中是否存在，不同就卸載原來的按上新的顾瞻。這樣會對F后邊每一個節(jié)點(diǎn)進(jìn)行操作泼疑。卸載C，裝載F荷荤，卸載D退渗，裝載C，卸載E蕴纳，裝載D会油，裝載E。效率太低古毛。
? ? ? ? 如果我們在JSX里為數(shù)組或枚舉型元素增加上key后翻翩，它能夠根據(jù)key，直接找到具體位置進(jìn)行操作稻薇，效率比較高嫂冻。常見的最小編輯距離問題，可以用Levenshtein Distance算法來實現(xiàn)塞椎，時間復(fù)雜度是O(M*N)桨仿，但通常我們只要一些簡單的移動就能滿足需要，降低精確性案狠，將時間復(fù)雜度降低到O(max(M,N))即可服傍。
映射成真實DOM
? ??????虛擬DOM有了暇昂，Diff也有了，現(xiàn)在就可以將Diff應(yīng)用到真實DOM上了伴嗡。深度遍歷DOM將Diff的內(nèi)容更新進(jìn)去。
我們會有兩個虛擬DOM(js對象从铲，new/old進(jìn)行比較diff)瘪校，用戶交互我們操作數(shù)據(jù)變化new虛擬DOM，old虛擬DOM會映射成實際DOM(js對象生成的DOM文檔)通過DOM fragment操作給瀏覽器渲染名段。當(dāng)修改new虛擬DOM阱扬，會把newDOM和oldDOM通過diff算法比較，得出diff結(jié)果數(shù)據(jù)表(用4種變換情況表示)伸辟。再把diff結(jié)果表通過DOM?fragment更新到瀏覽器DOM中麻惶。
虛擬DOM的存在的意義？vdom 的真正意義是為了實現(xiàn)跨平臺信夫，服務(wù)端渲染窃蹋，以及提供一個性能還算不錯 Dom 更新策略。vdom 讓整個 mvvm 框架靈活了起來
Diff算法只是為了虛擬DOM比較替換效率更高静稻，通過Diff算法得到diff算法結(jié)果數(shù)據(jù)表(需要進(jìn)行哪些操作記錄表)警没。原本要操作的DOM在vue這邊還是要操作的，只不過用到了js的DOM?fragment來操作dom（統(tǒng)一計算出所有變化后統(tǒng)一更新一次DOM）進(jìn)行瀏覽器DOM一次性更新振湾。其實DOM?fragment我們不用平時發(fā)開也能用杀迹，但是這樣程序員寫業(yè)務(wù)代碼就用把DOM操作放到fragment里，這就是框架的價值押搪，程序員才能專注于寫業(yè)務(wù)代碼树酪。
