当前位置: 首页 > 工具软件 > Virtual DOM > 使用案例 >

Virtual DOM详解

骆文华
2023-12-01
  • Virtual DOM定义:
	简单解释:
			本质来说:Virtual DOM是一个JavaScript对象,通过对象的方式来表示DOM结构.
		将页面的状态抽象为JS对象的形式,配合不同的渲染工具,使跨平台成为了可能.
		通过事务处理的机制,将多次DOM的修改结果一次性的更新到页面上,从而有效的
		减少页面的渲染次数,减少修改DOM的重绘重排次数,提高渲染的性能.
	更本质解释:
			虚拟DOM是对DOM的抽象,这个对象是更加的轻量级的DOM的描述.它设计的最初的
		目的,就是为了更好的跨平台.举个例子,Node就没有DOM,想要实现SSR,那个一个
		方式就是借助虚拟DOM,因为虚拟的DOM本省就是JS对象.在代码渲染到页面之前,
		vue或者React会把代码转换成一个对象(虚拟DOM).以对象的形式来描述真实DOM
		结构,最终渲染到页面.在每次数据发生变化前,虚拟DOM就会缓存一份,变化之前,
		现在的虚拟DOM会与缓存的虚拟DOM进行比较.
		
			在Vue或React中内部封装了diff算法,通过这个算法来进行比较,渲染时修改
		改变的变化,原先没有发生变化的通过原先数据进行渲染.
		
			最重要的一点,前端的框架的一个基本要求就是无需手动操纵DOM,一方面时
		因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,
		可能会有开发者写出性能较低的代码,另一方面更重要的是省略手动操作DOM
		可以大大的提高开发的效率.
			
 类似资料: