原生js操作DOM的代价是非常昂贵的，因为浏览器在加载html文档的时候，大概经历以下过程：
1、解析html，构建DOM树
2、解析css，构建css树
3、合并DOM树和css规则，生成render树
4、布局render树，负责元素尺寸，位置的计算
5、绘制render树
6、浏览器将信息发送到GPU,GPU将各层合成
在改变DOM 结构时 ，浏览器会将受影响的DOM部分重新排列，这个过程称为重排，之后，在将这些内容全部绘制到屏幕，这个过程称为重绘。
虚拟DOM virtual dom
就是在生成一个虚拟的DOM，生成在内存中，而不是浏览器，这时候在修改dom结构的时候，会现在内存中修改，再渲染到浏览器页面，这样将大大减少时间，优化效率。
vue3中则先获取动态的节点 vue2则是所有全进行diff比对
Vue.js源码剖析 - 虚拟DOM 虚拟DOM概念回顾 什么是虚拟DOM？ 虚拟DOM(Virtual DOM)...
vue虚拟DOM是什么？vue的虚拟DOM的用法 1、为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue...
虚拟 DOM Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM 在Vue中定义虚拟节点（VNod...
render 函数 虚拟 DOM Vue 通过建立一个虚拟 DOM对真实 DOM 发生的变化保持追踪 Vue.js...
Vue 基础结构 h函数：创建虚拟dom render：把h函数创建的虚拟dom返回 $mount：把虚拟dom转...
【vue3源码】十二、认识虚拟DOM 什么是虚拟DOM？ 虚拟DOM（也可以称为vnode）描述了一个真实的DOM...
以前用jq，我们都是直接操作dom，为什么要使用虚拟dom，虚拟dom的优势是什么，虚拟dom是如何实现的，vue...
vnode => dom虚拟 => 真是dom (vue 初始化渲染) 更新节点
Vue之虚拟DOM 为什么要用到虚拟DOM？ 众所周知，DOM操作是JavaScript语言的硬伤。浏览器对DOM...
vue执行 先去创建一个虚拟dom， 将生成的虚拟dom其渲染到页面。 虚拟dom是一个对象，能够表现出dom结构...
本文标题：vue 虚拟dom
本文链接：https://www.haomeiwen.com/subject/ymhipctx.html
网友评论