[面試] 前端工程師面試心得

一、前言
先簡介一下背景，小弟畢業於112EE，大二的時候開始接觸前端，一開始是看線上平台的課程學習，之後大三大四分別進入了三家不同的公司做前端實習生，畢業後做了正職前端工程師大約八個月。這次找工作從二月過完年後開始找工作，總共經歷大約一個月的時間。因為之前受到ptt版友還有一些medium的文章幫助很多，所以趁這個機會來回饋一下。

二、準備
1. leetcode medium 刷了120題左右，不太想刷easy跟hard因為覺得很浪費時間(之後要往
senior做準備就會開始刷hard了)，不知道從何刷起的話之前在ptt文章有看到一個非常有幫助的連結：https://leetcode.com/list/xoqag3yj/，這75題幾乎囊括了所有類型的題目，一邊刷的同時一邊複習自己有哪些觀念或結構還不熟悉，就再去針對那類型的題目練習。

2. 英文我上了一個線上平台的課程(怕被說業配我就不打名字了)，每天上三十分鐘，持續?
大概兩個禮拜就去面試了。我覺得英文這個東西還是趁早開始學比較好，至於甚麼平台真的不要太在意，先開始最重要，先開始最重要，先開始最重要，反正投資自己一定穩賺不賠，與其拿去養胖自己不如多做一點有意義的事:D

3. 對你的履歷上面提到的專案一定要非常非常熟悉，包括遇到的難點，是怎麼解決的，當?
遇到甚麼抉擇，因為什麼原因做了這樣的決定。除了專案以外最好再準備一個最近看到學到的技術相關的東西，可以是任何東西讓你跟別人有差距的，一方面可以告訴面試官你平常都有在學新東西，另一方面可以將話題帶往你比較熟悉的方向。

4. 剩下的就是一些CSS，JS，React準備，CSS的部分因為我現在上班都是全部自己來，不用
auto complete，所以算是蠻熟的了就沒有多去準備，剩下的JS跟React只能說看到甚麼學甚麼，底下有幾個我很推薦的連結有興趣可以看一下：
**Web rendering
https://developers.google.com/web/updates/2019/02/rendering-on-the-web
**Web performance
https://developers.google.com/web/updates/2018/08/web-performance-made-easy
**Netflix 網站優化
https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
**Event loop
https://pjchender.blogspot.com/2017/08/javascript-learn-event-loop-stack-queue.h
**如果不知道自己哪裡不足可以看這個 https://zhuanlan.zhihu.com/p/143611353

三、面試心得
1.升鼎科技
一面： 總共分成四個階段

第一個階段寫了一題easy的leetcode，寫完之後追加follow up問有沒有更好的時間複雜度或空間複雜度，算是很簡單的題目，有把javascript的Map跟Set是怎麼操作的好好學起來應該不是大問題。

第二和第三個階段主要聊了一下之前的經驗，還有現在公司的產品主要負責的部分，還有之後想要發展的方向，整體聊起來的感覺非常的好，非常工程師的聊天，讓我覺得他們是真心想要跟我合作的，而不只是單純在考我問題。

最後一個階段跟HR聊了一下期待薪資，福利等等。

結果：offer get，氛圍非常好，但是因為接受了其他 offer 所以婉拒了。

2.Appier
一面：online interview
由三位不同team的前端來面試，主要寫了一點code，還問了一些基本的css，有答應面試官不透露題目，所以就不細講了，之前有看過類似的像這題https://github.com/lgwebdrea
就是看你js的程如何。

二面：onsite interview
由三位同個team的成員來面試，一樣問了一些背景相關的知識，之後問了一個React怎麼做data binding，然後當場我就愣住了，我好像都是自己做binding，就亂回答了一通說給一個input怎麼做bind的，這好像也不是面試官想要聽的答案，之後又問了會不會寫後端跟App，感覺是需要一個通才，面完的當下就覺得大概是沒過了，還需要好好加強自己的基本功，然後多碰一點後端的東西。

結果：感謝信。

3.優拓科技
這間的老闆ric是我大學時期有修過課的教授，他的data structure在敝系是出了名的硬，來之前就覺得應該不會很簡單，所以抱著學習的心態來這家公司面試。

一面：onsite interview
先簡單的介紹了一下自己之後，開始問技術相關的問題，印象比較深刻的是問了一個如果今天在做一個操作很大的迴圈，導致畫面會卡頓，該怎麼辦？我沒有在前端操作過巨量的運算，所以算是問到了一個我的知識盲點，後來面試官看我不會就跟我講了可以的解法，大概就是把迴圈拆開來，或是把運算拆開，用setInterval去做，很像React Fiber的操作，就是每更新一個node就去檢查一下時間超過了沒，沒超過就繼續做，超過了就停下來先去做比較重要的事。其實很多問題大概都可以回答個五到六成，但是面試官在聽你解釋問題的時候其實也能聽得出來你有幾兩重，所以還是多充實自己，遇到問題就去通盤了解，被問到的時候才可以給出比較全面的回答。

結果：感謝信，tech lead 還在信中跟我說到「頂尖的前端工程師不僅僅只是會前端，他們是通才，只是選擇在前端領域更加專精」，真的讓我很感動，他們是很認真的在招攬人才，只可惜我還沒到那個境界。

4.HaHow
零面：phone interview
時間大概半小時，簡單問了一下之前的背景，現在的工作負責什麼項目，有沒有遇到什麼困難，怎麼解決。

作業：
寫一個無限滾動的介面，最近很多間公司都會希望手刻無限滾動，可以參考一下
ObserverIntersectionAPI，這個Web API同時也能拿來做lazyloading，有興趣的可以研究一下。

一面：
原本預定要有兩個階段，分別是RD team還有PM會來面試，結果RD面完就說PM有個臨時會議中斷了。RD team考了一題費氏數列，問了一些JS的問題，還問了React的Virtual Dom是怎麼做的，我把React16的Fiber架構大概講了一遍，結果被問到如果React在commit階段就超過了時間那還是會卡頓要怎麼辦，我當下就卡住了，我的內心想法是那應該沒辦法吧，但我又覺得commit階段真的會超過時間嗎？然後就一邊糾結一邊回答我不知道XD之後還問了一題React在做map的時候會需要加上一個key，加這個key的目的是什麼？完了又是一個我之前遇到但是沒有徹底搞懂的東西，結果又亂答一通。

結果：無聲卡，整個面試的流程非常冗長，建議如果有想要去試試看的可以提早投。

5.Line Taiwan
OA:
總共十題兩個小時，前三題是coding題目，第四題問事件捕捉，事件冒泡，後面幾題都是問答題。整體來說難度應該算中間偏上，但是因為用他們家的系統所以難度直接拉高一個等級，輸入輸出都要自己來，連test case都要自己想，我原本以為這種OA都是要全對才會過，寫完當下覺得自己肯定過不了了，結果來了一面的通知讓我嚇一大跳XD

一面：
簡單做了自我介紹，講了一下現在在用的技術，現在負責做什麼，然後針對OA的題目做了一些討論，特別說一下我覺得這樣才有在重視求職者，很多公司發了OA或作業，面試時完全都沒提到，雖然說對公司來說可能就只是篩人的門檻，但是對求職者來說也是付出了時間，又沒拿報酬，給個回饋我覺得應該不算是太過分。之後有著重問了Web performance相關的東西，因為之前剛好有做到所以還算回答的順暢。

二面：
這關由Hiring Manager來面試，主要是聊之前的專案經驗，跟技術比較無關，比較偏向想法類型，這類型的面試對我來說蠻有趣的，可以跟面試官交流彼此想法，各種類型的問題都有可能在這關被問到，像是我現在的專案沒有寫測試，就被問了如果我要跟PM解釋測試的價值，那我會怎麼說？那如果你因為時間不夠，只能加部分測試，你覺得你要怎麼加，你要加哪種測試？像是這種問題，可以看出你的溝通能力還有思路夠不夠清晰，我覺得非常的專業，這是我理想中面試官的樣子。

三面：
原本二面的面試官跟我說二面就是最後一面了，所以我收到三面通知的時候還蠻疑惑的。不過也因為這時候我決定去Bytedance了，所以就沒有參加三面了，Line給我的面試體驗真的是非常好(除了OA那個系統很難用之外)。

結果：收到其他offer婉拒三面。

6.Bytedance(Singapore)
總共三輪技術面+一輪HR，每輪都45分鐘左右

一面：
有特別要求所以是中文面試，比較特別的是這關的面試官似乎連我的履歷都沒看，上來自我介紹完之後就是題目轟炸，問得非常仔細，像是javascript和React差別，function
component 跟 class component 差別，閉包等等，而且每個問題都有follow up，只知道表面肯定會倒，最後考了一題medium左右的leetcode，給你一顆binary tree，tree node的結構包含parent, left, right,給你兩個節點p, q，請問p與q的距離是多少？我先給了一個 dfs的解答，時間複雜度O(n)，之後面試官追問只要是一個map都可以用dfs來做，既然我給你了一個binary tree，有沒有更好的辦法，之後就給了一個往上找parent然後記起來的解法，時間複雜度O(log(n))。

二面：
有特別要求所以是中文面試，這關主要針對你的履歷問相關的問題，這裡停留了蠻久的效能優化問題，還問了現在做的項目中比較困難的部分，針對這個部分面試官再出follow
up，主要也是技術相關的問題居多，最後問了一題應該也是medium的題，給你一個array，裡面的每個元素都是一個object，
object包含id和next，請你按照上一個元素的next是下一個元素的id做排序，可以假設題目一定正確且只有一個正確解答。題目描述有點複雜但不是一個太難的題目，我一開始給了一個O(n2 )的解答，之後用了兩個Map把元素都記起來，時間複雜度O(n)，這個做法不是很漂亮但只要時間複雜度對了應該就給過。題外話前兩關的coding題如果沒過大概率就沒下文了，要想辦法在10分鐘內想出完美解答還是有點難度的，可以試著先給比較爛的解答，給的同時順便想一下等一下要怎麼改，可以幫你增加一點信心的同時多延長一點時間。

三面：
這關規定一定要用英文，所以英文至少要能夠溝通，由Hiring Manager來面試，先做了自我介紹之後針對經驗問了一些問題，之後總共問了三個大問題，第一個你打完網址按下
enter之後發生了什麼事，這個問題網路上的資源非常的多，重點在於你能回答得多細，像我中間對DNS解析沒有過多研究，就被問DNS具體是怎麼解析的，我只能回答到從後面解析到前面，具體是用什麼演算法，怎麼比對，我當時都沒有研究過，算是亂回答了一通。第二題問CORS是什麼，我回答了一些簡單請求，預檢的規則以後，接著問CORS有什麼優點跟缺點，我就舉了古早的Proxy Server 跟jsonp等這些方法跟CORS做比較，之後又接著問CORS有沒有什麼安全性上的問題，然後我就倒了:(，讓我了解自己對於這個問題沒有研究透徹，在研究問題的時候就應該要有這種窮追猛打的精神。最後一個問題javascript的
hash map具體是怎麼實作的，還好我之前大學在上課的時候有自己刻過，就回答了一些
hash function, collision,還提到如果碰撞超過8個會從link list轉成紅黑樹，接著就被問如果被轉成樹要怎麼確定hash map查找的時間複雜度是O(1)，我腦中想著紅黑數最快也要O(log(n))呀那到底是怎麼找的，然後我就又亂扯了一通。我都覺得我可能要在這關倒了，結果面試官直接跟我說覺得我的表現蠻好的，但是如果以後要來新加坡工作要好好練英文XD算是鬆了一口氣。

HR面：
這關也是一定要用英文面試，原本其實我很擔心，以為會問很多behavior question，結果比較像是在閒聊，聊一些為什麼要來這間公司，期望薪資是多少等等這些，沒有問什麼很刁難的題目，HR給人的感覺也很親切。大概兩天之後就通知我有確定的offer了。

結果：offer get，整體面試下來的強度算是很夠的，每次大約一個小時的過程中一直在輸出大量的資訊，面試官也會給足feedback然後再接著問follow question，所以平常的閱讀量真的蠻重要的，非常有可能一不小心就會問到你不會的東西，儘管你沒準備到但是依然能回答個三四成。

四、總結
我覺得面試有個很有趣的地方就是可以檢視自己還有哪些不足，平常上班可能都在操作熟悉的環境，熟悉的代碼，很有可能有某部分東西自己一直在用但是沒有搞懂過，可以透過這個機會讓自己再精進一點。然後我很喜歡一句話：「不難，要你幹嘛?」所以在準備的時候還有平常再寫code的時候盡量讓自己的思考再深入一點，以此勉勵自己，繼續朝著頂尖前端工程師的路上前進。

--