虚拟DOM

虚拟DOM是什么当用document.getElementById去获取DOM操作时浏览器会从构建DOM树开始从头到尾执行一遍流程就很有可能导致操作次数过多计算的与 DOM 节点相关的坐标值等各种值就会很消耗性能。为了解决这个问题虚拟DOM就由此产生。真实DOM渲染过程浏览器渲染引擎工作流程大致分为以下4个步骤创建DOM树 → 创建CSSOM树 → 生成render树 → 布局render树 → 绘制render树用JS模拟一个DOM结构html代码div iddiv classcontainer phello编程侠/p ul stylepadding: 5px li编/li li程/li li侠/li /ul /divJS模拟的DOM结构{ tag: div, props:{ className: container, id: div }, children: [ { tag: p, chindren: hello编程侠 }, { tag: ul, props:{ style: padding: 5px }, children: [ { tag: li, children: 编 }, { tag: li, children: 程 }, { tag: li, children: 侠 }, ] } ] }这样就可以实现用 tag props 和 children 来模拟 DOM 树结构。用 JS 模拟 DOM 树的结构的好处在于先将页面的更新全部反映到虚拟 DOM 上计算出最小的变更操作最少的DOM。再加上操作内存中 JS 对象的速度是相当快的计算出的虚拟DOM再映射到真实的DOM 上最后才交由浏览器去绘制。既减少了绘制次数又减少了DOM变更这样就很大程度缓解了真实 DOM 渲染速度慢性能消耗大的问题。