菜鸟看前端(虚拟DOM和diff算法)
文章目录一. 什么是虚拟DOM1. 虚拟DOM2. vue中创建虚拟DOM3. vue简化后虚拟DOM二.为什么使用虚拟DOM1. 虚拟DOM优点2. 虚拟DOM缺点3.JS操作真实DOM三. diff算法1.什么是diff算法2.diff算法大概逻辑3.diff算法步骤4. diff算法优缺点一. 什么是虚拟DOM用js来模拟DOM中的节点。一个能代表dom树的对象,通常含有标签名,标签上的属性
文章目录
一. 什么是虚拟DOM
用js来模拟DOM中的节点。一个能代表dom树的对象,通常含有标签名,标签上的属性,事件监听和子元素们,以及其他属性
1. 虚拟DOM
2. vue中创建虚拟DOM
3. vue简化后虚拟DOM
二.为什么使用虚拟DOM
1. 虚拟DOM优点
1.减少dom操作
虚拟dom可以将多次操作和并一次操作。比如你,添加1000个节点,却是一个接一个操作(dom操作1000次一次次添加,虚拟dom只操作一次,将1000个文本直接显示在页面上)
虚拟dom借助Dom diff 可以吧多余的操作省掉,比如添加1000个节点,只有10个是新增的(检测原有的就添加没有的10个)
2.跨平台
虚拟dom不仅可以变成dom ,还可以变成小程序,ios应用,安卓应用,因为虚拟dom本质上只是一个JS对象
2. 虚拟DOM缺点
需要额外的创建函数,如createElement或h,但可以通过JSX来简化成XML写法(严重依赖打包,因为这个语法js不认识的)
3.JS操作真实DOM
用我们传统的开发模式,原生JS或JQ操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中,我需要更新10个DOM节点,浏览器收到第一个DOM请求后并不知道还有9次更新操作,因此会马上执行流程,最终执行10次。例如,第一次计算完,紧接着下一个DOM更新请求,这个节点的坐标值就变了,前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新,操作DOM的代价仍旧是昂贵的,频繁操作还是会出现页面卡顿,影响用户体验。
4.虚拟DOM
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量。所以,用JS对象模拟DOM节点的好处是,页面的更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对象的速度显然要更快,等更新完成后,再将最终的JS对象映射成真实的DOM,交由浏览器去绘制。
三. diff算法
1.什么是diff算法
diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁
2.diff算法大概逻辑
tree diff
- 将新旧两棵树,逐层对比,找出那个节点需要更新
- 如果是组件就看 component diff
- 如果是标签就看Element diff
component diff
- 如果节点是组件,先看组件类型
- 类型不同直接切换
- 类型相同只更新属性
- 深入组件做 tree diff (递归)
Element diff
- 如果节点是原生标签,则看标签
- 标签名不同直接替换
- 相同则直接更新属性
- 然后进入标签做 tree diff(递归)
3.diff算法步骤
- 用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文 档当中
- 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树差异
- 把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更新了
4. diff算法优缺点
优点
最终表现在DOM上的修改只是部分的变更,可以保证高效的渲染,提高网页的性能
缺点
首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHtml慢一点
更多推荐
所有评论(0)