vue虚拟dom

个人观点:有错请指正让我及时更改

虚拟dom与真正dom之间性能相差很大

借用阮一峰大大的文章

网页的生成过程,大致可以分成五步。

vue虚拟dom

  1. HTML代码转化成DOM
  2. CSS代码转化成CSSOM(CSS Object Model)
  3. 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
  4. 生成布局(layout),即将所有渲染树的所有节点进行平面合成
  5. 将布局绘制(paint)在屏幕上

这五步里面,第一步到第三步都非常快,耗时的是第四步和第五步。

而我们在浏览网页的时候在不停的操纵dom  因此不停的在重复第四步和第五步,降低了页面的性能

 

虚拟dom则是将页面中的标签等等全部转换化为js的对象,由js生成dom树 并在浏览器上映射出来,当页面的数据大声变化时,使用diff算法算出最小变更,提高了前端的性能