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>
网友评论