一、Readl DOM (真实DOM) 和 Virtual DOM (虚拟DOM)之间的区别?
两者之间的区别:
1、真实DOM:
- 真实DOM是浏览器中的实际DOM结构,是由浏览器根据HTML解析而来的,包含了虽有的HTML元素和属性。
- 当页面中数据发生变化时,真实DON需要重新计算页面的布局和重渲染页面,这个过程时相对耗时的。
- 真实DOM会频繁的重排与重绘。它的总消耗是“真是DOM完全增删改+排版与重绘”。
2、虚拟DOM
- 虚拟DOM是一个存在于内存中的虚拟DOM树,是通过JavaScript对象来模拟页面的DOM结构。
- 当页面中数据发生变化时,虚拟DON会通过diff算法比较新旧两棵虚拟DON树的差异,然后只更新需要变化的部分到真实DON中,而不是重新渲染整个页面。这个过程相比于直接操作真实DON,效率更高。
- 虚拟DOM不会进行排版与重绘操作,它的总消耗是“虚拟DON增删改+真是DOM差异增删改+排版与重绘”,
二、优点缺点
1.优点
真实DOM:
- 易用
- 更直观:真实DOM是浏览器原生提供的,可以直接操作DOM元素,更容易理解和调试。
- 更稳定:真实DOM可以实时更新页面,保证页面与数据的同步性。
虚拟DOM:
- 性能较好:虚拟DOM通过虚拟的DOM树来表示页面结构,可以在内存中进行计算和比较,减少了对真实DOM的操作次数,提高了性能。
- 简单方便:如果使用手动操作真实DOM来完成页面,繁琐又容易出错,在大规模应用下维护起来也很困难。
- 批量更新:虚拟DOM可以批量更新多个变化,然后一次性更新到真实DOM中,减少了重绘的次数,提高了性能。
- 更好的跨平台支持:虚拟DOM可以在不同平台上运行,适用于web、移动端和PC端的开发。
2.缺点
真实DOM:
- 性能较差:当数据发生变化时,真实DOM需要重新计算整个DOM树的结构,并重新渲染,消耗大量的时间和资源。
- 重绘频繁:由于真实DOM的更新是同步的,频繁的数据变化会导致频繁的重绘,印象用户体验。
- 难以维护:当页面结构复杂时,操作真实DOM的代码会变得冗长和难以维护。
效率低,解析速度慢,内存占用量过高。
虚拟DOM:
- 在一些性能要求极高的应用中虚拟DOM无法进行针对性的机制优化。
- 首次渲染大量DOM时,由于多了一层虚拟DOM的计算,速度比正常的稍慢。
- 学习成本较高:使用虚拟DOM需要学习和理解其工作原理和使用方式。
- 需要额外的库支持:使用虚拟DOM需要引入额外的库,增加了项目的体积和复杂度。
- 可能引入新的问题:由于虚拟DOM的更新是异步的,可能会引发一些新的问题,如数据不一致、事件处理等。