关于前端:2022年上海前端面经分享携程字节跳动

前言

背景：一年半教训前端，往年三月初提了到职，想着趁着金三银四期间寻找好的工作机会。可怜的是，三月初全国各地包含上海暴发疫情，间接导致许多公司开始缩招和锁 HC，金三银四变成了铜三铁四。四月份上海疫情越发重大，最终导致全城封控，只能在家筹备线上面试。（寄！）

疫情开始的阶段，整个社会的气氛都很消极。没有方法，只能边投简历，边筹备面试题，边调整情绪。疫情封控期间只能在家闲着，所以利用这段时间，坚固了一下 JS 根底，在 Leetcode 上刷了一些算法题。万幸的是，在这期间收到了携程和字节跳动的面试邀请（感激万分）。那么废话不多说了，以下是具体的面试过程：

携程（游览研发部）

技术一面

1. 常见的 React Hooks 有哪些?

   1. useMemo 是怎么实现性能优化的?
   2. useRef 的利用场景？
2. 该怎么实现【一套代码，多端运行】，说出你的想法？
3. Taro 实现跨端的底层机制？
4. 能说说你会怎么进行前端性能优化吗？
5. Chrome Devtools 的 Lighthouse 中的 LCP 是什么意思？该怎么缩小 LCP 工夫？

技术二面

1. 前端性能优化计划？
2. React.memo 和 shouldComponentUpdate 的作用？
3. ReactDOM.render 的流程？
4. 算法题：实现数组去重（要求最佳工夫复杂度）

function unique(arr) {const map = new Map();
  for (let i = arr.length - 1; i >= 0; i--) {if (map.has(arr[i])) {arr.splice(i, 1);
    } else {map.set(arr[i], true);
    }
  }
  return arr;
}

5. 算法题：实现获取数组第二大的数（要求工夫复杂度 O(n)）

function getSecond(arr) {if (arr.length < 2) return null;
  let max = arr[0];
  let second = arr[0];
  for (let i = 0; i < arr.length; i++) {if (arr[i] > max) {
      second = max;
      max = arr[i];
    } else if (arr[i] > second) {second = arr[i];
    }
  }
  return second;
}

业务三面

1. 介绍我的项目及次要的应用场景。
2. 做过哪些前端性能优化，你认为我的项目中最次要的性能瓶颈是什么？
3. 你做的我的项目的推动流程是怎么样的？你是怎么进行我的项目的工夫治理和布局？
4. 你是如何跟项目经理、后端等共事对接我的项目的？

字节跳动（抖音电商）

技术一面

1. 我的项目介绍

2. 你实现了哪些自定义 Hooks？

   1. 实现自定义 Hooks：useLocalStorage
3. TypeScript 泛型中 extends 关键字的作用

4. CSS position 属性有哪些值？

   1. relative 和 absolute 绝对于谁而言的？
   2. 怎么实现 Header 固定在网页顶端？
   3. 应用 fixed 造成内容塌陷怎么办？

5. 实现一个领有以下性能的 request 函数：

   1. 性能一：反对缓存
   2. 性能二：反对异步（返回 Promise）
   3. 性能三：反对并发申请

技术二面

1. 有一个列表，而后为列表的每一项增加一个响应事件，你会怎么做？

   1. 形容一下 DOM 事件流
   2. e.target 是指向哪一个元素？
   3. 怎么阻止事件冒泡，怎么阻止事件捕捉？
   4. React 事件机制

2. 聊一聊用户登录流程

   1. token 和 cookie + session 有什么区别？
   2. 聊一聊扫描二维码，并通过微信登录的流程

3. 聊一聊虚构列表实现

   1. 虚构列表的列表项能够不固定高度吗？
4. 手写 useMyState

const useMyState = (initial) => {const [state, setState] = useState(initial);
  const callbackRef = useRef(null);
  const _setState = (_state, callback) => {setState(_state);
    callbackRef.current = callback;
  };
  useEffect(() => {callbackRef.current(state);
  }, [state]);
  return [state, _setState];
};

5. this 指向问题

const obj = {
  a: 10,
  add(x) {return this.a + x;},
  reduce: (x) => this.a - x,
};

console.log(obj.add(2));
console.log(obj.reduce(2));

6. 实现 sum(1)(2,3)(4,5,6)...()

const sum = (...args) => {const result = args.reduce((pre, cur) => pre + cur);
  return (...args) => {if (args.length === 0) return result;
    return sum(result, ...args);
  };
};

console.log(sum(1)(2, 3)(4, 5, 6)());

技术三面

1. 选一个你认为复杂度比拟高的我的项目，形容一下它的难点。
2. 在 TCP 建设连贯后，HTTP 传输数据前，这之间产生了什么？
3. 我看你文章有些对于 TypeScript 和集合论之间的关系，简略讲述一下。
4. 聊一聊 React Fiber，如果让你实现 Scheduler 你会怎么实现？
5. 算法题：买股票的最佳时机（Leetcode 121）
6. 算法题：买股票的最佳时机 Ⅱ（Leetcode 122）

总结

几轮面试下来最大的感触是，面试官会针对你的我的项目去延长，进而宽泛地考查你的基础知识。携程更加重视性能优化方面的考查，在通过三面过后还会有一个综合测评和英语测评（综合测评考查根本逻辑不是很难，英语测评过了六级能够免试）。字节更加侧重于一些原理和算法的考查，不过字节的算法题并没有想想中那么难，Leetcode 前 200 简略和中单难度的题筹备一下问题应该不大。

最终顺利的拿到了携程的 offer，字节则是倒在三面。字节面试官的反馈说是：【选一个你认为复杂度比拟高的我的项目，形容一下它的难点】这个问题答得太简略了，须要再加深一下技术深度，开掘一下我的项目难点。以上就是此次面经分享的全部内容了，心愿对你有所帮忙。

本文参加了 SegmentFault 思否面试闯关挑战赛，欢送正在浏览的你也退出。