運用diff演算法的Virtual DOM

2021-10-03 08:50:30 字數 568 閱讀 2888

百科解釋:①把樹形結構按照層級分解,只比較同級元素。②給列表結構的每個單元新增唯一的 key 屬性,方便比較。
傳統的diff演算法根據大o推導法(具體演算法的問題不做細解)的時間複雜度為o(n^3)

在正常傳統diff演算法的大o推導法算出來的時間複雜度不適和現有的要求。在此時有乙個叫virtual dom(虛擬dom)。虛擬dom有乙個重要的思維:js模擬虛擬dom放在js層與真實dom做對比操作。由於js是弱型別、圖靈完備語言,能夠執行判斷、迴圈、遞迴、一些複雜的邏輯演算法

總結:由於虛擬dom的產生就是把大o推導法下的時間複雜度的o(n^3)降低到0(n)簡化了昂貴的真實dom的操作,不管是vue.js還是react.js都是virtual dom下減少dom的操作、減少瀏覽器的效能消耗,由於在diff演算法下的只比較差異物件,把差異物件patch到dom上,只有部分的節點進行操作、更新、替換,不會造成整個瀏覽器的重塑,只會有小部分的回流,對使用者、瀏覽器都是乙個雙贏的過程

備註:

diff演算法 diff演算法介紹

diff演算法的作用 計算出virtual dom中真正變化的部分,並只針對該部分進行原生dom操作,而非重新渲染整個頁面。傳統diff演算法 通過迴圈遞迴對節點進行依次對比,演算法複雜度達到 o n 3 n是樹的節點數,這個有多可怕呢?如果要展示1000個節點,得執行上億次比較。即便是cpu快能執...

diff程式的演算法

diff程式很重要,linux中的源 補丁都是diff作出來的,diff在比較兩個文字檔案的不同方面很高效,它是基於行的,diff會將兩個檔案都按照行分成若干部分,然後計算這些行每一行的校驗碼,之後的問題就是比較這兩個檔案的所有行的校驗碼序列的不同了,這就把問題歸結為了序列比對,diff用的是動態規...

vue的diff演算法

1.當資料發生變化時,vue是怎麼更新節點的?渲染真實dom的開銷很大,比如我們修改了某個資料,如果直接渲染到真實dom會引起整個dom樹的重繪和重排,有沒有可能我們只更新我們修改的那一小塊dom而不更新整個dom呢?diff演算法可以幫助我們。我們根據真實dom生成乙個虛擬dom,當虛擬dom某個...