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

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》。如果你有相關的問題在這篇沒得到解答，可以去看看那篇 🙂