爲何虛擬DOM更優勝一籌

注意： 虛擬DOM只是實現MVVM的一種方案，或者說是視圖更新的一種策略。沒有虛擬DOM比MVVM更好一說。

咱們回顧傳統MVC框架,如backbone,它是將某個模板編譯成模板函數,須要更新時,是本身手動將數據總體傳入模板函數, 獲得一個字符串,使用innerHTML刷新某個容器!注意,這裏其實能夠優化,但因爲是手動,是體力活,都是使用很粗放型的innerhTML了事 (使用jQuery的html方法性能會更差,不過好處是它處理了IE下的innerHTML BUG及全平臺的沒法執行內部的script標籤的BUG) 因爲總體替換,一會兒銷燬這麼多元素(有時還綁着事件,可能致使GC出問題),又要插入這麼多元素,再從新綁定事件(這個可使用事件代理緩解) 所以性能很是差

方案二是使用髒檢測的angular,要求對全部做用域對象進行diff,使用通知刷新函數進行視圖更新. 頁面上的指令越多,須要比較的數據越多(有循環, 須要乘以數組長度或對象鍵值對個數),可能用於循環時間過長致使頁面假死

方案三使用avalon這樣的密封艙方案(船底是分紅一個個獨立的區域,局部受損也不會致使沉船). avalon使用Object.defineProperty及VBS實現屬性監控, 這樣用戶修數據時,就能當即進入 事件總線系統(觀察者模式),而後取得與這屬性相關聯的訂閱者數組(換言之的密封艙,不像ng那樣, 一個$scope對象就一個$$watcher數組).而通常狀況下,VM中的某個屬性在視圖中也只會用到幾個位置, 那麼幾個位置,就會生成幾個綁定對象,都放在相應的訂閱者數組中,每一個訂閱者數組都不會太長. 所以同步視圖,不會所以遍歷的數組過長而假死.所以ng在處理2000個指令的頁面時就易出問題 (一個grid,每每有兩三重循環,很容就飆到5000個指令),而avalon的密封艙方案是能撐到12000個指令

但avalon須要保存大量的綁定對象,而且將普通屬性轉換訪問器屬性,也須要佔用內存,這是一個以空間換時間的方案. 不過avalon在處理ms-repeat, ms-with, ms-each這些循環綁定的場合, 實現得不太好。這其中要生成大量的代理VM, 整個頁面都在生成銷燬VM中拖慢了(即使使用各類池子進行循環再用).

方案四,像knockout那樣, 使用時讓用戶痛苦一些,使用可同步視圖的東西用函數(wrapper)包裹起來, 刷新視圖,就只須要從新調用這個wrapper.如今全部新的MVVM都是從ko那裏學到依賴收集. 這個wraper會通知其依賴的wrapper,經過極其痛苦晦澀的方式進入事件總線, 執行視圖刷新函數. knockout是使用閉包用到極致的庫,顯然這樣作性能也不好.

最後react, 首先使用編譯手段(jsx的虛擬DOM轉換), 將這部分消耗能提早釋放出去, 不過將字符串(jsx模板)轉換爲一個個JS對象,也佔不了多少內存. 而後是數據發生變更時, 因爲數據變更都是須要用setState方法,所以兼容性很好, 少了Object.defineProperty或wrapper的消耗,而後對應數據經過render轉換成字符串,字符串再轉換虛擬DOM樹 前後虛擬DOM進行比較, 更新視圖.

react是面向組件設計, 一個組件就是一個密封艙, 不多會對全部虛擬DOM進行比較, 因爲強制使用單向流動, 減小每次變更須要的diff. 沒有綁定對象與wrapper的內存佔用高的問題.

react的流行，只是ng太難用了，當ng或其餘MVVM改用虛擬DOM進行視圖更新，這優點就不須要！

react的問題很明顯，庫很是大，它基本上離開了jsx換轉器就活不成。 這麼大的庫， 換言之你們能對它改動的地方就越多，每升一個版本就數千改動。 做爲架構師的咱們，須要對其源碼進行很是熟悉的瞭解，要不出了問題沒法本身處理，每次等外國人回覆就遲了。

react的複雜度，很易觸發你們對它的重構，即使佔有方有向前兼容的願望，但能抵得幾回誘惑呢，所以通過幾個版本會面目全非。若是你堅持不變，那麼其餘人就會另起山頭， 開源的東西很易出現一個更優點的仿品！react的實現很糟糕的，強在設計！

虛擬DOM的難點是如何將一個字符串變成一個模板函數，而後再轉換爲虛擬DOM。 目前沒有簡單的HTML parser實現，stackoverflow上說不能使用幾行正則就能拆分HTML！ 所以這個高門檻，致使react的代替方案難產！github上有許多自稱使用了虛擬DOM的框架，不是假的就是超垃圾的實現！更況且react支持自定義標籤，所以不單是解析HTML的問題了， 須要對自定義標籤進行更多的處理！

目前avalon的虛擬DOM方案也在緩慢推動中，不是我不會寫parser，只是太多人問我許多avalon基礎問題，嚴重拖慢個人速度。。。。