Real DOM 和 Virtual DOM比较

Reacl DOM(真实DOM)

1.什么是真实DOM：真实dom是页面上渲染的dom节点

1. <div class='root'>
2.     <h2>root</h2>
3. </div>

Virtual DOM(虚拟DOM)

a.本质：虚拟DOM本质是一个轻量级的js对象

b.具体工作流程：

i.每当底层数据发生变化时，整个UI都将在虚拟dom中重新渲染；

ii.进行新旧虚拟dom的对比

iii.将差异更新到真实的dom结构上

区别：

a.虚拟dom不会进行重绘和回流，而真实dom会频繁重排与重绘

b.虚拟dom的总损耗是”虚拟dom的增删改+真实dom的差异增删改+重排“；真实dom的消耗是”真实dom全部增删改+重排“

优缺点：

Reacl DOM

i.优点：直接操作HTML，易用

ii.缺点：

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

2.性能差：频繁操作真实DOM，导致重绘、回流

Virtual DOM

i.优点：

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

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

ii.缺点：页面首次渲染时，由于多一层虚拟dom的计算，速度比正常慢些