2020-09-08-Virtual-Dom

159 阅读3分钟

什么是虚拟DOM?01

从本质上来说,Virtual Dom是一个JS对象,通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式,配合不同的渲染工具,使跨平台渲染成为可能。通过事务处理机制,将多次DOM修改的结果一次性的更新到页面上,从而有效的减少页面渲染的次数,减少修改DOM的重绘重排次数,提高渲染性能。

虚拟dom是对DOM的抽象,这个对象是更加轻量级的对DOM的描述。它设计的最初目的,就是更好的跨平台,比如node.js就没有DOM,如果想实现SSR,那么一个方式就是借助虚拟dom,因为学你dom本身就是js对象。在代码渲染到页面之前,vue或者react会把代码转换成一个对象(虚拟DOM)。以对象的形式来描述真实dom结构,最终渲染到页面。在每次数据发生变化前,虚拟dom都会缓存一份,变化之时,现在的虚拟dom会与缓存的虚拟dom进行比较。

在vue或者react内部封装了diff算法,通过这个算法来进行比较,渲染时修改改变的变化,原先没有发生改变的通过原先的数据进行渲染。

另外现代前端框架的一个基本要求就是无需手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,可能会有开发正写出性能较低的代码,另一方面更重要的是省略手动DOM操作可以大大提升开发效率

为什么要用Virtual Dom?

1.保证性能下限,再不进行手动优化的情况下,提供能过得去的性能 看一下页面渲染的一个过程

解析HTML --- 生成DOM --- 生成cssDom -- Layout -- Paint -- Compiler

下面对比一下修改DOM时真实DOM操作和Virtual Dom的过程,来看一下它们重排重绘的性能消耗

  • 真实DOM:生成HTML字符串+重建所有的DOM元素
  • Virtual Dom:生成VNode+DOMDiff+必要的dom更新 Virtual Dom的更新DOM的准备工作耗费更多的时间,也就是js层面,相对于更多的DOM操作它的消费是极其便宜的。尤大大曾说到:框架给你的保证时,你不需要手动优化的情况下,我依然可以给你提供过得去的性能

2.跨平台

Virtual Dom本质上时JS对象,可以很方便的跨平台操作,比如服务端渲染、uniapp等

Virtual Dom真的比真实DOM性能好么?

1.首次渲染大量DOM时,由于多了一层虚拟DOM的计算,比innerHTML插入慢 2.正如它能保证性能下限,在真实DOM操作的时候进行针对性的优化时,还是更快的。