虛擬Dom diff演算法

2021-09-29 15:41:31 字數 787 閱讀 2439

1.虛擬dom樹的遍歷、

2.parent節點下的children的比較、

3.diff完成之後對真實3.dom的操作時機

虛擬dom的遍歷:

虛擬dom說到底只是一顆樹形結構,對於樹的遍歷我們知道有深度遍歷廣度遍歷

一、指代不同

1、深度優先遍歷:是對每乙個可能的分支路徑深入到不能再深入為止,而且每個節點只能訪問一次。

2、廣度優先遍歷:系統地展開並檢查圖中的所有節點,以找尋結果。

二、特點不同

1、深度優先遍歷:所有的搜尋演算法從其最終的演算法實現上來看,都可以劃分成兩個部分──控制結構和產生系統。正如前面所說的,搜尋演算法簡而言之就是窮舉所有可能情況並找到合適的答案,所以最基本的問題就是羅列出所有可能的情況,這其實就是一種產生式系統。

2、廣度優先遍歷:並不考慮結果的可能位置,徹底地搜尋整張圖,直到找到結果為止。

vue的渲染主要分三部分:

虛擬樹的遍歷

子節點的diff

真實dom的更新

虛擬樹的遍歷:

採用遞迴的先序深度遍歷演算法

子節點的diff:

對於相同的節點,繼續比較子節點:

虛擬dom diff演算法

通過render函式解析jsx,將其轉換成 vdom結構var vdom content 初次渲染 vdom vdom渲染成 真實dom render函式 資料更改了data.name 駿哥 vdom content 使用diff演算法比對兩次vdom,生成patch物件diff演算法是比較兩個檔案...

虛擬dom diff演算法

虛擬dom是什麼?需求 有乙個變數 count 的初始值時 0,經過一系列運算,得到10001,然後將結果寫入box中 var box document.queryselector box 我們可能會這麼寫 var count 0 console.time a for var i 0 i 10001...

虛擬dom diff演算法

千鋒逆戰班,rayson.jin學習打卡!今天給大家介紹一下虛擬dom和diff演算法。1.它是乙個object物件模型,用來模擬真實dom節點的結構 虛擬dom其實是裡面記憶體型物件 js記憶體物件 屬於記憶體資料 真實dom的一層對映 2.提供一種方便的工具,使得開發效率得到保證 3.保證最小化...