深刻理解虚拟DOM

前言

虚拟DOM做为如今最流行的框架Vue和React的核心机制之一，为这两个框架带来了极大的性能提高。掌握这个概念，能使咱们对框架的理解更近一步。

传统DOM解析流程

1.分析html元素生成DOM树

2.分析css元素生成CSSOM树

3.将CSSOM树与DOM树结合成渲染树

4.浏览器根据渲染树肯定每一个节点生成的位置而后进行布局

5.浏览器绘制页面到屏幕上

JS操做DOM流程

1.JS操做DOM，DOM发生变化

2.将新DOM与旧DOM进行比对

3.根据新DOM进行绘制

当JS操做一个dom元素时将会从新触发一遍上面的解析流程，每次一个DOM变化就会从新绘制一次，若是有多个DOM发生变化就会绘制屡次，若是一次须要绘制的DOM元素过多将会形成页面卡顿，影响用户体验。

虚拟DOM绘制流程

1.生成state数据

2.生成jsx模板

3.将数据和模板结合成虚拟DOM（用一个JS对象描述真实DOM）

好比将 <div id="1"><span>hello</span></div>转换为虚拟DOM
生成的对象为['div',{id:'1'},['span',{},'hello']]

对象结构：['nodeName',{attribute},childNode]
第一部分：父节点名称。第二部分：父节点属性值。第三部分：子节点，若是为节点再嵌套数组，若是为文本，则为字符串。

4.根据虚拟DOM生成DOM而后绘制

虚拟DOM操做流程

1.state发生变化，其中几个节点须要更新。

2.生成新的虚拟DOM，将新的虚拟DOM与旧的虚拟DOM进行比对。

3.生成新DOM，而后绘制

jsx模板

class App extends React.Component{
    render(){
        return (
            <div className="myDiv">
                <span>span1</span>
                <span>span2</span>
            </div>
        )
    }
}
复制代码

上面的代码是react中特别熟悉的组件建立过程，生成了一个div和两个span

var div=React.createElement('div',{className:'myDiv'},child1,child2)    //也可写成数组形式[child1,child2]
let child1=React.createElement('span',null,'span1')
let child2=React.createElement('span',null,'span2')
ReactDom.render(div,document.getElementById('app')
复制代码

咱们平时写的上面那种建立组件的方法实际上是React.createElement的语法糖，最后都会转化为createElement这种方法建立

性能提高缘由

1.将之前的DOM比对变成虚拟DOM比对，提高了性能。

2.将之前的多少个节点更新就渲染多少次，变成了只渲染一次，极大的提高了性能

须要更详细的了解DOM解析流程，以及为何操做DOM损耗性能，能够查看个人上一篇博客：浏览器渲染机制