如何準備前端面試?超完整經驗分享

2023年3月15日

💎 加入 E+ 成長計畫 與超過 300+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

ExplainThis 過去曾經分享了兩篇前端面試心得文:

之後陸續有不少讀者來信詢問要如何準備前端面試? 針對這問題,我們詳細整理了兩篇文章。這篇會著重在如何準備前端面試、時程規劃、心得和準備技巧。另一篇文章《如何準備前端面試? 常見疑問的 Q&A》 則會回答一些讀者寄信來詢問的問題。

針對不同的前端面試做準備

前端面試的種類非常多,不同公司往往也會有不同的面試類型。舉例來說,通常軟體大廠即使是前端職位也是會考資料結構與演算法 (俗稱 LeetCode 題、刷題),但多數公司的前端職位面試都不太需要刷題。又或是比較資深的工程師會有前端系統設計面試,但資淺一點的職位則多半不會有。

會建議在面試前,針對你申請的公司上網搜尋或打聽該公司會面哪類的題目,然後可以特別針對該類題目做準備。如果要面試海外的工作,Glassdoor 或者 Blind 上可以找到一些前人分享的面試心得。以下整理了不同類型的面試,以及針對這些不同類的面試,可以如何準備。

前端知識點、前端趨勢 (必準備)

前端知識點是幾乎每間前端面試都會考的,從 HTML、CSS、JavaScript,到框架 (例如 React 或 Vue),以及瀏覽器等等的知識點。網路上的資源有很多,ExplainThis 上也有常考題目的題庫Front End Interview Handbook 也有整理題目與簡答,可以參考。

除此之外,前端趨勢也需要有所掌握,例如:最近有沒有學習什麼前端新技術? 知道 ECMAScript 最新版本有新增什麼嗎? 或是對 React 18 有什麼了解等等。推薦平常沒事就多逛逛前端社群,別人分享的新知就筆記起來,這樣面試時就不怕被問到趨勢但說不出來。

在準備知識題時,不要只是講該知識點的表層,盡可能講得深入,甚至把一些面試官可能會追問的點,都自己先講出來。舉例來說,在講 JavaScript 的事件循環時,可以進一步去提宏任務、微任務,甚至提到 requestAnimationFrame  與  requestIdleCallback 在事件循環中的觸發點等等。

前端實作題 (必準備)

前端手寫題主要有兩種,一種是要寫 Lodash 這種效用函式,例如實作防抖函式 (debounce)?實作將多重陣列扁平化?這類問題的準備,首先要先掌握該知識點,以防抖為例,你會需要知道防抖是什麼。接著要掌握實作能力,並透過程式碼把該功能寫出來。這部分可以參考 ExplainThis 整理的前端手寫題詳解

第二種是元件的實作題目,舉例來說,在面試時實作 Modal、Carousel、Dropdown 等在前端常見的元件。在網路上有不少文章或 YouTube 影片有這類元件的實作。不過除了實作最基本的功能,也建議多練習延伸題,舉例來說一個 Modal 元件,可以如何在使用者點擊 Esc 時關閉;又或者一個 Tooltip 元件,如何偵測邊界來換到最佳方向。

資料結構與演算法 (選擇性準備)

資料結構與演算法 (俗稱刷題) 基本上只有面大廠要準備,非大廠的公司前端職位多半不會考。如果你有打算面大廠,會建議直接買 LeetCode Premium 來刷,原因是可以看到公司的標籤,面試前可以針對這些問題加強。至於要從什麼題開始刷,建議可以從大家公認的 Blind 75 LeetCode Questions 開始,每種類別都要練習後,再針對自己比較弱的部分加強。

現在 LeetCode 上有兩千多道題,基本上很難真的全部刷完。事實上你也不用全部刷完,刷題最看重的是如何思考,所以與其刷很多題,不如每刷完一題,都確定自己掌握該題背後的思考脈絡;同時要能夠辨別出該題的模式,讓你在下一次遇到相同模式的題目,可以依循同樣的思考脈絡來解題。如果能掌握模式與思考脈絡,就算遇到沒碰過的題目,也不會擔心。

練習方法會推薦一開始先自己試著解,邊解要邊講自己的思維 (俗稱 think out loud),因為在演算法類的面試時,溝通自己的思考過程非常重要,所以平常一定要練習講出自己的思考。假如一開始解不出來,也不要馬上想看解答,先試著解個 15 - 20 分鐘,真的不行再看。

去看討論區別人分享的詳解,或者 YouTube 上的講解影片時,先看觀念就好,不要看人家實作的程式碼,試著在看完觀念後自己寫出來,這樣比較能確保自己是懂觀念,而不是只是照著別人的程式碼寫一遍。然後切記,假如某題你是看過別人的講解才寫出來的,務必在一個禮拜後,再練習不看別人的解答自己寫一次,以確保自己真的會解。

刷題的準備資源,網上公認推薦的是《Cracking the Coding Interview》。但假如你偏好看影片學習,ThePrimeagen 在 Frontend Masters 上面開的演算法課程《The Last Algorithms Course You’ll Need》是可以免費觀看的,他的講解非常清楚。至於刷題目遇到不懂的,很推薦 Google 工程師 NeetCode 的頻道

系統設計 (選擇性準備)

前端的系統設計面試跟一般軟體工程師的會不太一樣。一般軟體工程師的會著重在設計分散式系統,但前端的系統設計會著重在前端的部分。舉例來說,談到降低延遲 (latency),可能都會提到可以用 caching,只是在前端的部分,策略上會是在客戶端 cache 伺服器端的資料 (例如直接在前端應用程式或透過 HTTP caching 放在瀏覽器中);但後端用的策略則可能是在資料庫與伺服器中間加一個 redis 來 cache 資料。

基本上前端系統設計,會是大廠 + 資深比較會考,所以非大廠,或者非資深,這塊多半不太用準備。網上有的免費教材中,最推的是 Meta 的主任工程師整理的這份 Front end system design interview overview

履歷與行為面試 (必準備)

上面提到的類別都是偏向技術面試,但在前端面試中,也會有行為面試 (behavioral interview),舉例來說「請分享你曾在工作上碰過的困難與挑戰,以及你是如何解決的」。另外也會有針對過往經歷提問的面試問題,例如「看到你履歷上寫到你過去有帶過實習生,可以多聊聊你如何協助實習生成長嗎?」

關於這類面試,最推薦準備 Amazon 的 LP 問題 (這篇有完整問題集),因為問題都很直指到位。假如這些問題都能回答得好,基本上不用擔心其他的行為面試問題。在練習時推薦用 STAR 原則,可以幫助你比較有架構地分享自己的經歷。

不管是行為面試、履歷深入討論的環節,都推薦客製化你的回答。所謂客製化就是針對要面試的公司,準備不同版本的回答。例如同樣是問到「過去工作上碰到的問題與挑戰」,面對大公司,可以多分享遇到要解決不同極端情境的挑戰,因為大公司通常做的產品是全球化,即使極端的狀況也可能很多使用者會遇到。然而,如果是面對新創公司,可以多分享如何快速解決某個問題,因為在新創的領域,速度快很重要。雖然說要客製化回答,但千萬不要假冒一個故事,畢竟這個只要一深入追問,很可能會被發現。

除此之外,推薦養成習慣紀錄下自己在工作上的困難、表現和成就,這對要準備履歷經歷的問題時會有很大的幫助。很多時候,事後回想起某段經歷,細節可能都忘了;如果能夠在發生時就記錄下來,就能讓自己在講履歷上的經歷時,講得更加有內容。

申請期間的心態

及早開始申請與面試

相信沒有任何一個人可以把面試準備到完美,永遠有刷不完的題目、讀不完的前端技術問題,所以不會真的有一刻覺得自己百分百準備好,很多人因為這樣會一拖再拖沒有開始申請。與其一直拖,不如直球對決。許多公司的面試冷凍期是半年到一年,所以最差就是沒面上然後半年後再試一次。這會比起你拖到半年後才申請更好,因為你多賺一次實際的面試經驗。

及早開始申請不代表一開始就要申請自己最想去的公司。可以先從那些就算沒有上也不會覺得可惜的公司開始申請,把這些當成練習的機會,同時培養出面試的感覺 (口語表達、與面試官的互動等等),在這個過程中也要根據每次的面試做調整與優化。這樣等要面自己真正想去的公司時,可以拿出最好的表現。

找戰友模擬面試

上面提到可以先透過申請不是自己最想去的公司來當練習。除了這個方法外,找戰友來模擬面試,也是一個非常有幫助的方法。特別是要實作的部分,或者是資料結構演算法的題目,這種題目自己對著電腦寫,跟有一個人丟出一個可能你沒遇過的題目,然後你要在持續跟這個人互動與溝通下實作出解方,兩者是非常不同的。

在找戰友模擬面試時,除了寫出解決方案外,更重要的是過程中的溝通。從最開始的釐清問題,到跟在過程中講出自己的思路,以及卡住時跟面試官的互動,這些都是可以透過練習來做得更好的。如果說準備面試中有個效益最高的事,模擬面試絕對是榜上有名。

專注在自己能掌控的

在申請的過程中,會有很多因素決定你有沒有拿到面試,以及有沒有被錄取。收到罐頭信或被拒絕時,感到失落是難免的。但是請不要讓自己陷在那些負面的結果中。很多時候沒被邀約面試,或者被拒絕,不是因為你不好。舉例來說,我自己去年申請新加坡的工作,收到很多家公司的罐頭信,一開始很失落,但後來看了新聞才知道,那些公司開始裁員,所以招募自然也凍結了。這時我才意識到,我沒拿到面試,跟我好或不好一點關係也沒有,因為那些公司現在根本就不招人了,所以當然沒發面試邀請。

你沒辦法百分百掌控結果,但有沒有全力以赴準備則是可控的,在被拒絕後是否選擇改進並繼續努力也是可控的。這不容易,但專注在自己可以掌控的,會讓申請與面試的過程中能一直往更好的方向前進。

常見問題

以上是 ExplainThis 整理出的前端面試準備概覽。關於讀者寄信來詢問的面試準備問題,我們另外有一篇 《如何準備前端面試? 常見疑問的 Q&A》。如果你有相關的問題在這篇沒得到解答,可以去看看那篇 🙂


相關文章

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們