前端算法场景

1. 虚拟 DOM Diff

核心思想：

• 同层比较
• key 优化复用
• 最小化 DOM 操作

本质：树结构 + 双指针 + 贪心策略

2. 防抖与节流

防抖（Debounce）

function debounce(fn, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

节流（Throttle）

function throttle(fn, delay) {
  let last = 0;
  return function () {
    const now = Date.now();
    if (now - last > delay) {
      fn();
      last = now;
    }
  };
}

3. LRU 缓存

核心结构

• Map + 双向链表

思想

• 最近使用 → 移到头部
• 淘汰尾部

前端应用

• 请求缓存
• 图片缓存
• 组件缓存（keep-alive）

4. 大数据处理

问题

• 卡顿（主线程阻塞）
• 内存溢出

解决方案

• 分片处理（chunk）
• Web Worker
• requestIdleCallback

5. 树结构处理

常见场景

• 菜单树
• 权限树
• 组织架构

核心操作

• DFS / BFS
• 扁平化
• 树转数组

function flatten(tree) {
  return tree.reduce((res, node) => {
    return res.concat(node, flatten(node.children || []));
  }, []);
}

总结

前端算法核心能力

• 数据结构选型能力
• 时间复杂度意识
• 空间换时间思维
• 工程场景抽象能力