VD 虛擬DOM

數(shù)據(jù)變化，先修改虛擬DOM層，然后通過虛擬DOM樹的對比檢查獲取出最小的修改量進(jìn)行對真實DOM樹進(jìn)行修改。虛擬DOM模式只是在DOM層的檢查，所以初始渲染速度非?？?。在細(xì)小修改的大量數(shù)據(jù)修改都是速度也不錯的。因為只是在虛擬DOM層的計算對比，然后得出最小的修改操作對真實DOM進(jìn)行修改。

臟檢查

臟檢查MVVM是檢查數(shù)據(jù)的變化，保留對真實節(jié)點的操作。臟檢查機(jī)制是對所有固定 watcher count
進(jìn)行計算變化，所有在小修改變化中慢。但是在全部數(shù)據(jù)發(fā)生更新時候速度遠(yuǎn)遠(yuǎn)快于其他模式

依賴收集

數(shù)據(jù)收集每一個組件都存在自己的 viewModel 實例， 每個 viewModel
實例存在對數(shù)據(jù)監(jiān)聽和真實DOM樹的操作、自己的數(shù)據(jù)作用域。當(dāng)數(shù)據(jù)發(fā)生修改時候只會觸發(fā)自身作用域下的變動。所以在細(xì)小地方進(jìn)行占的優(yōu)勢大，但是初始渲染，和大部分?jǐn)?shù)據(jù)更新時候就比較慢，因為創(chuàng)建大量的
viewModel 實例需要消耗的性能是一定的，所以現(xiàn)在大部分 MVVM
依賴收集模式框架需要的面對的問題就是如何復(fù)用之前創(chuàng)建的viewModel

如何進(jìn)行MVVM模式的列表渲染進(jìn)行優(yōu)化？

在angular 和 vue 中我們可以用 :key=“index” （舊版本用使用 track-by=“index”）等方式提示框架這是一個可以復(fù)用的 viewModel 實例，框架就會知道當(dāng)前viewModel 實例只是數(shù)組數(shù)據(jù)的內(nèi)容發(fā)生改變，DOM結(jié)構(gòu)并沒有發(fā)生改變。直接根據(jù)數(shù)據(jù)里的位置進(jìn)行復(fù)用修改顯示數(shù)據(jù)。

性能比較

在比較性能的時候，要分清楚初始渲染、小量數(shù)據(jù)更新、大量數(shù)據(jù)更新這些不同的場合。Virtual DOM、臟檢查 MVVM、數(shù)據(jù)收集 MVVM 在不同場合各有不同的表現(xiàn)和不同的優(yōu)化需求。Virtual DOM 為了提升小量數(shù)據(jù)更新時的性能，也需要針對性的優(yōu)化，比如 shouldComponentUpdate 或是 immutable data。

• 初始渲染：Virtual DOM > 臟檢查 >= 依賴收集
• 小量數(shù)據(jù)更新：依賴收集 >> Virtual DOM + 優(yōu)化 > 臟檢查（無法優(yōu)化） > Virtual DOM 無優(yōu)化
• 大量數(shù)據(jù)更新：臟檢查 + 優(yōu)化 >= 依賴收集 + 優(yōu)化 > Virtual DOM（無法/無需優(yōu)化）>> MVVM 無優(yōu)化

總結(jié)

以上是生活随笔為你收集整理的前端模式 VD， 脏检查 MVVM ,数据收集 MVVM 所使用的场合的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。