讲讲Vue的虚拟DOM,原理,好处是什么?相对于手动操作DOM,性能更好吗?

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

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

优缺点:

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

无需手动操作

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

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

 

为什么要使用虚拟节点?

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

posted @ 2022-09-23 16:09  天青色等烟雨灬  阅读(1114)  评论(0)    收藏  举报