1:什么是diff算法?
所謂的diff算法就是數(shù)據(jù)更新后供鸠,生成新的虛擬DOM豫柬,新的v-node與舊的v-node進行對比,找出不同的區(qū)別進行操作桥温,生成新的DOM的過程引矩。
2、diff算法的優(yōu)化方案:
如果按照常規(guī)的算法比較侵浸,將兩個tree結(jié)構(gòu)進行比較旺韭,那時間復雜度很高的,采用了diff算法會讓時間復雜度從O(n3)減少到O(n)掏觉,diff算法從下面3點中進行了優(yōu)化:
(1)只比較同一層区端,不跨級比較
(2)tag不同則刪掉重建(不在比較內(nèi)部的細節(jié))
(3)子節(jié)點通過key來區(qū)分(key的重要性)
3、React中diff算法 —僅右移
比如下圖中的所示:
o(node)中的數(shù)據(jù)內(nèi)容:a-b-c-d-e
n(node)中的數(shù)據(jù)內(nèi)容:b-c-a-d-e
第一步:o(node)中的a與n(node)中的b比較發(fā)現(xiàn)內(nèi)容不相同澳腹,同理不動织盼。
第二步:o(node)中的b與n(node)中的c比較發(fā)現(xiàn)內(nèi)容不相同,同理不動遵湖。
第三步:o(node)中的a與n(node)中的a比較發(fā)現(xiàn)內(nèi)容相同悔政,o(node)中的a向右移動到c后面,這樣就完成了diff算法的整個過程延旧。
4谋国、Vue2中diff算法 —雙端比較
vue2中diff算法定義四個指針:oldStartIdx、oldEndIdx迁沫、newStartIdx芦瘾、newEndIdx捌蚊。
讓oldStartIdx與newStartIdx、oldStartIdx與newEndIdx近弟、oldEndIdx與newEndIdx缅糟、oldEndIdx與newStartIdx兩兩進行比較,然后 oldStartIdx祷愉、oldEndIdx與newStartIdx窗宦、newEndIdx都分別向中間移動,在進行比較直到到達中間二鳄。
5赴涵、Vue3中diff算法 —最長遞增子序列
如下圖中的兩個序列:
首先看o(node)與n(node)左邊的兩列都是A,B都相同,不用管订讼,右側(cè)末尾都是G都相同也不用管髓窜。
看兩列中間部分:將n(node)中順序不同的元素,按照o(node)的次序用數(shù)組標示出來,n(node)中跟上面不同的元素分別是 F C D E H 對應上面的元素數(shù)組分別是[5欺殿、2寄纵、3、4脖苏,-1]程拭,H是新增加的找不到對應的字母,暫時用-1代表帆阳,我們找出來F與H是需要操作的哺壶,其他不用一一調(diào)整屋吨。