一场感觉身体被掏空的前端面试

本文主要是介绍一场感觉身体被掏空的前端面试，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

来源：http://www.jianshu.com/p/9ed470fe7135

天下没有免费的午餐？

美帝面试有三宝，流程清晰、费用全包、待遇好。

可千万别小看这三宝，勤劳刻苦、聪明过人的中国留学生们可是因此总结出了很多免费旅游的攻略方法的。之前还在密歇根读研的时候，我认识的学长学姐们在已经收到了他们最理想的工作offer以后，依旧在马不停蹄地到处面试。我曾经好奇地问过他们，为什么还在不停地面试，是觉得工资还不够高？想找个待遇更好的公司？而他们的回答则像是提前统一了口径一样：「我早就定了要去上班的公司啦！之所以还在到处面试，目的只是为了能免费旅游。我想去纽约玩，就投纽约的公司；想去洛杉矶玩，就投洛杉矶的公司。拿到onsite(被邀请到公司现场面试)之后，就可以吃住行全包的飞过去旅游，顺便面个试！」

当时的我很羡慕他们的这份潇洒，可我也很清楚，他们能够得到这种「免费旅游」的机会，依靠的还是他们自身强大的技术实力。在美国，大多数IT公司出于成本的考虑，招聘新员工都会采取本地候选人优先的策略，这样省时省力又省钱。而这对于本地求职者来说也是一件好事，既免去了舟车劳顿之苦，又可以专心准备面试。我现在的工作机会就是两年前作为一个本地候选人得到的。如果公司邀请外地的候选人来面试，则要为他买机票，订酒店，报销伙食费租车费等各种费用。这一切的额外成本都会使得对于外地候选人的挑选标准变得更加严格。好在，美国IT公司的招聘流程比较清晰，大都遵循着同一种套路。一般来说，想要拿到公司的现场面试(onsite)邀请，候选人要经过两到三轮的选拔，包括电话面试(phone interview)，网上做题(online coding)等等。只有通过了这几轮测试得到了公司招聘部门的青睐，才有机会拿到「免费旅游」的机会。所以，天下真的有免费的午餐，但这种机会大多属于有准备的人。

来自领英猎头的勾搭

当然，机会偶尔也会光顾没有什么准备的人，比如说我。去年底，正当我困顿在「前端疲劳 」的苦海里不能自拔的时候，无意间收到了一封来自领英猎头的站内信，标题很醒目：「Shawn(我的英文名)+LinkedIn = Magic! 」这封站内信让我感到异常的兴奋，因为这是我转行前端程序猿以来第一次被「FLAG」 (Facebook, LinkedIn, Amazon, Google)的猎头勾搭。而随兴奋而来的，也有莫名的紧张，觉得自己的技术实力还不足以从容应对「FLAG」级别公司的考验。

心里有了压力，自然也就来了动力，之前的前端疲劳感似乎一瞬间就无影无踪了(我发现！！！多参加面试似乎是消除前端疲劳的一个有效方法~)。由于我在工作中大多数时间使用的都是PHP，而LinkedIn的前端职位技能要求里则清楚地写明了求职者要精通JavaScript。因此，恶补JavaScript就成了重中之重。在接下来一个月的时间里，我啃完了三本JavaScript的经典书籍。而之后的面试经历告诉我，这三本书真的让人受益无穷：
1.《JavaScript: The Good Parts》
中文版：《JavaScript语言精粹》
2.《Professional JavaScript for Web Developers》
中文版：《JavaScript高级程序设计》
3.《High Performance JavaScript》
中文版：《高性能JavaScript》

电话面试

在收到领英猎头站内信的大约一个月之后，便正式进入到了我刚刚提到的美国IT公司的标准面试流程：第一轮是与HR的电话面试，主要聊背景和项目经验。第二轮电话面试的面试官是一位LinkedIn前端工程师，这轮电面进行了一个小时，包括三个概念讨论题和三道coding题，coding使用的是collabedit.com 提供的在线coding工具，面试官可以实时的看到我在屏幕这端写的代码。下面是真题时间：

概念讨论题：1. What is website accessibility and how to improve the accessibility of a website?
(网站易访问性的概念以及如何提升网站可访问性)
2. Have you ever used any CSS preprocessors? Give the pros and cons of using CSS preprocessor.
(谈谈CSS预处理器使用上的经验，比如SASS、LESS之类。分析一下CSS预处理器的优缺点)
3. Tell me about event bubbling. How could you use it?
(JavaScript事件冒泡的理解和应用)Coding题：
1. 预测以下代码的输出结果：
var Foo = function(a) {  function bar() {  console.log(a);};this.baz = function() {console.log(a);};
};Foo.prototype = {  biz: function() {    console.log(a);}
};var f = new Foo(7);
//预测输出结果：f.bar(); // result: TypeError, f.bar is not a function.  f.baz(); // result: 7  f.biz(); // result: ReferenceError, a is not defined2.  给了一张网页截图，要求用HTML/CSS实现其中的布局3.  已知endorsement array, 要求写一个function实现想要输出的结果：// function inputvar endorsements = [{ skill: 'javascript', user: 'Chad' },{ skill: 'javascript', user: 'Bill' },{ skill: 'javascript', user: 'Sue' },{ skill: 'html', user: 'Sue' },{ skill: 'css', user: 'Sue' },{ skill: 'css', user: 'Bill' }
];// function output[{ skill: 'javascript', user: [ 'Chad', 'Bill', 'Sue' ], count: 3 },{ skill: 'css', user: [ 'Sue', 'Bill' ], count: 2 },{ skill: 'html', user: [ 'Sue' ], count: 1 }
];

我的运气比较好，遇到的这位前端工程师是密大的校友。在美国，校友资源是社会人际关系里的一条重要纽带。校友见校友，两眼泪汪汪。可能是和这位校友聊的很投缘，当然题目也基本都做对了，两天之后我便收到了onsite的通知，邀请我在今年的二月去LinkedIn在加州硅谷的总部面试。终于，我也可以体验一次「美帝面试三宝」了。

总部面试的前奏

由于路途遥远，从亚特兰大直飞硅谷腹地圣何塞要4个多小时，因此我必须提前一天到达。好在领英的招聘部门很慷慨，给我订了商务舱的机票，飞行全程还算舒适惬意。至于到达之后的地面交通，可以选择自己租车，也可以选择乘坐Uber之类的出租车。包括停车费在内的全部交通费用，领英全部cover。一天伙食费的报销额度是65刀，在美帝每顿饭花20刀就能吃的很好了，65刀绰绰有余。令我印象最深刻的是领英家的官方指定面试接待酒店，Wild Palms Hotel。住在这种充满着浓郁Bungalow风格的度假酒店里，连我那因为紧张而绷紧的神经都变得舒缓平静了。

Wild Palms Hotel的客房，给我一种来度假的感觉。。。

领英 Onsite

Onsite面试的时间是第二天上午9点45分一直到下午4点15分，几乎是整整一个工作日。面试总共有七轮，每轮45分钟，由一到两名面试官参与，全程要求用会议室里的白板手写代码。由于中午吃饭也算是一个轮，所以真正的技术面试是六轮。据说因为是在职跳槽的缘故，onsite会比应届毕业生的面试多两轮。接下来，请看我的onsite面试流水账：

9:45-10:00, 在HR的带领下参观总部办公大楼。然后被带到一个小会议室，桌子上摆着传说中的LinkedIn“面试三宝“：一张写着面试者名字的欢迎卡片，一张LinkedIn Connection Map, 以连接图的方式显示你LinkedIn账号的所有联系人，还有一些零食和水。和之前一直电话联系的猎头寒暄了几句之后，面试正式开始。

10:00-11:00, 两位面试官。让写一个类似Tooltip的网页小应用，当用户把鼠标放在LinkedIn页面上某个联系人的名字上时，会出现一个类似Tooltip的预览框，里面有该用户的头像，姓名，学历以及职位。要求先用HTML以及CSS写出大致的layout，然后用AJAX得到所需要显示的用户信息。

11:00-11:45，两位面试官。题目是写一个function实现计算器里的undo以及redo功能。其实就是考数据结构里的stack。最后的拓展题感觉是系统设计，问我如果这种undo以及redo操作是用在占据很大存储空间以及用户量很大的数据上该怎么办，我说那就给每个数据加上index，undo以及redo只用在index上，最后再用index去取数据。

11:45-12:45，吃饭。这轮单独拿出来说。可能是我之前对LinkedIn的食堂期待过高，听到过诸如LinkedIn家食堂比Google家还好吃之类的流言，结果事实却让我有点失望。饭完全没有想象中的那么好吃，也没见到传说中令人垂涎欲滴的烤羊排。不过带我吃饭的小哥说食堂每周都换菜单的，估计我正好轮到了不太好吃的那一周。。。

午餐没有任何惊喜。。。

吃完饭，不午休，面试继续。。。

12:45-13:30。还是两位面试官。出了两道题。第一道题是将link插入到包含每一个用户信息的div里。link的代码是：
<a href="profile.jsp?id=<memeber.id>"><member.name></a>
考点是DOM的操作，怎么向DOM Tree里添加新的节点。扩展问题是如果有很多用户的链接需要一个一个添加到DOM里，会造成reflow影响页面性能，如何解决。答案当然是使用Dom Fragment。第二题是写一个memoization function，记忆函数，思路就是利用hashTable存之前计算出的结果。

13:30-14:15，Product and Culture fit。这轮主要就是聊用户设计和企业文化。主要考点是...英语口语？问到了很多UI以及设计方面的问题，比如谈谈你对Client Side Rendering(客户端渲染)以及Server Side Rendering(服务器端渲染)的理解，说一个你最喜欢的应用并列举下优缺点，LinkedIn还有哪些需要改进的地方等等等等。

14:15-15:15，一位面试官。我本来以为这轮是考系统设计的，之前猎头也特意跟我说过会有一轮系统设计，所以我花了挺多时间刷了系统设计类型的题，结果到头来这一轮还是考JS。问题是Leetcode上第273题的变形版：把数字转换成英文，要考虑小数。比如12.34输出是Twelve and 34/100，就是按写英文支票的那种方式转换。

15:15-16:15，时间过得很快，终于熬到了最后一轮。这一轮是和大经理接着聊天，聊天的过程中穿插一些非技术类问题(behavior questions)。最后由大经理送客，onsite结束。

面试感言

这是一场让我受益匪浅的前端面试。拿着彩色Mark笔在会议室的白板旁站着写了一天代码的我，充分的体验到了身体被掏空的感觉。不仅仅是腰酸背痛手抽筋，不停想着怎么写代码怎么回答问题的大脑也濒临宕机的边缘。这次的onsite面试让我意识到，平常可以坐在椅子上用键盘不慌不忙地敲着代码的生活是多么的幸福惬意！

玩笑归玩笑，我真的很感谢领英给我提供了这次绝佳的学习机会。在巩固了很多旧知识的同时，也学到很多前端新技能。虽然最后并没有收获大offer，但领英家全程清晰明了的面试流程以及HR部门提供的热心帮助真的是我目前所经历过的所有面试中用户体验最棒的公司。除了在面试中会送给求职者小礼品之外，领英家的面试还有一个特点。无论是电话面试还是现场面试，HR都会在面试的前一天把第二天面试官的LinkedIn链接发给求职者，从而给求职者一个通过LinkedIn Profile来提前了解面试官的机会。能提供如此贴心的面试服务，即使如我这般最后收到的是拒信，也依旧满怀敬意，心存感激！

我想，伟大的公司之所以伟大，可能就在于它会令人念念不忘吧~

最后