眾所周知，在前端的面試中，面試官非常愛考dom和diff算法。比如，可能會出現在以下場景
滴滴滴，面試官發來壹個面試邀請。接受邀請?
我們都知道， key 的作用在前端的面試是壹道很普遍的題目，但是呢，很多時候我們都只浮於知識的表面，而沒有去深挖其原理所在，這個時候我們的競爭力就在這被拉下了。所以呢，深入學習原理對於提升自身的核心競爭力是壹個必不可少的過程。
在接下來的這篇文章中，我們將講解面試中很愛考的虛擬DOM以及其背後的diff算法。 請認真閱讀本文～文末有學習資源免費***享！！！
虛擬DOM是用JavaScript對象描述DOM的層次結構。DOM中的壹切屬性都在虛擬DOM中有對應的屬性。本質上是JS 和 DOM 之間的壹個映射緩存。
要點：虛擬 DOM 是 JS 對象；虛擬 DOM 是對真實 DOM 的描述。
diff發生在虛擬DOM上。diff算法是在新虛擬DOM和老虛擬DOM進行diff（精細化比對），實現最小量更新，最後反映到真正的DOM上。
我們前面知道diff算法發生在虛擬DOM上，而虛擬DOM是如何實現的呢？實際上虛擬DOM是有壹個個虛擬節點組成。
h函數用來產生虛擬節點（vnode）。虛擬節點有如下的屬性：
1）sel： 標簽類型，例如 p、div；
2）data： 標簽上的數據，例如 style、class、data-*；
3）children ：子節點；
4） text： 文本內容；
5）elm：虛擬節點綁定的真實 DOM 節點；
通過h函數的嵌套，從而得到虛擬DOM樹。
我們編寫了壹個低配版的h函數，必須傳入3個參數，重載較弱。
形態1：h('div', {}, '文字')
形態2：h('div', {}, [])
形態3：h('div', {}, h())
首先定義vnode節點，實際上就是把傳入的參數合成對象返回。
[圖片上傳失敗...(image-7a9966-1624019394657)]
然後編寫h函數，根據第三個參數的不同進行不同的響應。
當我們進行比較的過程中，我們采用的4種命中查找策略：
1）新前與舊前：命中則指針同時往後移動。
2）新後與舊後：命中則指針同時往前移動。
3）新後與舊前：命中則涉及節點移動，那麽新後指向的節點，移到 舊後之後 。
4）新前與舊後：命中則涉及節點移動，那麽新前指向的節點，移到 舊前之前 。
命中上述4種壹種就不在命中判斷了，如果沒有命中，就需要循環來尋找，移動到舊前之前。直到while(新前<=新後&&舊前<=就後)不成立則完成。
如果是新節點先循環完畢，如果老節點中還有剩余節點(舊前和舊後指針中間的節點)，說明他們是要被刪除的節點。
如果是舊節點先循環完畢，說明新節點中有要插入的節點。
1.什麽是Virtual DOM 和Snabbdom
2.手寫底層源碼h函數
3.感受Vue核心算法之diff算法
4.snabbdom之核心h函數的工作原理
1、零基礎入門或者有壹定基礎的同學、大中院校學生
2、在職從事相關工作1-2年以及打算轉行前端的朋友
3、對前端開發有興趣人群