vue虚拟dom

vue 虚拟dom

虚拟dom是vue2.0的核心技术之一，它可以提高浏览器的初始渲染速度。

真实dmo解析流程

1、浏览器使用html解析器，分析html，构建一颗dom树
2、浏览器使用css解析器，分析css和内联样式、构建样式表
3、将dom树和样式表进行关联，构建一颗渲染树
4、浏览器开始布局，为需要渲染的元素确定在浏览器中的显示坐标
5、绘制，将渲染树绘制到准确的坐标位置上

真实dom性能消耗问题

实际上我们操作dom是一种非常昂贵的操作，在使用js原生或者jq这种第三方js库来操作dom时，其实这种操作是很耗费浏览器的性能的，比如我们需要更新5个dom，由于浏览器并不知道我们一共有多少个dom操作，浏览器在收到第一个请求后，会马上执行执行该操作并重新渲染当前页面，然后紧接着第二个请求，又会重复渲染页面，反复如此会极大的消耗浏览器的性能，为了解决浏览器性能问题设计出了虚拟dom。

什么是虚拟dom

简单的说虚拟dom其实就是可以描述或者说可以表达dom树的一个js对象，一般会含有事件监听、标签名、子元素、class等一些其他属性。

其实大概就是长这个样子

虚拟dom的好处
1、可以一次性的将多个dom操作一次性的输出到页面上，减少浏览器重复渲染时的性能消耗。
2、可以用最小的代价更新dom，对比上一次的dom找出页面中那些dom需要更新，只更新需要更新的，那些没有被操作的dom则无需改动，避免不必要的操作。
3、可以跨平台，由于虚拟dom实际上就是一个js对象，js不依赖于真实的平台环境，所以它可以变成小程序，安卓应用等

虚拟dom的缺点
1、无法进行性能上的极致优化，在性能要求极高的程序的应用中无法针对性的优化
2、规模特别大的项目不适用，反而会拖慢浏览器的性能

diff算法
diff算法，实际上就是新的dom和旧的dom进行比较，从而得出那些dom需要更新然后再进行一次性的更新到浏览器页面上。

以上就是本人对虚拟dom的理解，如有错误还请指正，感谢。