js原生是有虚拟dom地，构建出js虚拟DOM树的代码是：
// 构造虚拟DOM对象类function Element(tagName, props, children){this.tagName=tagName
this.props = props。
this.children = children}// 创建虚拟DOMfunction createElement(tagName, props, children) {
return new Element(tagName, props, children)}// <ul class="ul-wrap">// 。
<li class="li-item">1</li>// <li class="li-item">2</li>// <li class="li-item">3</li>//。
</ul>// 假设我们有如上的DOM结构, 那我我们就可以利用虚拟DOM模拟出一个类似的DOM树结构。
let VDOM = createElement("ul", {class: "ul-wrap",}, [createElement("li", {class: "li-item"
}, ["1"]), createElement("li", {class: "li-item"}, ["2"])。
createElement("li", { class: "li-item"}, ["3"]),])console.dir(JSON.stringify(VDOM,null,2))。
我们可以在控制在中打印出打印的虚拟DOM为以下结构。
使用virtual DOM算法的步骤是：
1、用原生JavaScript对象结构模拟出DOM树结构，利用这个树构建一个真正的DOM树，并渲染到页面中。
2、当状态变更时，重新构建一个新的虚拟DOM树，然后用新的树和旧的树进行对比，记录并保存出两棵树的差异。
3、当步骤二记录的差异应用到步骤一中所构建的真正的DOM树上，视图就更新了。
js操作节点的DOM方法
一、创建节点
createElement
createTextNode
二、添加、删除、替换、克隆元素
1、appendChild
2、insertBefore
3、如果appendChild、insertBefore追加的是已经存在的子元素，实际上就会将子元素位置移动
4、删除节点removeremoveChild
remove()
removeChild
5.替换节点
replaceChild
6、克隆节点
cloneNode()
三、操作元素属性的方法
1.获取属性 元素.属性名
2.设置属性 元素.属性名 = 属性值
1、2方法只能获取和设置元素自带的属性
3.操作属性的万能方法
getAttribute()
setAttribute()
1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；
2、构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如<b></b>），构建渲染树（Rendering Tree/Frame Tree）；
3、布局渲染树（reflow/layout）：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标；
4、绘制渲染树（paint/repaint）：遍历渲染树，使用UI后端层来绘制每个节点。
重排必定引起重绘，重绘不一定是重排引起的。
不影响位置大小的，单纯为重绘即可 比如修改color 等。
（1）直接改变元素的className
（2）display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；
（3）不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流；
（4）使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
（5）将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；
（6）如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；
