虚拟DOM

虚拟dom是什么？

虚拟dom本质上是js对象,是对真实dom的抽象,在状态变化时,记录新树和旧树的差异,最后把差异更新到真实dom中

虚拟dom将dom的对比放在了js层,通过对比不同之处来选择新的渲染节点,从而提高渲染效率

优缺点:

虚拟dom能保证下限,通过diff算法找出最小差异,然后批量patch,这样虽比不上手动优化,但相较于粗暴的dom操作性能要好很多,保证了性能

无需手动操作

跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等

无法进行极致优化,在一些要求极高的应用中虚拟dom无法极致优化,需要手动操作

为什么要使用虚拟节点？

频繁的DOM操作会导致大量页面元素的重绘和回流，出于性能优化的考虑我们应该减少重绘和回流的操作。而对虚拟节点的DOM操作，并不会触发重绘和回流，把处理后的虚拟节点映射到真是DOM上，只需要进行一次重绘和回流，提高了性能。