62-【框架】虚拟DOM和DOM diff

谣言：DOM操作慢

相对于原生js慢

但是任何基于虚拟DOM的库都不可能在操作DOM时比DOM快

DOM操作并不慢，相当于js执行时间，但是浏览器渲染页面时，并无法进行交互，而是页面渲染时长较长

当节点较小时，默认是Reac快，但是太大还是DOM更稳定，vue是比较稳定都较快，vue省心

 

1.虚拟 DOM 是什么（见4.）

一个可以代表DOM树的对象，通常含有标签名、标签上属性，事件监听和子元素们，以及他的属性

 

2.虚拟 DOM 的优点

• 减少DOM操作次数和范围

次数：不如插入1000个节点，DOM需要1000次，vue或react只需要加入1000个文本，一次插入即可

范围：虚拟DOM可以借助DOM diff把多余操作省去，不如现在页面990个节点，加入十个，DOM需要重新渲染这1000个，DOM diff通过对比不同的，只需要把新加的十个进行添加即可

• 可以跨平台渲染

虚拟DOM本质是js对象，不仅可以变成DOM，还可以是小程序，iOS,安卓等

 

3.如何创建虚拟DOM

• react是使用React.createElement

• vue是用h 即渲染render函数中得到h

简化一下，比如把createElement和h都改变成<尖括号

 

4.虚拟 DOM 的缺点

• 需要额外的创建函数才可以创建DOM(createElement或h)

当然这个缺点可以克服：用JSX语法来简化XML写法

用JSX语法来简化XML写法缺点：js不认识，严重依赖打包工具，react要babel ,VUE需要vue-loader

 

5.DOM diff 是什么

就是一个函数，称之为patch

patches=patch(oldVNode,newVNode) 是我们需要运行的DOM操作

先横向遍历哪些是可疑的节点，再进行更新操作

 

虚拟DOM的diff树，减少DOM更新次数

• 比如下面，先看div标签类型未变，只要更新其属性/再看子元素没变，不更新

 

• 先看子标签1未变，但是children变了，更新DOM内容，子元素2的span不见了，所以删除对应的DOM，计算机算法是从左到右，不是人们的常规思维：直接删除一边再更新

 

6.DOM diff 的优点

减少DOM操作和跨平台

 

7.DOM diff 的问题（key）

同级节点对比出现bug,删除2却显示删除了3

 

 

解决方法：加上key。不要用index，index的下标可更改

 

 看id 知道2被删除了，下标是可以改变的，所以用key不要用index