精讀《DOM diff 最長上升子序列》

時間 2021-04-19

標籤前端 git github 算法數組微信編輯器優化 code cdn 欄目 HTML 简体版

原文原文鏈接

因爲 SF Markdown 編輯器沒法支持標籤圖片，因此文章圖片均沒法顯示，爲了更好閱讀體驗，能夠去推薦閱讀地址：點擊跳轉前端

在精讀《DOM diff 原理》一文中，咱們提到了 Vue 使用了一種貪心 + 二分的算法求出最長上升子序列，但並無深究這個算法的原理，所以特別開闢一章詳細說明。git

另外，最長上升子序列做爲一道算法題，是很是經典的，同時在工業界具備實用性，且有必定難度的，所以但願你們務必掌握。github

精讀

什麼是最長上升子序列？就是求一個數組中，最長連續上升的部分，以下圖所示：算法

<img width=400 src="https://img.alicdn.com/imgextra/i4/O1CN01VAEEcg25wjCsjsQAj_!!6000000007591-2-tps-900-310.png">數組

若是序列自己就是上升的，那就直接返回其自己；若是序列沒有任何一段是上升的，則返回任何一個數字均可以。圖中能夠看到，雖然 3, 7, 22 也是上升的，但由於 22 以後接不下去了，因此其長度是有 3，與 3, 7, 8, 9, 11, 12 比起來，確定不是最長的，所以找起來並不太容易。微信

在具體 DOM diff 場景中，爲了保證儘量移動較少的 DOM，咱們須要 保持最長上升子序 不動，只移動其餘元素。爲何呢？由於最長上升子序列自己就相對有序，只要其餘元素移動完了，答案也就出來了。仍是這個例子，假設本來的 DOM 就是這樣一個遞增順序（固然應該是 1 2 3 4 連續的下標，不過對算法來講是否連續間隔不影響，只要遞增便可）：編輯器

<img width=400 src="https://img.alicdn.com/imgextra/i2/O1CN01QH5F8j23hxCVcnYgx_!!6000000007288-2-tps-910-140.png">優化

若是保持最長上升子序不變，只須要移動三次便可還原：code

<img width=400 src="https://img.alicdn.com/imgextra/i2/O1CN01m9E97v1Fv1iUJ2ZQm_!!6000000000548-2-tps-934-146.png">cdn

其餘任何移動方式都不會小於三步，由於咱們已經最大程度保持已經有序的部分不動了。

那麼問題是，如何將這個最長上升子序列找出來？比較容易想到的解法分別有：暴力、動態規劃。

暴力解法

時間複雜度: O(2ⁿ)

咱們最終要生成一個最長子序列長度，那麼就來模擬生成這個子序列的過程吧，只不過這個過程是暴力的。

暴力模擬生成一個子序列怎麼作呢？就是從 [0,n] 範圍內每次都嘗試選或不選當前數，前提是後選的數字要比前面的大。因爲數組長度爲 n，每一個數字均可以選或不選，也就是每一個數字有兩種選擇，因此最多會生成 2ⁿ 個結果，從裏面找到最長的長度，即爲答案：

這麼傻試下去，必然能試出最長的那一段，在遍歷過程當中記錄最長的那一段便可。

因爲這個方法效率過低了，因此並不推薦，但這種暴力思惟仍是要掌握的。

動態規劃

時間複雜度: O(n²)

若是用動態規劃思路考慮此問題，那麼 DP(i) 的定義按照經驗爲：以第 i 個字符串結尾時，最長子序列長度。

這裏有個經驗，就是動規通常 DP 返回值就是答案，字符串問題經常是以第 i 個字符串結尾，這樣掃描一遍便可。並且最長子序列是有重複子問題的，即第 i 個的答案運算中，包括了前面一些的計算，爲了避免重複計算，才使用動態規劃。

那麼就看第 i 項的結果和前面哪些結果有關係了，爲了方便理解如圖所示：

假設咱們看 8 這個數字，也就是 DP(4) 是多少。因爲此時前面的 DP(0), DP(1) ... DP(3) 都已經算出來了，咱們看看 DP(4) 和前面的計算結果有什麼關係。

簡單觀察能夠發現，若是 nums[i] > nums[i-1]，那麼 DP(i) 就等於 DP(i-1) + 1，這個是顯而易見的，即若是 8 比 4 大，那麼 8 這個位置的答案，就是 4 這個位置的答案長度 + 1，若是 8 這個位置數值是 3，小於 4，那麼答案就是 1，由於前面的不知足上升關係，只能用 3 這個數字孤軍奮戰啦。

但仔細想一想會發現，這個子序列不必定非要是連續的，萬一第 i 項和第 i-2, i-3 項組合一下，也許會比與第 i-1 項組合起來更長哦？咱們能夠舉個反例：

很顯然，1, 2, 3, 4 組合起來是最長的上升子序列，若是你只看 5, 4，那麼得出的答案只能是 4。

正是因爲不連續這個特色，咱們對於第 i 項，須要和第 j 項依次對比，其中 j=[0,i-1]，只有和全部前項都比一遍，咱們才放心，第 i 項找到的結果確實是最長的：

那麼時間複雜度怎麼算呢？動態規劃解法中，咱們首先從 0 循環到 n，而後對於其中每一個 i，都作了一遍 [0,i-1] 的額外循環，因此計算次數是 1 + 2 + ... + n = n * (n + 1) / 2，剔除常數後，數量級是 O(n²)。

貪心 + 二分

時間複雜度: O(nlogn)

說實話，通常能想到動態規劃解法就很不錯了，再進一步優化時間複雜度就很是難想了。若是你沒作過這道題，而且想挑戰一下，讀到這裏就能夠中止了。

好，公佈答案了，說實話這個方法不像正常人類思惟想出來的，具備很大的思惟跳躍性，所以我也沒法給出思惟推導過程，直接說結論吧：貪心 + 二分法。

若是非要說是怎麼想的，咱們能夠從時間複雜度上過後諸葛亮一下，通常 n² 時間複雜度再優化就會變成 nlogn，而一次二分查找的時間複雜度是 logn，因此就拼命想辦法結合吧。

具體方案就一句話：用棧結構，若是值比棧內全部值都大則入棧，不然替換比它大的最小數，最後棧的長度就是答案：

先解釋下時間複雜度，由於操做緣由，棧內存儲的數字都是升序的，所以能夠採用二分法比較與插入，複雜度爲 logn，外層 n 循環，因此總體時間複雜度爲 O(nlogn)。另外這個方案的問題是，答案的長度是準確的，但棧內數組多是錯誤的。若是要徹底理解這句話，就得徹底理解這個算法的原理，理解了原理才知道如何改進以獲得正確的子序列。

接着要解釋原理了，開始的思考並不複雜，能夠邊喝茶邊看。首先咱們要有個直觀的認識，就是爲了讓最長上升子序列儘量的長，咱們就要儘量保證挑選的數字增速儘量的慢，反之就儘量的快。好比若是咱們挑選的數字是 0, 1, 2, 3, 4 那麼這種貪心就貪的比較穩，由於已經儘量增加緩慢了，後面遇到的大機率能夠放進來。但若是咱們挑選的是 0, 1, 100 那挑到 100 的時候就該慌了，由於一下增長到 100，後面 100 之內的數字不就都放棄了嗎？這個時候要 100 不見得是明智的選擇，丟掉反而可能將來空間更大，這其實就是貪心的思考，所謂局部最優解就是全局最優解。

但上面的思路顯然不完整，咱們繼續想，若是讀到 0, 1, 100 的時候，萬一後面沒有數字了，那麼 100 仍是能夠放進來的嘛，雖然 100 很大，但畢竟是最後一個，仍是有用的。因此從左到右遍歷的時候，遇到更大的數字優先要放進來，重點在於，若是繼續日後讀取，讀到了比 100 還小的數字，怎麼辦？

到這裏若是沒法作出思惟的跳躍，分析就只能止步於此了。你可能以爲還能繼續分析，好比遇到 5 的時候，顯然要把 100 擠掉啊，由於 0, 1, 5 和 0, 1, 100 長度都是 3，但 0, 1, 5 的「潛力」明顯比 0, 1, 100 大，因此長度不變，一個潛力更大，確定要替換！這個思路是對的，但換一個場景，若是遇到的是 3, 7, 11, 15, 此時你遇到了 9，怎麼換？若是出於潛力考慮，3, 7, 9 的潛力最好，但長度從 4 犧牲到了 3，你也搞不清楚後面是否是就沒有比 9 大的了，若是沒有了，這個長度反而沒有原來 4 來的更優；若是出於長度考慮，留着 3, 7, 11, 15，那萬一後面連續來幾個 10, 12, 13, 14 也傻眼了，有點鼠目寸光的感受。

因此問題就是，遇到下一個數字要怎麼處理，纔不至於在將來產生鼠目寸光的狀況，要「抓住穩穩的幸福」。這裏開始出現跳躍性思惟了，答案就是上面方案裏提到的「若是值比棧內全部值都大則入棧，不然替換比它大的最小數」。這裏體現出跳躍思惟，實現如今和將來兩手抓的核心就是：犧牲棧內容的正確性，保證總長度正確的狀況下，每一步都能抓住將來最好的機遇。 只有總長度正確了，才能保證獲得最長的序列，至於犧牲棧內容的正確性，確實付出了不小的代價，但換來了將來的可能性，至少長度上能夠獲得正確結果，若是內容也要正確的話，能夠加一些輔助手段解決，這個後面再說。因此總的來講，這個犧牲很是值得，下面經過圖來介紹，爲何犧牲棧內容正確性能夠帶來長度的正確以及抓住將來機遇。

咱們舉一個極端的例子：3, 7, 11, 15, 9, 11, 12，若是固守一開始找到的 3, 7, 11, 15，那長度只有 4，但若是放棄 11, 15，把 3, 7, 9, 11, 12 連起來，長度更優。按照貪心算法，咱們首先會依次遇到 3 7 11 15，因爲每一個數字都比以前的大，因此沒什麼好思考的，直接塞到棧裏：

遇到 9 的時候精彩了，此時 9 不是最大的，咱們爲了抓住穩穩的幸福，乾脆把比 9 稍大一點的 11 替換了，這樣會產生什麼結果？

首先數組長度沒變，由於替換操做不會改變數組長度，此時若是 9 後面沒有值了，咱們也不虧，此時輸出的長度 4 依然是最優的答案。咱們繼續，下一步遇到 11，咱們仍是把比它稍大的 15 替換掉：

此時咱們替換了最後一個數字，發現 3, 7, 9, 11 終因而個合理的順序了，並且長度和 3, 7, 11, 15 同樣，可是更有潛力，接下來 12 就理所應當的放到最後，拿到了最終答案：5。

到這裏其實並無說清楚這個算法的精髓，咱們仍是回到 3, 7, 9, 15 這一步，搞清楚 9 爲何能夠替換掉 11。

假設 9 後面是一個很大的 99，那麼下一步 99 會直接追加到後面：

此時咱們拿到的是 3, 7, 9, 15, 99，可是你仔細看會發現，原序列裏 9 在 15 後面的，由於咱們的插入致使 9 放到 15 前面了，因此這顯然不是正確答案，但長度倒是正確的，由於這個答案就至關於咱們選擇了 3, 7, 11, 15, 99！爲何能夠這麼理解呢？由於 只要沒有替換到最後一個數，咱們內心的那個隊列其實仍是原始隊列。

即，只要棧沒有被替換完，新插入的值永遠只起到一個佔位做用，目的是爲了讓新來的值好插入，但若是真的沒有新來的值可插入了，那雖然棧內容不對，但至少長度是對的，由於 9 在沒替換完的時候其實不是 9，它只是一個佔位，背後的值仍是 11。因此無論怎麼換，只要沒替換掉最後一個，這個替換操做都是無效的，咱們再拿一個例子來看：

可見，1, 2, 3, 4 不能把 7, 8, 9, 10, 11 都替換完，所以最後結果是 1, 2, 3, 4, 11，但這不要緊，只要沒替換完，答案就是 7, 8, 9, 10, 11，只是咱們沒有記錄下來罷了，但僅看長度的話，這兩個沒有任何區別啊，因此是沒問題的。那若是 1, 2, 3, 4, 5, 6 呢？咱們看看能替換完是什麼狀況：

可見，當替換到 5 的時候，這個序列順序就正確了，由於 1, 2, 3, 4, 5 已經徹底能代替 7, 8, 9, 10, 11 了，並且潛力比它大，咱們找到了最優局部解。因此 1, 2, 3, 4, 11 這裏的 1, 2, 3, 4 就像臥底同樣，在 11 還在的時候，還忍氣吞聲的稱 7, 8, 9, 10, 11 爲老大（實際上是 1 稱 7 爲老大，2 稱 8 爲老大，依此類推），但當 5 進來的時候，1, 2, 3, 4, 5 就能夠和 7, 8, 9, 10, 11 翻臉了，由於它的實力已經超出原來老大實力了。

那咱們前面看似可有可無的替換，其實就爲了避免斷尋找將來可能的最優解，直到有出頭之日那一天，若是沒有出頭之日，作一個小弟也挺好，長度仍是對的；若是有出頭之日，那最大長度就更新了，因此這種貪心能夠同時兼顧正確性與效率。

最後咱們看看，如何在找到答案的同時，還能找到正確的序列呢？

其實讀到這裏，不用說你應該也能猜出來，前面已經說過了，只要替換了最後一個或者插入的時候，棧順序就是正確的。因此咱們能夠在替換最後一個或者插入的時候，存儲下當前棧的拷貝，這樣最後留下來的拷貝就是最終正確的順序。

那爲何是這樣呢？咱們最後用一個例子強化一下理解，由於已經很熟練了，所以前幾步合併了一下：

到目前爲止，7, 8, 9, 13 是不存在的，但實際上它指代的是 10, 11, 12, 13，這個前面已經解釋過，就再也不贅述。咱們此時已經存了隊列 10, 11, 12, 13，所以此時結束的話，這個隊列輸出是正確的。咱們看下一步：

爲了方便識別，我給不一樣分組數字加了背景色，這樣更容易觀察：咱們發現，因爲每次替換的都是比它稍大的數字，一旦遇到了一個更小的開始 1, 2, 3, 4, 5，即使上一輪 7, 8, 9 尚未徹底替換完 10, 11, 12, 13，更小的也必定從最左邊開始替換，由於棧內數字是單調遞增的。那麼所有替換完，或者從某個數字開始，向右替換完，此時隊列中的數字必定都是相對順序正確的。從這裏例子來看，2, 3 必定會優先替換掉 8, 9，等 13 被替換的時候，棧的相對順序必定符合原數組的相對順序。

最後看一個更復雜的例子加深印象：

讀到這裏，恭喜你已經大功告成，徹底理解這個 DOM diff 算法啦。