讲讲Vue的虚拟DOM,原理,好处是什么?相对于手动操作DOM,性能更好吗?
虚拟dom本质上是js对象,是对真实dom的抽象,在状态变化时,记录新树和旧树的差异,最后把差异更新到真实dom中
虚拟dom将dom的对比放在了js层,通过对比不同之处来选择新的渲染节点,从而提高渲染效率
优缺点:
虚拟dom能保证下限,通过diff算法找出最小差异,然后批量patch,这样虽比不上手动优化,但相较于粗暴的dom操作性能要好很多,保证了性能
无需手动操作
跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等
无法进行极致优化,在一些要求极高的应用中虚拟dom无法极致优化,需要手动操作
为什么要使用虚拟节点?
频繁的DOM操作会导致大量页面元素的重绘和回流,处于性能优化的考虑我们应该减少重绘和回流的操作。而对虚拟节点的DOM操作,并不会触发重绘和回流,把处理后的虚拟节点映射到真是DOM上,只需要进行一次重绘和回流,提高了性能。
分类:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用