为何需要虚拟dom
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。在以前端只用原生js或者jquery写页面的时候会发现频繁操作DOM是一件非常麻烦且耗性能的事情,常常会出现页面卡死的情况;所以尽量减少对 DOM的操作成为了优化前端性能的必要手段,vdom就是将DOM的对比放在了js层,通过对比不同之处来选择新渲染 DOM节点,从而提高渲染效率。
什么是虚拟DOM
虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象 状态变更时,记录新树和旧树的差异,最后把差异更新到真正的dom中。
虚拟DOM的优缺点:
优点: 保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限 无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等
缺点: 无法进行极致优化: 在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化,比如VScode采用直接手动操作DOM的方式进行极端的性能优化