因为React、Vue框架的出现,页面渲染采用了更高效的虚拟DOM。
一个dom元素中有许多属性,操作dom是很耗资源的,而操作自定义的js对象是很高效。所以在操作dom之间多加一层“虚拟dom”,建立虚拟dom与dom的关联,把直接操作dom转换为操作虚拟dom,然后把最终的虚拟dom关联到dom上,关联的方式是把差异应用到dom上。
白话文讲述Virtual DOM
给予一个数据,根据这个数据生成一个全新的Virtual DOM,然后跟上一次生成的Virtual DOM去 diff,得到一个Patch,然后把这个Patch打到浏览器的DOM上去,即可完成页面的更新改变。
高效的原因
DOM是很慢的,因为其元素非常庞大,所以采用js去表示DOM结构,而且只保留了Element之间的层次关系和一些基本属性,所以JS所表示的DOM树结构更加高效。
即仅在DOM是很慢的,因为其元素非常庞大,,最终实现整个DOM树的更新。
虚拟DOM具体实现流程
- 用javascript对象结构表示DOM树的结构;然后用这个树构建一个真正的DOM树,插到文档当中。
- 当状态变更的时候,重新构造一颗新的对象树,然后用新的树和旧的树进行对比,记录两个树差异
- 把2所记录的差异应用到步骤1所构建的真正DOM树中,视图就更更新了