什么是虚拟DOM?
虚拟DOM(Virtual DOM)它是使用javaScript对象来描述真实DOM,虚拟DOM的本质就是javaScript对象,使用javaScript对象来描述DOM的结构,程序的各种状态变化首先作用于虚拟DOM,最终映射到真实DOM上,像Vue这样的MVVM框架会帮助我们屏蔽DOM的操作;
为什么要使用虚拟DOM?
- 避免直接操作DOM,提高开发效率
- 虚拟DOM作为一个中间层可以跨平台,除了在Web平台使用以外,还支持服务端渲染,以及weex框架可以跨移动端平台
- 虚拟DOM不一定能提高性能
- 首次渲染的时候会增加开销,因为在首次渲染的时候肯定不如直接操作DOM,因为要维护一层额外的虚拟DOM,也就是要创建一份额外的javaScript对象,一定会增加开销(无提高性能)
- 复杂视图情况下提升渲染性能,如果有频繁DOM操作的话,虚拟DOM在更新真实DOM之前,首先会通过Diff算法对比新旧两个DOM树的差异,最终把差异更新到真实DOM上,不会每次操作真实DOM,另外通过给节点设置Key属性,可以让节点重用,避免大量的重绘 (提高性能)