Meta (Facebook) 前端面经

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

大概半个月前一个在 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 就要安排到明年了。

明年再续了朋友们。

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