首页天道酬勤vue解析dom,vue虚拟dom更新时机

vue解析dom,vue虚拟dom更新时机

张世龙 05-12 13:28 58次浏览

参考: https://www.Jian Shu.com/p/af0b 398602 BC

1、JS操作真实DOM的代价!

在我们传统的开发模型中,当本机JS或JQ使用DOM时,浏览器将从生成DOM树开始从头到尾运行流程。 在一次操作中,我需要更新10个DOM节点。 浏览器不知道自收到第一个DOM请求以来,还有9次更新操作,所以立即运行进程,最终运行10次。 例如,在第一次计算结束后,紧接在下一个DOM更新请求之后,此节点的坐标值发生变化,上次是徒劳的计算。 计算DOM节点的坐标值等是徒劳的性能。 即使计算机硬件始终更新,使用DOM的成本仍然很高,频繁使用会产生纸箱,影响用户体验。

2、为什么需要虚拟DOM,它有什么好处?

Web界面由DOM树(树意味着数据结构)构建,当其中的一部分发生变化时,实际上对应于某个DOM节点发生了变化

虚拟DOM是为了解决浏览器的性能问题而设计的。 如上所述,如果一个操作有10次更新DOM的动作,则虚拟DOM不会立即操作DOM,而是将这10次更新的diff的内容保存到本地的一个JS对象中,最终将该JS对象attch到DOM树中一次,然后因此,在JS对象上模拟DOM节点的好处是,页面更新首先全部反映在JS对象(虚拟DOM )中,而且处理内存中的JS对象明显更快。 更新完成后,将最终JS对象映射到实际DOM,并传递给浏览器进行绘制。

为什么会有虚拟dom,vue动态查找dom