虛擬DOM與diff演算法
虛擬DOM與diff演算法
虛擬DOM
- 在DOM操作中哪怕我們的數據,發生了一丟丟的變化,也會被強制重建整預DOM樹。這麼做,涉及到很多元素的重繪和重排,導致性能浪費嚴重
只要實現按需更新頁面上的元素即可,只需要把修改的數據,所對應的DOM元素重新構建一下,其它沒有變化的數據,所對應的DOM節點不需要被強制更新
- 如何按需更新頁面上的元素
只需拿到頁面被更新前的記憶體中的DOM樹,同時,再拿到頁面更新前,新渲染出來的記憶體DOM樹,然後,對比這兩棵新舊DOM樹,只需要找到那些需要被重新創建和修改的元素即可,這樣就能實現DOM的按索更新
- 如何從瀏運器的記憶體中獲取到瀏覽器自己私有的那兩顆DOM樹?
如果要拿瀏覽器中的DOM樹,我們必須要調用瀏態器提供的相關Js的API才可以,但是瀏器井沒有提供這樣的API，所以我們需要自己模擬這兩棵新舊DOM樹
- 問題:如何自己模擬新舊兩棵DOM樹?
手動模擬DOM樹的原理:使用JS創建一個對象,用這個對象,來模擬每個DOM節點,然後在每個DOM節點中,又提供了類似於children這樣的屬性,來描述當前DOM的子節點,當DOM節點形成了嵌套關係,就模擬出了一顆DOM樹;
虛擬DOM的本質:就是使用Js對象來模擬DOM樹。
點擬DOM的目的:為了實現DOM節點的高效更新。
diff演算法
- tree diff fDOM樹,逐層對比的方式,就叫做tree diff每當我們從前到後,把所有層的節點對比完後,必然能夠找到那些需要被更新的元素;
- component diff :在對比每一層的時候,組件之間的對比,叫做component diff.當對比組件的時候,如果兩個組件的類型相同,則暫時認為這個組件不需要被更新,如果組件的類型不同,則立即將舊組件移除,新建一個組件,替換到被移除的位置;
- element diff.在組件中,每個元素之間也要進行對比,那麼,元素級別的對比,叫做element diff;key : key這個屬性,可以把頁面上的DOM節點和虛擬DOM中的對象,做一層關聯關係;
