虛擬DOM的優劣如何

1、何爲虛擬DOM

解釋1：用js模擬一顆DOM樹，放在瀏覽器的內存中，當須要變動時，虛擬DOM進行diff算法進行新舊虛擬DOM的對比，將變動放入到隊列中。反應到實際的DOM上，減小DOM的操做。

解釋2：虛擬DOM將DOM轉換爲一顆js樹。diff算法逐級的進行比較、刪除、新增操做。可是若是存在多個相同的元素可能比浪費性能，因此React和Vue引用key值進行區分。

2、爲何DOM渲染慢？

所謂DOM渲染，即瀏覽器將HTML字符串轉換成網頁視圖並渲染視圖的過程。

1. 首先，瀏覽器的HTML解析器，會對HTML字符串進行解析，並將它轉換成DOM樹，同時，CSS解析器也會解析HTML使用到的CSS樣式，生成一系列CSS規則。
2. 而後瀏覽器的渲染引擎將DOM樹和CSS規則進行整合，並生成一個可用於視圖渲染的DOM渲染樹。
3. 接着肯定DOM佈局，即每個節點在瀏覽器中的確切位置。
4. 最後一步是進行繪製，將每個節點的每個像素都繪製在屏幕上。

爲了理解這一過程的複雜性，咱們能夠對HTML解析器的處理作一個特寫：在HTML解析器中，有兩個程序交替執行：分詞程序和解析程序；分詞程序負責將HTML字符串劃分紅合法的DOM標籤字符串，而後將它們交給用於處理的解析器，解析器將它們添加到正在構建的DOM樹中；當分詞器解析全部字符串時，將構建DOM樹。

您能夠理解爲何DOM呈現如此緩慢：這個過程真的太複雜了。在web頁面交互中添加和刪除DOM將大大下降視圖呈現和交互的效率。

3、爲何咱們要使用虛擬DOM？

• 保證性能下限
• 不須要手動優化的狀況下，我依然能夠給你提供過得去的性能
• 跨平臺

4、保證性能下線

框架的虛擬 DOM 須要適配任何上層 API 可能產生的操做，它的一些 DOM 操做的實現必須是普適的，因此它的性能並非最優的；可是比起粗暴的 DOM 操做性能要好不少，所以框架的虛擬 DOM 至少能夠保證在你不須要手動優化的狀況下，依然能夠提供還不錯的性能，即保證性能的下限；

例如比較 innerHTML vs. Virtual DOM 的重繪性能消耗：

• innerHTML: render html string O(template size) + 從新建立全部 DOM 元素 O(DOM size)
• Virtual DOM: render Virtual DOM + diff O(template size) + 必要的 DOM 更新 O(DOM change)

Virtual DOM render + diff 顯然比渲染 html 字符串要慢，可是！它依然是純 js 層面的計算，比起後面的 DOM 操做來講，依然便宜了太多。

能夠看到，innerHTML 的總計算量無論是 js 計算仍是 DOM 操做都是和整個界面的大小相關，但 Virtual DOM 的計算量裏面，只有 js 計算和界面大小相關，DOM 操做是和數據的變更量相關的。

前面說了，和 DOM 操做比起來，js 計算是極其便宜的。這纔是爲何要有 Virtual DOM：它保證了無論你的數據變化多少，每次重繪的性能均可以接受。保證了性能的下線。

5、不須要手動優化的狀況下，我依然能夠給你提供過得去的性能

這裏直接看看尤大大在知乎的一個解釋。

6、跨平臺

虛擬 DOM 本質上是 JavaScript 對象,而 DOM 與平臺強相關，相比之下虛擬 DOM 能夠進行更方便地跨平臺操做，例如服務器渲染、weex 開發等等。

參考：網上都說操做真實 DOM 慢，但測試結果卻比 React 更快，爲何？