性能对比
javascript创建10000个字段,要比dom创建10000节点快很多,所以,如果能将主要的工作放到js中去,就能节省掉大量的性能
所以,使用js创建虚拟的dom,然后当数据发生变化时,在js中进行数据的比对(diff),要比dom破坏性的重建性能优越很多
| js运算 | 虚拟dom | innerHTML |
|---|---|---|
| dom运算 | 创建新的js对象+数据变化的比对(diff) | 渲染innerHTML字符串 |
| 动作 | 和变化有关的DOM进行更新 | 销毁所有旧DOM,新建所有新DOM |
| 性能因素 | 和数据变化量有关 | 与模板大小有关 |
| innerHTML(模板) | 虚拟DOM | 原生js |
|---|---|---|
| 心智负担中等,性能差 | 心智负担小,可维护强,性能不错 | 心智负担大,可维护性差,性能高 |
虚拟dom的精髓
虚拟dom性能公式: 声明式的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗。
虚拟的意义就在于使找出差异的性能消耗最小化。
总结
