Meta (Facebook) 前端面经

梨子2021-11-18,更新于 2022-6-6
本文全长 3193 字,全部读完大约需要 10 分钟。

大概半个月前一个在 Facebook 的学长跟我说他们招人,就想到我了。我想想闲着也是闲着不如受点打击,就欣然发了我的简历。然后收到了一个小姐姐的邮件说她们前端团队招人,他们已经开始自称 Meta 了,说可以给我一个 Pre-screen 的电话面试。

HR 筛选 / Pre-screen

握手

  1. How are you 现在方便吗,不方便我们可以改期
  2. Front-end position
  3. People think we created react so we use react but we actually use vanillajs to do a lot
  4. Graduation date
  5. Location preference
  6. Other interviews or deadline we should be aware of

简历

Tell me your front-end experiences

Tell me projects you used on

英语太差了回答的非常肤浅,然后也没深入问

技术提问

  1. What are call and apply in JavaScript
  2. What is a closure in JavaScript
  3. What are the differences between var and const
  4. What is event delegation and what are its benefits 感觉 benefits 答的不令人满意,我就会说能更方便地处理事件,答完面试官又重复问了一遍,我就举了个例子,但也没答出更多来
  5. Describe the this keyword and what is its behavior
  6. How can we detect an image been fully loaded in the browser 我不知道,就回答 load 完会有事件
  7. How can I listen to a DOM event being fired
  8. What is the difference between queue and stack
  9. What is the simplest way to mimic stack behavior in JavaScript
  10. What kind of data structure is the DOM
  11. In a balanced DOM tree, balanced meaning each node has exactly 2 branches, roughly how deep is the tree if there are N DOM nodes at the leaves

挥手

  1. After that how do you feel
  2. Are you interested in the area you were talking about
  3. Next steps if we decide to move forward 还有两场面试,下一场 45min front end coding problem,最后一场 3~4 技术提问 + more coding
  4. Questions can I answer for you 提问加入什么团队做什么,答 you'll see a bunch of teams, we'll have a matching process,问多长时间,答 a couple of weeks

后记

自我感觉自己英语答的磕磕绊绊,可能难以理解,语气也不是非常自信,给人印象不是很好。

电话面试时间总共 20 分钟。面试之前完全没有准备,面完以后上一亩三分地查了一下,这个是 HR 面,目的是确认面试者的岗位意向匹配以及面试者对相关技术不是一无所知。然后我回去看了一下邮件,好像确实,她一直自称 Recruiter 而不是 Engineer,看来真是 HR。

Pre-screen 都过不了的话我是不是就太菜了。但我内心里又想再给我来个视频面试我万一到时候听不懂或者说不出来尴尬死,不如赶紧挂我吧。

面完 5 个小时之后,过了,收到邮件询问下次面试的 available time 了。

技术电面 / Screen

一面看起来是一个东亚裔的小姐姐,但是名字和口音都是美国的。她笑起来很和蔼可亲,并且喜欢说“Cool”,给人感觉很放松。

握手

我觉得国外的面试官真的非常礼貌。她不会上来就说“你介绍一下你自己吧”,而是先说“让我先介绍一下我自己”。然后她的自我介绍也很实在,不是直接来一句“我是你今天的面试官”这种敷衍的介绍,而是说我是 Meta 的前端工程师,入职了 2 年,在哪个哪个团队做什么什么产品。

这次的寒暄阶段非常的快。我自我介绍就说我是哪里的研究生,明年春天毕业,我的志向是做前端工程师,之前做过三段前端的实习。然后没有任何 follow 的问题,她直接就说那我们今天先写题,写完还有时间看看你有什么问题可以问。

第一题

因为我也完全没刷 BFE,就口胡了。

第一题是这样一道题,

const items = [
  {type: 'a', name: 'a1', color: 'yellow'},
  {type: 'b', name: 'b1', color: 'orange'}
]
const excludes = [
  {k: 'color', value: 'yellow'},
  {k: 'name', value: 'x'}
]

然后要根据 exclude 数组来 filter items。她先给了一段示例代码,那段代码是外层对 exclude 进行 forEach,内层用 filter 的实现,像这样

excludes.forEach((exclude) => {
  items = items.filter((item) => item[exclude.k] !== exclude.value)
})

先是让我分析复杂度,我说 N^2。她说能不能说得更具体一点,N 代表什么。我说着说着就觉得不对,就改成 N * M,N 是 items 的长度,M 是 excludes 的长度。Cool 了。

然后说这个太慢了,让我优化。我写了一个用 object 存所有的 k,然后每个键里面又存值的一个实现,构造出来就是这样:

const excludeMap = {
  color: {
    yellow: true
  },
  name: {
    x: true
  }
}

好吧,现在想想这个还挺多问题的。主要是我虽然知道应该用 Map 和 Set,但是不熟,又不方便查,就只好先用 object 写着。写完面试官让解释,解释了。

因为我的那个判断写的是 if (excludeMap[k] && excludeMap[k][item[k]]) return true,然后面试官问如果是这样会是怎样表现,

const items = [
  {type: 'a', name: 'toString', color: 'yellow'},
  {type: 'b', name: 'b1', color: 'orange'}
]

我回答说因为 prototype 里有这个 toString 所以也会命中。这里应该用 Set 而不是 object 就可以解决这个问题,但是我不是很熟悉 Set。面试官说好嘛,不熟悉没事,你就说说这个怎么改。我说坚持用 object 的话就改成 if (excludeMap[k] && excludeMap[k][item[k]] === true) return true ,这题就 Cool 了。

第二题

第二题说让实现一个数据结构,可以

  • set(node, value)
  • has(node)
  • get(node)

我问能不能用 built-in Map,她说不能。

我刚开始在想 Symbol 是不是可以用来做这个,但是我又不太懂,我就去查 Symbol,她问你在查什么,我说我查 Symbol 怎么用,她说你打算做什么,我就写了一个 if (new Symbol(node)) ,她说 Symbol 参数只能填 string。好吧,想错了。

然后我就写了个暴力的,用数组存的版本。她让我分析,分析完以后问我复杂度,我说 O(N),N 是已经存了的值的数量。

她问怎么优化,有没有别的数据结构可以来存这个。我说通常来说这里应该用 Map,不让用的话就要用 Binary Tree,但是我现在有个问题是我不知道怎么排序这个 node,我不知道怎么给它生成一个唯一不变的标志符。她说如果允许你修改 node 呢,我就悟了,然后写了一个在 set 的时候分配一个 ID 然后用 object 的版本。我这里用的是字符串 ID,其实这里应该用 Symbol 的,我当时甚至没想到。写完让分析复杂度,复杂度 O(1),Cool。

挥手

然后她说还剩个七八分钟的样子,你看你有什么问题。我就问了她能不能具体介绍一下产品和技术,她说她在一个我也没用过也没大听清的产品团队,她们用 React。我问可不可以问一下你是怎么选择这个团队的,她说有很多团队,有做纯技术的,也有做各种各样产品的。新人有几天的 bootcamp 时间可以加入这些团队体验,“我当时加入了这个团队,同事们都对我很好,我学到了很多东西,做的产品我也很感兴趣”。然后就谢谢再见了。

后记

总的来说呢,难倒不是很难,也有可能是我太菜了耽误了太多时间,难的还没来得及问。

感受是,即使这么简单的题,也轻易地就能看出来 Facebook 的工程师确实考虑问题比我要周全很多,她不用跑不用测一眼就能看出来你这个代码潜在的 bug,并且 JavaScript 基础十分扎实,解决问题的思维也比我要开阔(我一开始就没想到魔改 DOM 节点这种思路),令人佩服。

面完以后隔了一天,第三天早上收到邮件说我们可以 move on 了,但是因为就剩一周就圣诞节了,非紧急的 onsite 就要安排到明年了。

明年再续了朋友们。

Virtual OnSite

先说结果,结果就是面挂了,周五和周一分别进行了两次面试,然后一直没消息,直到周六邮件通知我没有 follow-up 了。个人感觉还是挂在算法上了。挂了以后就没什么心情再写,所以一直拖到了现在。

因为是 VO 所以面试分成了两天,周五是 Intro + BQ + Coding,中间大概有半小时到一小时的 break 吧,周一是第二组 Coding。

先是有专门的一个人来寒暄了 15 分钟,大概就是还是确认一下个人的信息,说一下今天的流程是什么,有没有不清楚的地方。

Behavioral Question (45min)

  1. Why Front-end?
  2. Pick a project you worked on recently and you really enjoyed working on it. What the project was about and why did you love it.
  3. 一些 follow up,做这个的动机,和其他同类产品的区别
  4. Project in your internship, how did you start, was it like a new product, or it was like an existing product that needed further enhancement, how did the requirements gathering go, who else was involved, how did you work with other engineers, or designers, or project manager, and whoever else was involved in this project so. For me to better understanding of the code of your work and your collaboration with other people.
  5. 一些 follow up,goal of the project, which part fall on you, how many other people were working on this
  6. What was the most challenging technical problem you faced
  7. When this project ended, what was the definition of success
  8. Do you have any project that you do not enjoy that much, but you still do?
  9. What was the best critical feedback that you have received? Or we can have another question, have you working with other people on these projects, was there any behavior that you find somebody doing really really live, and you wanted to learn that skill?

反问:

What's your career goal, and how do you think this position meets that goal?

Coding I (45min)

给一个字符串(比如 Hello world)和一个表示样式的数组(比如 [[0,4,’i’], [4,9,’u’], [7,10,’b’]]),要求输出 HTML(例如 <i>Hell</i><u>o w<b>or</b></u><b>ld</b>

反正我不太会,写了几个复杂度比较高的版本,让优化,面试官一直不满意,45 分钟就一直在做这一道题。

Coding II (45min)

第一题很简单,就是一个树的遍历:https://bigfrontend.dev/problem/find-corresponding-node-in-two-identical-DOM-tree

第二题让实现一个高阶函数,对函数修饰以后,能够对运行过的结果进行缓存。先写一个单参数标量的情况,然后再问如果参数可以是对象怎么办,有两个参数怎么办,参数数量不定怎么办

这题自我感觉答的还可以,但对于多参数情况我的处理复杂度还是比较高的,没有想出什么特别巧妙的方法

后记

很不错的一点就是每个面试官都会先自我介绍,说自己加入 Meta 多少年了,在哪个部门做什么工作。然后再说我们今天有 45 分钟的时间,前 35 分钟写题/聊天不写题,最后十分钟你可以向我提问,你对流程有没有什么不清楚的地方呀。然后才开始说,那非常好,那我们就开始吧 XD。感觉这样比国内的面试官电话一通就冰冷地说,“你做个自我介绍吧”要好不少。

虽然出题是紧扣 JavaScript 来出,但感觉对于国外对算法的考察还是要远远重于国内公司的。还是要多花点时间把算法基础补好,共勉。

除特殊说明以外,本网站文章采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。