0%

虚拟dom解析

1、什么是虚拟dom

虚拟dom本质上是javascript对象,是对真实dom的抽象,状态变更时记录新树和旧树的差异,最后把差异更新到真正的dom当中。虚拟dom的作用,是使用原生js或者jquery写页面时,操作dom是一件非常麻烦的事情,往往是dom标签和js逻辑同时写在js文件里,数据交互时,还要写很多的隐藏语,如果没有好的代码规范的话,会显得代码非常臃杂混乱,耦合性很高,而且难以维护;另一方面,浏览器在一遍又一遍渲染dom,是非常消耗性能的,常常会出现页面卡死的情况,所以尽量减少对dom的操作,成为优化前端性能 的必要手段。vdom其实就是将dom的对比,放在了js层,通过对比不同之处来选择渲染dom节点,从而提高了渲染效率。

2、虚拟dom优缺点

  1. 优点

保证性能下限,虚拟dom可以经过diff算法找出最小差异,然后批量进行patch。这种操作虽然比不上手动优化,但是比起粗暴的dom操作,性能要好得多。虚拟dom的diff和patch算法,patch都是在一次更新中自动进行的,无需手动操作dom,极大提高了开发效率。另外虚拟dom是是跨平台的,本质上是javascript环境,而dom与平台强相关,相比之下虚拟dom可以更方便进行跨平台操作,例如服务端的渲染、移动端开发等。

  1. 缺点

无法进行极致优化,在性能要求很高的应用中,虚拟dom无法进行针对性的极致优化,如vscode采用的直接手动操作dom的方式进行极端的性能优化,这一点是虚拟dom做不到 的。

-------------本文结束感谢您的阅读-------------