什么是虚拟DOM

什么是虚拟DOM

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

为什么用虚拟DOM来描述真实的DOM

创建真实DOM成本比较高，而如果用js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。

• 为什么操作真实DOM的成本比较高？
  1、dom 树的实现模块和 js 模块是分开的这些跨模块的通讯增加了成本

  2、 dom 操作引起的浏览器的回流和重绘，使得性能开销巨大。

  原本在 pc 端是没有性能问题的，因为pc端的计算能力强，但是随着移动端的发展，越来越多的网页在智能手机上运行，而手机的性能参差不齐，会有性能问题。
  我们之前用jquery在pc端写那些商城页面都没有问题，但放到移动端浏览器访问之后会发现除了首页会出现白屏之外在其他页面的操作并不流畅。

• html页面如何解析的
  1、解析html：会按顺序解析。浏览器有专门的html解析器来解析HTML，并在解析的过程中构建DOM树
  2、构建dom树：它和步骤html是同步进行，可以理解为边解析边构建。
  3、构建呈现树renderTree：将dom树与css结合，也就是将样式应用到dom节点上
  4、布局：计算呈现树节点的大小和位置，这一位置是递归进行的
  5、绘制：布局完成后，便是将呈现树绘制出来显示在屏幕上

虚拟DOM的作用

1、可以维护视图和状态之间的关系
2、复杂视图情况下提升渲染性能
3、虚拟DOM除了可以渲染成DOM节点，还可以渲染到其他平台如ssr(nuxt.js/next.js)、原生应用（weex/rn）、小程序等，增加了跨平台能力