logo

如何准备前端面试？超完整经验分享

2023年3月15日

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

ExplainThis 过去曾经分享了两篇前端面试心得文：

之后陆续有不少读者来信询问要如何准备前端面试? 针对这问题，我们详细整理了两篇文章。这篇会着重在如何准备前端面试、时程规划、心得和准备技巧。另一篇文章《如何准备前端面试? 常见疑问的 Q&A》则会回答一些读者寄信来询问的问题。

针对不同的前端面试做准备

前端面试的种类非常多，不同公司往往也会有不同的面试类型。举例来说，通常软件大厂即使是前端职位也是会考资料结构与演算法 (俗称 LeetCode 题、刷题)，但多数公司的前端职位面试都不太需要刷题。又或是比较资深的工程师会有前端系统设计面试，但资浅一点的职位则多半不会有。

会建议在面试前，针对你申请的公司上网搜寻或打听该公司会面哪类的题目，然后可以特别针对该类题目做准备。如果要面试海外的工作，Glassdoor 或者 Blind 上可以找到一些前人分享的面试心得。以下整理了不同类型的面试，以及针对这些不同类的面试，可以如何准备。

前端知识点、前端趋势 (必准备)

前端知识点是几乎每间前端面试都会考的，从 HTML、CSS、JavaScript，到框架 (例如 React 或 Vue)，以及浏览器等等的知识点。网路上的资源有很多，ExplainThis 上也有常考题目的题库，[Front End Interview Handbook](https://www .frontendinterviewhandbook.com/javascript-questions/) 也有整理题目与简答，可以参考。

除此之外，前端趋势也需要有所掌握，例如：最近有没有学习什么前端新技术? 知道 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》](https://frontendmasters. com/courses/algorithms/)是可以免费观看的，他的讲解非常清楚。至于刷题目遇到不懂的，很推荐 Google 工程师 NeetCode 的频道。

系统设计 (选择性准备)

前端的系统设计面试跟一般程序员的会不太一样。一般程序员的会着重在设计分散式系统，但前端的系统设计会着重在前端的部分。举例来说，谈到降低延迟(latency)，可能都会提到可以用 caching，只是在前端的部分，策略上会是在客户端 cache 服务器端的资料(例如直接在前端应用程式或透过 HTTP caching 放在浏览器中)；但后端用的策略则可能是在资料库与服务器中间加一个 redis 来 cache 资料。

基本上前端系统设计，会是大厂 + 资深比较会考，所以非大厂，或者非资深，这块多半不太用准备。网上有的免费教材中，最推的是 Meta 的主任工程师整理的这份 Front end system design interview overview。

简历与行为面试 (必准备)

上面提到的类别都是偏向技术面试，但在前端面试中，也会有行为面试(behavioral interview)，举例来说「请分享你曾在工作上碰过的困难与挑战，以及你是如何解决的」。另外也会有针对过往经历提问的面试问题，例如「看到你简历上写到你过去有带过实习生，可以多聊聊你如何协助实习生成长吗？」

关于这类面试，最推荐准备 Amazon 的 LP 问题(这篇有完整问题集)，因为问题都很直指到位。假如这些问题都能回答得好，基本上不用担心其他的行为面试问题。在练习时推荐用 STAR 原则，可以帮助你比较有架构地分享自己的经历。

不管是行为面试、简历深入讨论的环节，都推荐客制化你的回答。所谓客制化就是针对要面试的公司，准备不同版本的回答。例如同样是问到「过去工作上碰到的问题与挑战」，面对大公司，可以多分享遇到要解决不同极端情境的挑战，因为大公司通常做的产品是全球化，即使极端的状况也可能很多使用者会遇到。然而，如果是面对新创公司，可以多分享如何快速解决某个问题，因为在新创的领域，速度快很重要。虽然说要客制化回答，但千万不要假冒一个故事，毕竟这个只要一深入追问，很可能会被发现。

除此之外，推荐养成习惯纪录下自己在工作上的困难、表现和成就，这对要准备简历经历的问题时会有很大的帮助。很多时候，事后回想起某段经历，细节可能都忘了；如果能够在发生时就记录下来，就能让自己在讲简历上的经历时，讲得更加有内容。

申请期间的心态

及早开始申请与面试

相信没有任何一个人可以把面试准备到完美，永远有刷不完的题目、读不完的前端技术问题，所以不会真的有一刻觉得自己百分百准备好，很多人因为这样会一拖再拖没有开始申请。与其一直拖，不如直球对决。许多公司的面试冷冻期是半年到一年，所以最差就是没面上然后半年后再试一次。这会比起你拖到半年后才申请更好，因为你多赚一次实际的面试经验。

及早开始申请不代表一开始就要申请自己最想去的公司。可以先从那些就算没有上也不会觉得可惜的公司开始申请，把这些当成练习的机会，同时培养出面试的感觉(口语表达、与面试官的互动等等)，在这个过程中也要根据每次的面试做调整与优化。这样等要面自己真正想去的公司时，可以拿出最好的表现。

找战友模拟面试

上面提到可以先透过申请不是自己最想去的公司来当练习。除了这个方法外，找战友来模拟面试，也是一个非常有帮助的方法。特别是要实作的部分，或者是资料结构演算法的题目，这种题目自己对着电脑写，跟有一个人丢出一个可能你没遇过的题目，然后你要在持续跟这个人互动与沟通下实作出解方，两者是非常不同的。

在找战友模拟面试时，除了写出解决方案外，更重要的是过程中的沟通。从最开始的厘清问题，到跟在过程中讲出自己的思路，以及卡住时跟面试官的互动，这些都是可以透过练习来做得更好的。如果说准备面试中有个效益最高的事，模拟面试绝对是榜上有名。

专注在自己能掌控的

在申请的过程中，会有很多因素决定你有没有拿到面试，以及有没有被录取。收到罐头信或被拒绝时，感到失落是难免的。但是请不要让自己陷在那些负面的结果中。很多时候没被邀约面试，或者被拒绝，不是因为你不好。举例来说，我自己去年申请新加坡的工作，收到很多家公司的罐头信，一开始很失落，但后来看了新闻才知道，那些公司开始裁员，所以招募自然也冻结了。这时我才意识到，我没拿到面试，跟我好或不好一点关系也没有，因为那些公司现在根本就不招人了，所以当然没发面试邀请。

你没办法百分百掌控结果，但有没有全力以赴准备则是可控的，在被拒绝后是否选择改进并继续努力也是可控的。这不容易，但专注在自己可以掌控的，会让申请与面试的过程中能一直往更好的方向前进。

常见问题

以上是 ExplainThis 整理出的前端面试准备概览。关于读者寄信来询问的面试准备问题，我们另外有一篇[《如何准备前端面试? 常见疑问的 Q&A》](https://www.explainthis.io/zh-hans/career/how-to-prepare -frontend-interview-q-and-a)。如果你有相关的问题在这篇没得到解答，可以去看看那篇 🙂

相关文章

🧵 如果你想收到最即時的內容更新，可以在 Facebook、Instagram 上追蹤我們
下篇
如何准备前端面试？常见疑问的 Q&A