做一个购物网站,上海微网站,wordpress 后台文章,开发app需要多少资金什么是虚拟DOM
从本质上讲#xff0c;Virtual Dom是一个Javascript对象#xff0c;通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式#xff0c;配合不同的渲染工具#xff0c;将使跨平台渲染成为可能。通过事物处理机制#xff0c;将多次DOM修改的结果一…什么是虚拟DOM
从本质上讲Virtual Dom是一个Javascript对象通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式配合不同的渲染工具将使跨平台渲染成为可能。通过事物处理机制将多次DOM修改的结果一次性的更新到页面上从而有效的减少页面渲染的次数减少修改DOM的重绘重排次数提高渲染性能
Virtual Dom是对DOM的抽象这个对象是更加轻量级的对DOM的描述。它涉及的最初目的就是更好的跨平台比如Nodejs就没有DOM如果想实现SSR那么加一个方式就是借助虚拟DOM因为虚拟DOM本省是JS对象。在代码渲染到页面之前vue或者react会把代码转换成一个对象虚拟DOM。以对象的形式来描述真实的DOM结构最终渲染到页面。在每次数据发生变化前虚拟DOM都会缓存一份变化之时现在的虚拟DOM会与缓存的虚拟DOM进行比较。
在vue或者react内部封装了diff算法通过这个就是无需手动操作DOM一方面是因为手动操作DOM无法保证程序性能多人协作的项目中如果review不严格可能会有开发者写出性能较低的代码另一方面更重要的是省略手动DOM的操作可以大大提高开发效率。
为什么要用到Virtual Dom
保证性能下限在不进行手动优化的情况下提供过得去的性能。 正常页面绘制渲染的流程 解析HTML — 生成DOM — CSSOM — Layout — Paint — Compiler 对比一下修改DOM时正常DOM和Virtual Dom的过程看一下它们的重绘重排的性能消耗 真实DOM生成HTML 重建所有的DOM元素Virtual Dom: 生成vNode DOMDiff 必要的dom更新 Virtual Dom的更新DOM的准备工作耗费更多的时间也就是JS层面相比于更多的DOM操作它的消费是极其便宜的。记得尤大大说过框架给你带来的保证是你不需要手动优化的情况下我依然可以给你提供过得去的性能。 跨平台 Virtual Dom 本质上是Javascript的对象它可以很方便的跨平台操作比如服务端渲染、uniapp等
Virtual Dom 真的比真实Dom性能好吗
* 首次渲染大量DOM时由于多了一层虚拟DOM的计算回避innerHTML插入慢
* 正如它能保证性能下限在真实DOM操作的时候进行针对性的优化时还是更快的。
