传统dom操作的弊端:当你用原生js 或jquery等库去操作DOM时,浏览器会从构建DOM树开始把整个流程(DOM树--CSSOM树---渲染树---回流---重绘---渲染页面)执行一遍,所以频繁操作DOM会引起不需要的计算,导致页面卡顿,影响用户体验
虚拟DOM的好处:虚拟DOM是为了解决DOM操作过多而导致性能低的问题而诞生的,虚拟DOM诞生之前,操作DOM的是直接操作的,改一次渲染一次,而虚拟DOM就是用js对象模拟一颗DOM树,每次修改DOM,先把虚拟DOM修改,最后再一次性把虚拟DOM更新,这样就减少了很多次DOM操作,优化了性能
虚拟DOM的工作原理:
a,用JavaScript模拟DOM树,并渲染这个DOM树
b,比较新老DOM树,得到比较的差异对象
c,把差异对象应用到渲染的DOM树