虚拟DOM是什么? 一篇文章就搞定

什么是虚拟DOM?

虚拟DOM(Virtual DOM)它是使用javaScript对象来描述真实DOM,虚拟DOM的本质就是javaScript对象,使用javaScript对象来描述DOM的结构,程序的各种状态变化首先作用于虚拟DOM,最终映射到真实DOM上,像Vue这样的MVVM框架会帮助我们屏蔽DOM的操作;

为什么要使用虚拟DOM?

  • 避免直接操作DOM,提高开发效率
  • 虚拟DOM作为一个中间层可以跨平台,除了在Web平台使用以外,还支持服务端渲染,以及weex框架可以跨移动端平台
  • 虚拟DOM不一定能提高性能
    1. 首次渲染的时候会增加开销,因为在首次渲染的时候肯定不如直接操作DOM,因为要维护一层额外的虚拟DOM,也就是要创建一份额外的javaScript对象,一定会增加开销(无提高性能)
    2. 复杂视图情况下提升渲染性能,如果有频繁DOM操作的话,虚拟DOM在更新真实DOM之前,首先会通过Diff算法对比新旧两个DOM树的差异,最终把差异更新到真实DOM上,不会每次操作真实DOM,另外通过给节点设置Key属性,可以让节点重用,避免大量的重绘 (提高性能)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容