精读《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 算法啦。

总结

那么 Vue 最终采用贪心计算最长上升子序列，付出了多少代价呢？其实就是 O(n) 与 O(nlogn) 的关系，咱们看图：

能够看到，O(nlogn) 时间复杂度增加趋势勉强能够接受，特别是在工程场景中，一个父节点的子节点个数不可能太多的状况下，不会占用太多分析的时间，带来的好处就是最少的 DOM 移动次数。是比较完美的算法与工程结合的实践。

讨论地址是：精读《DOM diff 最长上升子序列》· Issue #310 · dt-fe/weekly

若是你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）