深刻理解虛擬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損耗性能，能夠查看個人上一篇博客：瀏覽器渲染機制