一、三個要點需先理解清楚：

1）瀏覽器渲染過程： 5步

1.建立DOM樹（用html解析器分析html元素）—› 2.建立CSS規則樹（用css解析器解析css檔案,生成頁面樣式表）—›3.建立render樹（將DOM樹與CSS規則關聯起來，構建render樹）—›4.佈局(根據render樹，瀏覽器開始佈局)—›5.繪製Painthing（呼叫每個節點的paint方法，繪製出來）

2）為什麼需要虛擬DOM？：

1.直接操作真實DOM時，瀏覽器會從關鍵DOM樹開始從頭到尾執行一遍流程 （要理解迴流和重繪），會產生效能問題，所以就需要虛擬DOM了

迴流：頁面重新構建,元素的佈局，尺寸，隱藏改變。 [每個頁面至少迴流一次，第一次載入的時候（構建render樹）]，

重繪：元素屬性更新，改變元素外觀、風格，而不影響佈局

迴流VS重繪：迴流必將引起重繪，而重繪不一定會引起迴流

2.虛擬 DOM 本質就是對真實 DOM 的一層抽象，就是用原生的JS物件去描述一個DOM節點

//真實DOM節點
<div id="container">
  <ul>
    <li></li>
  </ul>
</div>


//js模擬虛擬DOM


//'div' 標籤型別、 id: 'container' 標籤元素的屬性
const tree = Element('div', { id: 'container' }, {
 
//標籤元素的子節點
  Element('ul', {}, [
    Element('li', {}, ['新節點值'])
  ]),
});

const root = tree.render();
document.querySelector('#container').appendChild(root);

3）Diff演算法：

1. 比較差異時只會對同一層級的節點進行比較(同級比較)

2.Diff演算法核心：對虛擬 DOM 節點進行深度優先遍歷，並對每一個虛擬節點進行編號，在遍歷的過程中對同一個層級的節點進行比較，最終得到比較後的差異