前端开发
面试
前端工程师

如何面试前端工程师？

需要考察的重点有哪些？有什么方法能够有效地判断其水平？
关注者
6,178
被浏览
1,403,426

110 个回答

这几天刚好在逛知乎，路过顺便说一下我们的「开源」的面试方法，大多是我团队里同学整理的，所有的面试理论都基本如此。


提前说明，禁止转载。


一般都是结构化的，结构化的面试如：

  • 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？
  • 你原来做过哪些让你印象深刻的项目？用 STAR 面试法来不停追问细节。

结构化面试最主要是方便你 能比较。

完毕后会针对性的对 ta 熟悉领域深入询问，技术点因人而异了。

最后是些软素质。


看上去就这么点东西，但问得怎么样，就看面试官水平了，通常面了几百号人，也被人面过以后基本都心里有数了。


下面转一下我们的面试方法。


面试方法

  • 代码编写笔试
  • 问答式

过程遵循 STAR 面试法 。


校招和社招的是不一样的，校招会更加关注基础知识，而社招会更加关注之前做过的项目情况。


项目相关

面试其实说白了就是根据一个人之前的经历，来判断出后续这人会做得怎样，如果你之前从没做成过一件事情，凭什么让别人相信你之后能做成呢？因此无论哪里的面试都会问你之前做过的项目

项目可以是多人协助开发一个产品，也可以是自己个人做过的业余应用，只需介绍 1、2 个就够了，需要注意的是 1 + 1 != 2，做了两个平庸的项目不如做了一个好项目。


一般来说会问如下几方面的问题：

  • 做过最满意的项目是什么？
  • 项目背景
    • 为什么要做这件事情？
    • 最终达到什么效果？
  • 你处于什么样的角色，起到了什么方面的作用？
  • 在项目中遇到什么技术问题？具体是如何解决的？
  • 如果再做这个项目，你会在哪些方面进行改善？

技术相关 - 1 面

技术一面主要判断对基础知识的掌握

  • 描述一个你遇到过的技术问题，你是如何解决的？
    • 这个问题很常见，有没有遇到过很不常见的问题？比如在网上根本搜不到解决方法的？
  • 是否有设计过通用的组件？
    • 请设计一个 Dialog（弹出层） / Suggestion（自动完成） / Slider（图片轮播） 等组件
    • 你会提供什么接口？
    • 调用过程是怎样的？可能会遇到什么细节问题？
  • 更细节的问题推荐参考 darcyclarke/Front-end-Developer-Interview-Questions · GitHub

技术相关 - 2 面

技术二面主要判断技术深度及广度

  • 你最擅长的技术是什么？
    • 你觉得你在这个技术上的水平到什么程度了？你觉得最高级别应该是怎样的？
  • 浏览器及性能
    • 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？越详细越好
      • （这个问既考察技术深度又考察技术广度，其实要答好是相当难的，注意越详细越好）
    • 谈一下你所知道的页面性能优化方法？
      • 这些优化方法背后的原理是什么？
      • 除了这些常规的，你还了解什么最新的方法么？
    • 如何分析页面性能？
  • 其它
    • 除了前端以外还了解什么其它技术么？
    • 对计算机基础的了解情况，比如常见数据结构、编译原理等

兴趣相关

  • 最近在学什么？接下来半年你打算学习什么？
  • 做什么方面的事情最让你有成就感？需求设计？规划？具体开发？
  • 后续想做什么？3 年后你希望自己是什么水平？

主动性相关

  • 在之前做过的项目中，有没有什么功能或改进点是由你提出来的？
  • 是否有参与和改进其它开源项目

还有些与话题无关我就不转了。

上面大多数回答都列出了很好的面试问题。作为team里面充当打先锋的第一轮面试的人，我这里也随便说几个自己不成熟的小建议吧：

  1. 除了最核心的JS水平，不要因为其他单一方面的薄弱而淘汰人
  2. 少问框架、库相关的问题。对于这类问题，要多问Why和How。
  3. 多问原生JS
  4. 热爱这个行业


1. 除了最核心的JS水平，不要因为其他单一方面的薄弱而淘汰人


前端有个特点就是，知识特别杂，且相互关联可能并不大。首先标准的洗剪吹三件套JS/CSS/HTML，其实完全可能只学其中一个而不太精通另外两个。当然，我觉得不精通JS是不能接受的。但是如果JS精通的情况下，CSS并不是很熟练，在我看来是完全可以接受的。同理，像浏览器兼容性/移动兼容性这种在我看来都是nice-to-have的能力。

例如在某个前端群里，某大神还暴露出他不知道debounce。所以如果仅仅因为几个你用过function对方没用过的就怀疑对方水平的话，那就只能和大神无缘了。


2. 少问框架、库相关的问题。对于这类问题，要多问Why和How。


这点其实跟上面一点很相似。因为圈子里技术栈非常多（React + Webpack, Backbone + RequireJS, Angular等等等），所以很可能你面试的人之前接触的栈和目前需要的职位是非常不一样的。如果你强行让一个只写过Backbone的人解释React的lifecycle的话，显然是没有意义的。但像jQuery或者underscore这种基本算是stdlib的库的话，确实可以简单的考察一下。

总的来说，凡是问框架/库相关的问题，一定不能简单停留在问某个函数怎么用，而是要多深入去问“为什么需要这种设计”和“它是怎么实现的”。所谓对一个框架的掌握程度，衡量标准应该是使用者能否能深刻的理解这个框架的设计理念解决了什么问题。

举个例子，也许我会去问如何用jQuery实现动画效果(.animate())，但我接下来一定会继续问面试者jQuery内部是如何实现animate这个function的。

再举一个React的例子，也许我会问props和state的区别（这个问题认真看过docs肯定都能答上来），但接下来可能我会给出一个既能用props又能用state的例子让对方来解释一下各有什么好处。这种开放型的问题没有什么很正确的答案，但是可以从对方的回答能看出对方有没有真正深入的理解两者的区别。


3. 多问原生JS

其实多问原生JS的问题并不是说我们就拒绝所有三方库，也不是说什么写原生JS就有特别的优越感。写原生JS最大的好处就是能更多的和浏览器，网络等相对比较“底层”的东西打到更多交道。

同样一个jQuery的例子。如果你只写过纯jQuery的代码的话，很可能你并不知道为什么下面第一种写法比第二种写法好多少倍。

// Good
let $body = $('body');
for (let i = 0; i < 100000; i ++) {
    $body.text();
}

// Bad
for (let i = 0; i < 100000; i ++) {
    let $body = $('body');
    $body.text();
}

// 其实这里并不是想强调let放在循环里面和外面的区别，而是想强调通过DOM去获取一个element是很费时的操作，懂得意思就好了。


4. 热爱这个行业

作为一个技术半衰期只有一年的方向，随时保持进取心是非常非常非常重要的。

  • ES6有哪些新特性？用过吗？江湖传言 @Saviio 仅用一行new Set()就征服了面试官，拿到了offer ლ(ﾟдﾟლ)
  • 有没有任何开源的项目？
  • 学过什么前端以外的新东西？

当然这些东西不必全部都掌握（做过），但如果没有任何一项有经验的话，那确实就让人怀疑你的进取心了。


以上就是我的一些不成熟的小建议，欢迎探讨 (oﾟωﾟo)