虚拟DOM跟js操作dom的简单区别

虚拟DOM跟js操作dom的简单区别

真实don及其解析的过程

1.用HTML分析器，分析HTML元素，创建一颗DOM树

2.用css分析器，分析css样式，生成页面的样式表

3.将样式表和DOM数关联起来，构建成一个render（渲染）树，每一个dom节点都有attach（固定）方法来接受各自的样式，最后集中成一棵render（渲染）树

4.有了render（渲染）树之后，就会给每一个渲染元素的节点固定在页面上的某一个位置

5.render树和节点位置都有了，就调用每个节点方法，把效果渲染出来，显示在页面上

js操作真实DOM

用传统的模式开发，原生js或者jq操作dom的话，浏览器会从头到尾执行一遍流程。假如在一次操作中，我需要更新20个dom节点的话，浏览器收到第一个请求后，不知道后面还有19次更新操作，所以执行流程，知道20次结束。当下一个更新请求执行后，第一次的执行流程就变成了无用功了，也就白白的浪费浏览器的性能，代价还是很昂贵的，频繁操作也会出现页面卡顿，影响用户体验。

需要虚拟DOM，有什么好处

内部当数据变化，生成一颗新的虚拟dom树，与上一次的虚拟dom树结构进行对比。也就是说，当数据变化的时候，大量操作的是虚拟dom,而虚拟dom属于内存数据，操作起来性能要高的多。而真实的dom操作，只有在追加的那一刻，才会进行操作，大大提升了性能。

HTML内容

1内存中生成一棵虚拟dom树在这里插入代码片

2.将内存中的虚拟dom树初始化渲染成真实dom树

3.当我们修改data里面的数据的时候

4.将之前的虚拟dom树结合新的数据生成一棵新的虚拟dom树

5.虚拟dom树结构进行对比，对比差异（diff算法）

6.将对比出来的差异的部分进行重新真实dom结构的渲染

附上简单的对比案例