Vue3 Diff 逻辑的灵感：最长递增子序列算法（附 Python、JS 实现）

前端

2023-12-25 13:56:48

最长递增子序列（LIS）算法：在 Vue3 Diff 和其他领域大放异彩

LIS 算法：智慧算法，点亮渲染性能

在前端世界的汪洋大海中，Vue.js 作为一颗璀璨的明星，备受开发者们的青睐。它那出色的 diff 算法更是让 Vue3 在渲染性能上更上一层楼。而这个算法背后隐藏着一位智慧算法——最长递增子序列（LIS）算法。

LIS 算法简介

LIS 算法肩负着一个重任：在一个给定的序列中，找出最长的一段连续递增的子序列。乍听之下，这似乎是一个简单的任务，但要真正实现起来，却没那么容易。

LIS 算法运用了动态规划的策略，将问题分解为一系列子问题。它首先将序列中的每个元素视为一个单独的子序列，然后逐个比较相邻元素，如果满足递增条件，就把它们合并成一个更长的子序列。就这样，一步一步地推进，直到找到最长的那个。

LIS 算法在 Vue3 Diff 中的应用

Vue3 的 diff 算法巧妙地运用了 LIS 算法的思想，大大缩减了 DOM 的移动成本，从而提升了渲染性能。在 diff 过程中，Vue3 会将虚拟 DOM 中的新旧元素进行比较，找到最长的匹配子序列，然后仅移动和更新不匹配的部分。通过这种方式，Vue3 避免了不必要的 DOM 操作，从而显著提升了渲染效率。

JS 实现：LIS 算法在前端世界驰骋

现在，让我们用 JavaScript 来实现 LIS 算法，让它在浏览器中也能发挥作用：

function lis(arr) {
  const n = arr.length;
  const lis = new Array(n).fill(1);

  for (let i = 1; i < n; i++) {
    for (let j = 0; j < i; j++) {
      if (arr[i] > arr[j] && lis[i] < lis[j] + 1) {
        lis[i] = lis[j] + 1;
      }
    }
  }

  const maxLen = Math.max(...lis);
  const maxIdx = lis.indexOf(maxLen);

  const subsequence = [];
  while (maxLen > 0) {
    subsequence.push(arr[maxIdx]);
    maxIdx = lis.indexOf(maxLen - 1, 0, maxIdx);
    maxLen--;
  }

  return subsequence.reverse();
}

const arr = [10, 22, 9, 33, 21, 50, 41, 60, 80];
console.log(lis(arr)); // Output: [10, 22, 33, 50, 60, 80]