我是靠谱客的博主 怕孤单小蜜蜂,最近开发中收集的这篇文章主要介绍【DOM】Real DOM与Virtual DOM  真实 DOMReal DOM 和 Virtual DOM区别 Real DOM 和 Virtual DOM优缺点创建虚拟DOM目的 虚拟DOM的好处,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

 
真实 DOM

DOM是文档对象模型,
DOM采用树形结构作为分层结构,以树节点形式表示页面中各种元素或内容在页面渲染出的每一个结点都是一个真实DOM结构



虚拟DOM 

 虚拟Dom,本质上是以 JavaScript 对象形式存在的对 DOM 的描述


Real DOM 和 Virtual DOM区别

1.虚拟dom不会进行重绘和回流,而真实dom会频繁重排与重绘
2.虚拟dom的总损耗是”虚拟dom的增删改+真实dom的差异增删改+重排“;真实dom的消耗是”真实dom全部增删改+重排“



Real DOM 和 Virtual DOM优缺点

1.真实dom
​ 优点:直接操作HTML,易用

​ 缺点:

​ 1. 解析速度慢,效率低,内存占用量高

​ 2. 性能差:频繁操作真实DOM,导致重绘、回流

2.虚拟dom
​ 优点:

​ 1. 减少真实dom的频繁更新,减少重绘回流、占用内存少

​ 2. 跨平台:一套react代码可以多端运行

​ 缺点:页面首次渲染时,由于多一层虚拟dom的计算,速度比正常慢些


创建虚拟DOM目的

 为了更好将虚拟的节点渲染到页面视图中,虚拟DOM对象的节点与真实DOM的属性一一对应,为了简化视图的操作,解决跟踪状态变化的问题



虚拟DOM的好处

当状态改变时不需要立即更新 DOM,只需要创建一个虚拟树来描述DOM,虚DOM 内部将弄清楚如何有效的更新 DOM,虚拟DOM 可以维护程序的状态,跟踪上一次的状态通过比较前后两次状态的差异更新真实 DOM

最后

以上就是怕孤单小蜜蜂为你收集整理的【DOM】Real DOM与Virtual DOM  真实 DOMReal DOM 和 Virtual DOM区别 Real DOM 和 Virtual DOM优缺点创建虚拟DOM目的 虚拟DOM的好处的全部内容,希望文章能够帮你解决【DOM】Real DOM与Virtual DOM  真实 DOMReal DOM 和 Virtual DOM区别 Real DOM 和 Virtual DOM优缺点创建虚拟DOM目的 虚拟DOM的好处所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(31)

评论列表共有 0 条评论

立即
投稿
返回
顶部