虚拟DOM

概述

直接操作真实DOM时，每一次元素查询都需要遍历整颗DOM树，频繁的DOM操作会使性能下降

虚拟DOM就是为了解决这类性能问题的

虚拟DOM指的是用JS对象来描述真实DOM的结构，将所有对DOM的操作提前在虚拟DOM上完成，再将结果映射到真实DOM上，减少对真实DOM的操作，提升性能

使用过程

1.利用js创建一颗虚拟DOM树，再利用该树映射出一颗真实DOM树，插入文档中

2.当状态发生改变时，再次创建一颗虚拟DOM树

3.比较新旧两棵树上虚拟节点的不同，并把差异性更新到真实DOM上

操作真实DOM的成本比较高

1.DOM操作会引起回流和重绘（先删除了一个节点，又原样添加回来）

2.每次DOM元素查询都必须遍历一整颗DOM树，虚拟DOM可以将多次操作合并为一次查询

3.操作DOM元素时存在DOM模块和JS模块的通讯，虚拟DOM时JS模块内部通讯

虚拟DOM作用

１.复杂页面时提升渲染性能

２.虚拟DOM可以实现跨平台

注：简单页面的绘制未必虚拟DOM速度高于真实DOM操作

库

snabbdom库