Virtual Dom的一些理解

1.1 virtualDom是什么

virtualDom是基于dom的基础上抽象了一个由多个js对象组成的一个数据结构(树).

1.2 重绘与回流

回流:节点的大小与位置发生变化,会导致回流
重绘:是指将渲染树的每个节点的信息转换为屏幕上的像素的过程叫重绘
所以,回流必然导致重绘,(不涉及位置和大小的改变,如相同字数的文字的改变只触发重绘) 重绘不一定会触发回流,两者具备先后次序.

1.3 优化

因为将渲染树的信息绘制到屏幕上是一个较为耗时的操作,频繁的操作dom而导致频繁的触发回流与重绘会大大影响性能.从而给用户带来不好的体验.可以通过手动的方式来优化:如样式集中改变,使用fixed和absoulte等方法.

1.4 virtualDom对性能的优化

如果没有 Virtual DOM，简单来想就是直接重置 innerHTML,重绘渲染树,在一个大型列表所有数据都变了的情况下,重绘渲染树其实是一个还算合理的操作,相比于virtualDom来说,此时的效率更高,性能更好(虚拟dom多了一步js计算diff的过程),但是在只有一些只有一行数据改变等情况下,重绘渲染树就会显得有大量的浪费.
为什么要有 Virtual DOM: 1）不管你的数据变化多少，它保证了每次重绘的性能都可以接受；2) 你依然可以用类似重绘整个dom树的思路去写你的应用。

1.5 为什么要用框架

框架的意义在于为你掩盖底层的 DOM 操作,从而让你的代码更容易维护,没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的,针对任何一个优化点,我门都可以写出比框架更快的手动优化，但是在构建一个实际应用的时候,出于可维护性的考虑，我们不会为每一个地方都去做手动优化。框架可以给你的保证是，你在不需要手动优化的情况下，依然可以给你提供过得去的性能。

2.代码实现一个React - Virtual Dom

2.1 DOM元素分析

DOM是很慢的。如果我们把一个简单的div元素的属性都打印出来，你会看到：<img src="https://pic2.zhimg.com/50/d5cda33e28d83ba12368202645f9e35b_hd.jpg" data-rawwidth="1239" data-rawheight="336" class="origin_image zh-lightbox-thumb" width="1239" data-original="https://pic2.zhimg.com/d5cda33e28d83ba12368202645f9e35b_r.jpg"/>而这仅仅是第一层。真正的 DOM 元素非常庞大，这是因为标准就是这么设计的。而且操作它们的时候你要小心翼翼，轻微的触碰可能就会导致页面重排，这可是杀死性能的罪魁祸首。相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用

JavaScript 对象表示出来：var element = {
 tagName: 'ul', // 节点标签名
 props: { // DOM的属性，用一个对象存储键值对
   id: 'list'
 },
 children: [ // 该节点的子节点
   {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
   {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
   {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
 ]
}

上面对应的HTML写法是：

<ul id='list'>
 <li class='item'>Item 1</li>
 <li class='item'>Item 2</li>
 <li class='item'>Item 3</li> 
</ul>

</ul>既然原来 DOM 树的信息都可以用 JavaScript 对象来表示，反过来，你就可以根据这个用 JavaScript 对象表示的树结构来构建一棵真正的DOM树。

2.2 用JS对象模拟DOM树

用 JavaScript 来表示一个 DOM 节点是很简单的事情，你只需要记录它的节点类型、属性，还有子节点：

element.jsfunction Element (tagName, props, children) {
 this.tagName = tagName
 this.props = props
 this.children = children
}

module.exports = function (tagName, props, children) {
 return new Element(tagName, props, children)
}

例如上面的 DOM 结构就可以简单的表示：var el = require('./element')

var ul = el('ul', {id: 'list'}, [
 el('li', {class: 'item'}, ['Item 1']),
 el('li', {class: 'item'}, ['Item 2']),
 el('li', {class: 'item'}, ['Item 3'])
])

现在ul只是一个 JavaScript 对象表示的 DOM 结构，页面上并没有这个结构。我们可以根据这个ul来构建:

Element.prototype.render = function () {
 var el = document.createElement(this.tagName) // 根据tagName构建
 var props = this.props

 for (var propName in props) { // 设置节点的DOM属性
   var propValue = props[propName]
   el.setAttribute(propName, propValue)
 }

 var children = this.children || []

 children.forEach(function (child) {
   var childEl = (child instanceof Element)
     ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点
     : document.createTextNode(child) // 如果字符串，只构建文本节点
   el.appendChild(childEl)
 })

 return el
}

render方法会根据tagName构建一个真正的DOM节点，然后设置这个节点的属性，最后递归地把自己的子节点也构建起来。所以只需要：

var ulRoot = ul.render()
document.body.appendChild(ulRoot)
上面的ulRoot是真正的DOM节点，把它塞入文档中，这样body里面就有了真正的<ul>的DOM结构：<ul id='list'>
 <li class='item'>Item 1</li>
 <li class='item'>Item 2</li>
 <li class='item'>Item 3</li>
</ul>

代码参考: https://github.com/tok-gogogo/virtual-dom