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;
}
  1. 算法题:实现获取数组第二大的数(要求时间复杂度 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];
};
  1. 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));
  1. 实现 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 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
347 声望
81 粉丝
0 条评论
推荐阅读
如何编写一个d.ts文件
总结一下:从类型type角度分为:基本类型(string、number、boolean等)及其混合;复杂类型(class、function、object)及其混合(比如说又是class又是function)。从代码有效范围分为:全局变量、模块变量和又是...

Midqiu282阅读 111.8k评论 45

「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs39阅读 4.7k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco19阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图
347 声望
81 粉丝
宣传栏