一場感覺身體被掏空的前端面試

（給前端速報加星標，提升前端技能）

作者：不是小羊的肖恩

https://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來提前了解面試官的機會。能提供如此貼心的面試服務，即使如我這般最後收到的是拒信，也依舊滿懷敬意，心存感激！

我想，偉大的公司之所以偉大，可能就在於它會令人念念不忘吧~