前端面试总结（at, md）

引入

面试过去了这么久，把八月份面试题和总结发一下吧，虽然年底大家可能都不换工作~ 还是可以看看的。

关于面试，引用叶老湿的一句话。你的简历是自己工作的答卷，项目经历是你给面试官出的考纲。所以，我的面试一定是与我的简历、工作经历相关的，一些面试题并不一定适用于任何人，但是你可以从中了解他们考察的点，以及侧重点。基础知识可以查漏补缺。

原文链接

moka

一家小型创业公司。因为同事有去面过的，他说面试感觉挺 diao 的，我就想去试一下啦，拿它先热热身，就从boss上投了简历。

一轮

• 用 setTimeout 实现 setInterval，可不必关心返回值的类型。

  我听错了条件，我以为要注意返回值的类型必须跟原生的一样，也就是返回一个 number，并可以 clear。无清除定时器功能的马上就写出来了，但是加清除定时器，还有返回值的问题，就费了半天劲... 也没弄明白。面试官比较着急了，跟我沟通的时候，我才知道返回值不一定非要跟原生的一样。

• 给了一个栗子，结合 pdf.js 的示例代码，找出这个栗子中为什么分辨率很低。主要是看你通过调试去解决问题的能力。
• 然后就各种结合项目各种问呗，如何解决问题的，如何团队协作沟通的。
• 还给了我一个题，让我回去用 React 实现一个群组的 CheckBox，其实最后看就是 treeselect 的雏形啊。我的实现

二面

• 自我介绍
• 最近做的一个项目，其中的难点，过程。
• 最近做没做过技术调研，我捡我了解的说，比如redux和mobx的区别。
• 做技术分享的时候会关注哪几个点，
  答： 它的实现原理，简单的一张图。一个简单的demo引入，并看一些实现。充分表现它的优势，然后跟现有的技术栈是否能结合，快速上手。有什么缺陷。
• 在第一家公司有没有记忆深刻的项目，经历。项目的话就是最开始的时候，让我自己写一个页面的时候，在一周之内搞完。。有一个特效是在轮播图上加放大镜，用swiper和自己写的放大镜。当时各种努力工作终于把这个功能做完，但是忽略了兼容性的问题。在ie8,9 是无法滚动的。然后立马切换到另一个slide.js，替换上之后放大镜失效了。当时好像是插件内部阻止了冒泡行为，我那个放大镜取不到事件了。 因为已经到deadline了，通过我们的leader跟运营人员沟通，先不要这个功能了。就上了。后来查的时候，swiper2的兼容性比较好，ie8.
• 个人的缺点 。技术上就是还是比较low， 然后就是个人的毅力感觉一般，但是最近健身感觉自己很不错。
• 怎么算是分布式的应用呢，属于自己挖坑。
• 问了我好多不是技术“点”的问题，都是大的面，细节很少。记不清了。

三四面

就是 hr 和 ceo 了，就是问一些离职原因，跟公司价值观方面的问题了。

总结

无论是一面的 pdf，让我实现一个功能，还是二面的问题，都是偏重于项目实战的。他们想要的是入职就能干活的人，先能负责某块开发任务。并且在独立解决问题，团队分享方面有所表现。

腾讯 （omg）

一面

• 平常开发怎么设计 react 组件的。比如 container 组件，业务组件等等的。
• 手写一个观察者，发布订阅模式。
• 什么是函数式，跟面向对象有什么区别，因为我简历写了正在学习 fp。
• 科里化，写一个
• cache-control，http-only
• url输入到服务器中间发生
• redux源码
• vue跟angular像不像
• vue跟react的模板渲染分别是怎么做的
• 实现垂直水平居中

二面

• react 组件的结构，其实是问组件实例对象的结构，问题没理解。我说在 children 里就能看到。他问是吗，是什么样的，你平常应该用过 children 啊，应该知道啊。我推测 children 是数组，因为有 children.map 方法。他又问一定是吗。

  这个问题上来就暴露了我对这些细节是没有关注的，而他期望的是，你用 React，连它的实例都没看过，children 可能是一个，可能是多个也不清楚。

• 那我再问一个特别简单的问题，组件之间的通信，比如父到子，子到父。再说一个兄弟组件怎么通信，嵌套了好多层呢？

  嵌套多层的他直接说有好几种方法，你随便说几种吧。我从来木有总结过，整个人有点懵逼，也没有回答好。后来整理了一下 React组件之间的通信

• 再问一个稍微有难度的，组件的 state 嵌套多层的时候，我要让最里面那个 state 变化，怎么做。我开始没理解这是啥意思，他解释说 state 是 { a: { b: { c: { d: 1 } } } 这样，你 setState 的时候，怎么改属性 d 的。我说一层一层的找进去，setState 新对象。他又说那几层是可以的，假如说一百层呢，也这样吗？我就懵逼了。

  他说 react helper里面有个 immutable 的库，就是用来处理这种情况的。

  immutable 我是知道的，但是我了解的是通常处理不可变数据的。后来查了一下，应该是这种操作。

  import { formJS } from 'immutable';
  const obj1 = { a: { b: { c: { d: 1 } } } }
  const obj2 = Immutable.fromJS(obj1).updateIn(['a', 'b', 'c', 'd'], value => value + 1)
  console.log(obj2.toJS); //{ a: { b: { c: { d: 2 } } } }
  

• 你简历上说你看过 redux 的源码，简单说一下吧。
  终于认可了我一次，说这个确实看过，能说出来。我有点尴尬了。
• 你说你读过 《深入浅出 nodejs》，那你在项目中用过 node 吗。
• 移动端做过吗，适配问题。750px 的设计稿，你怎么做适配，给几种方案。
• rem的原理是什么。这个答的也不好
• 然后就是让我问了一些问题，还跟我说你工作才一两年，你要的这个薪资肯定给不到，腾讯卡工作年限很严格，评级方面。最后就是现在不会直接给你面试结果，他们会横向比较几个候选人。

总结

腾讯面试的感觉就是，没有那么正式，都是部门的技术直接联系的你，然后二面就是部门负责人了，决定了是否入职。二面给我的感觉就是，他从 React 入手问一些基础的问题（一些需要留心注意的）。如果没有注意这些点，没有总结，或者看过类似的总结文章，是很难有条理的回答出来的。其实我不太喜欢他这种，“我觉得很简单... 你就应该会的” 的方式。但是这次我发现了自己的一个问题，就是面试的时候爱说一些了解的名词，但是实际没用过，恰好这个面试官都比较深入了解，也比较反感，他认为你这是 “不懂装懂”。所以面大公司，不会的还是尽量要说不会，不要犯了面小公司的错误。自己也确实没有做到注意总结，了解也确实比较浅显，为自己以后的工作学习敲响警钟。

阿里 （天猫）

一面

由于一面是电话面试，主要问了好多项目的问题，如何解决问题的。

• 比如问其中一个项目，查询多字段对应处理的问题，sql语句怎么拼的，你的自定义配置是怎么回事。
• session 和 cookie 的区别
• 使用 redux 和 mobx 的区别
• 什么是 bfc
• node了解多少，用过吗
• 算法怎么样
• 好多问题，有点忘了，就是各种知识点... 其实百分之八九十能答出来，他也觉得不错，让我后面好好准备，架构方面，原理方面。

二面

面对面

• 介绍一下你的工作历程（经验）
• 我们找一个产品或者项目具体聊聊，让我自己说。
• 介绍一下项目，技术栈，我是不会问的。
• 你用过 vue, react。你觉得他们有什么区别。
• 说一下你是怎么用的 redux
• 我自己提到了通常放在 container，他问了一个 connect 怎么做到注入 state 的。我就说 connect 是一个高阶组件，注入进来的 store，通过 state 维护？他又问那是怎么实时 render 的？我说 connect 里面应该有 监听 store 的 changes 吧。最后就说没看过 react-redux 的源码，只看过 redux 的源码。
• 看了我的一篇博客，问了一个 this.children 是实例还是 class
• react router 的 hash ，history api 有什么区别，我说了一些表层的区别，url 的不同，实现的原理不同。他继续问还有什么内部的不同吗，我就说不了解了。
• mobile 端有接触吗，我说做的不多，主要还是 pc 端吧，我说你可以提问。问了一个viewport的，如果 width=device-width，iphone6 上页面宽是多少，plus 是多少。如果 viewport 里设为 width=375，plus上会缩小还是放大。

总结

让我自己去聊项目，去考察我的组织、表达能力，以及沟通能力。而且这也最大程度上能了解到，关于这个项目，你自己思考了多少，主导程度。然后考察主要使用的技术栈，了解的深度如何。然后就是他们业务常用的点。刚面完，自己感觉其实还可以，因为都能回答出来，但是可能深度还不够吧。天猫的要求还是比较高的，而且面试官是从杭州过来专门面试的，也有很多候选人同时面试，只能说明自己在这里面还不够出色，不能脱颖而出。

滴滴

一面

• 简单介绍一下自己
• 上来就是一个数组的构造函数上提供了什么方法，然后我就一顿说，副作用的，增删改的，map的
• indexOf和findIndex的区别，我说没用过 findIndex

• 写了一道题，是关于作用域的题。

  function fun(n, o) {
    console.log(o);
    return {
      fun: function(m) {
        return fun(m, n);
      }
    }
  }
  fun(0).fun(1).fun(2);
  let fn = fun(0).fun(1).fun;
  fn(2);
  fn(3);

  这种题好好看看一般能答出来。

• react 中的某个组件嵌套很深，怎么传递 props，很不错，之前整理过。
• redux 和 mobx 的区别。我就从实现的原理，使用方式，结合 react 等方面阐述了一下。
• 你刚提到了 observer，这觉得它们是怎么实现的。redux（listerners），mobx（get，set） 的方式都说了一下。
• observer 是什么模式。
• 还了解其他的设计模式吗。我他妈一激动把面向对象说出来了，这当然不是设计模式了，是编程思维。
• js 模拟一个并发
• 实现两个 setTimeOut之后再做什么。1.原生实现一个串行的队列。2. 用 promise 去封装一下，然后用 promise.all/generator/async.
• 算法，问我快速排序，说一下它的原理，我说忘了。
• 问 es6 主要用那些新语法，我说了几个，箭头函数，解构赋值，const 声明等等... 他说最常用的不应该是 class 吗...
• es5 实现一个继承，我差点给他写四五个。刚学 js 的时候整理过 link
• es6 怎么判断一个数组？ isArray 啊。 [].isArray ? 我说 Array.isArray()，类上的静态方法。
• css 清除浮动用什么，我说就两种，一个是 css 树形 clear，一个触发 bfc。
• css3 动画有什么，怎么用。就是考察 transition，translate，animation 啥的。
• less 中的 & 代表什么意思。这个倒没关注打包后的代码，想了一下应该是上级作用域的选择器...
• 自动化工具用什么，我说打包的话就用 webpack，其中又有各种配置，预处理，编译啥的。配置文件自己写过吗，我说写过。
• 搭建过 react 项目的架子吗，当然。
• 最后一个问题是，
  function fun() {} 的原型指向哪里 ？
  Function.prototype。

二面

• 顺了一下我的履历，问这次为什么打算跳槽，再上家公司时间也不长，期待一个什么样的工作。我说希望有一个技术都比我牛逼的团队。
• 假如说团队里的大部分人技术都不如你，怎么办。我说那也挺好，我可以发挥我的长处，做一个技术 leader 的角色。又问那如果公司不给你一个 leader 的级别呢... 我就说那也挺好的，你可以成为一个重要的角色，不可或缺的人。
• 如果你作为一个 leader，你需要什么样的下属。 我说一个不可或缺的人，一两个技术比较好的。其他不需要那么技术好，只要能胜任工作就行了。
• 你觉得你是容易相处的人吗
• 看你是信息与计算科学的，算法应该不错，手写一下快速排序吧。?我说忘了，我可以写一个冒泡或者插入，然后就写了一个冒泡。
• 怎么判断一个对象是 object，还是 array。用 Object.prototype.toString.call() 吧。
• 写一个节流的函数，我之前刚好看了，写了这么一个东西。

 
  const throttle = wait => fn => {
  var timer;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => timer = null, wait);
      return fn(...args);
    }
  }
}

他说，怎么没有清定时器。我说节流函数分两种的吧，举个例子，我这个是按钮点击后，500ms 后的点击才会执行。还有一种是两个点击间隔 500ms 之内，只执行一次，防止连续快速点击。后面的没写，大概是这样

const throttle = wait => fn => {
  var timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, wait)
  }
}

• 什么是科里化，怎么实现一个 curry。curry 利用了什么特性，他说是其实就是闭包
• 设计模式了解吗？说一下观察者，我说我简单写一个实现吧。就写了一下。
• react 的生命周期介绍一下
• 现在的薪资
• 你有什么问题

  我问了一个很扯的问题，我能给团队来带什么？面试官说，不能说带来什么吧。一些本来就存在的问题，很难说加入一个人就带来质的改变什么的。最主要的还是能够独当一面吧，能够负责一个模块。

三面

• 前两面的感觉如何。
• 有没有什么遗憾的地方？就是前两面没大好的地方。
• 15年毕业，你的第一家公司是 xxx，在那主要收获了什么？
• 我提到了不断自驱，学习。
• 最近解决的一个棘手的问题，前端拼 sql
• react 的生命周期
• 现在的薪资，期望薪资
• 你有什么问题，问了一下面试官的职位，聊团队，以及我加入的项目要做的东西。
• 最后，玩游戏吗，不玩。打篮球吗，不打。在健身

总结

来滴滴面试的时候，很自信，所以自我感觉良好。一面是特别注重基础，各个知识点的问答，想起什么来问什么。看你对基础的掌握情况吧。二面我感觉更多的在看你的情商如何了，当然我的情商不是很高，面试官最后也说了，如果我更 open 一些，会更好。说我的简历上也能看出自己尝试了很多东西，可以去突破一下。当然也问了一些技术的问题。三面是团队的前端负责人，从价值观，个人的成长规划，解决问题的能力去考察，也了解了一下期望薪资。最后的问题就是看有没有共同的爱好吧...

相对 tmall，tx 来说，didi 考察基础，但是又没那么深入，主要是对应聘者的级别要求不一样吧。tmall 的社招不仅是看你干活能力，更多的是你会不会去 push 一些东西，其实就是找亮点，你一定要有积极性，比如说推动某个技术在项目的应用，落地。做出一些好的工具，做一些深入的研究，对业务带来了积极影响。

腾讯 （兴趣阅读）

只有一面

• 各种项目各种问，问的特别细，每一个地方的实现，问你的思考 ?，以及怎么做规划排期，怎么去处理 bug 等等。

  这块就平常自己项目中，做的足够细致就行了，有时候你提到一个点，他都会对这个点进行深挖，看你对项目的细节是否足够了解，另外还有项目整体上的了解。

• mobx redux 的区别，从简历上挖掘出的点，去看你是否总结。

  mobx 我做过简单的总结。

• 自己做过的前端优化。经典的面试题，回答的点还是很多的，从 web 来说，从[浏览器] 发起一个 [请求]，服务器[返回]，[页面渲染]，[css渲染]，都有的说，我也有简单的总结
• react 和 vue 有什么区别啊，特别注重考察个人的总结；
• 对前端安全的认识
• 劫持遇到过吗，主要有什么。我说了一个 dns 劫持。
• webpack都是怎么用的
• webpack.dll ？ context这个参数是干嘛的，我忘了...
• react的性能优化有没有了解过啊，你都是怎么做优化的。
  说实话，react 的优化我很少做 - -，通常 react 的 diff-dom 带来的便利很少关注它的性能问题。不过面试我当然不会说这个，就说了几个点，shouldUpdate，pureComponent，immutable 等等的。不过他似乎不是很满意，继续问我有没有更深入的，全面的优化。我就说局限于此了。
• 问我 angular 用的怎么样，我说项目中没用过。
• 最后聊了一些他们日常的工作，主要是后台管理，运营去推送阅读等。项目目前是 angular 做的，后期会像 React 转。

总结

自己觉得能回答上来个 70% 左右，他最终告诉我，今天的表现能打个七八分吧（满分十分）。然后他就去跟他的 leader 沟通了，回来也没直接拒绝我，就给了我一些建议，要对项目整体的把控多一些，项目的思考，横向多去了解，跟你配合的同学（rd ?）做了哪些工作，还说不过也不着急，毕竟你还年轻。黑人问号脸。

自己的确没有去带整个项目的经历，更多的是个人负责一个模块，虽然对其他人的工作也有了解，技术上的架构也略知一二，不过还是平常的思维有局限性吧，对整体的思考太少，不过我觉得这虽然是今后发展的方向，但是目前还是专精某些点，纵向多做一些深入工作吧。

美团 （商超）

一面

• 从html，css开始
• 了解盒模型吗，现在给定一个 width：200px的盒子，他的width，padding，border，margin都是怎样的
• html的标签分哪几种，列举一些
• img是哪种？ 我回答行内。
• 然后他就问一个img和一个span，里面一段文字，怎么排列。我说上下，img不是行内吗，怎么会上下。。
• 如果实现文字环绕排列 img，应该怎么做。图片 float

• 这个图片不定宽高，怎么实现在盒子内垂直水平居中。

  1. flex 2. transform: translate(-50%, -50%) 3. display:table-cell
• 说一下float这个属性
• 你提到了bfc，有两个盒子，margin重叠的问题，怎么解决
• 有一个input，怎么统计他的输入 0/50，除了事件还能怎么统计
• css3了解吗，主要用什么，animation，transition，translate，transform 这四个是干嘛的
• 实现一个进度条加载，从0 到100
• 'use strict' 是怎么解析的
• setTimeout，setInterval。它的参数，如果在setInterval里5ms不断调用，会有什么问题吗
• setImmediate 和Process.nextTick 的区别
• 写一个检测数据类型的方法。直接写了个 Object 的 toString
• js 里面的数据类型，把布尔忘了- -
• 什么是柯理化啊
• jquery 用过吗，
• https 了解吗
• https 一定安全吗，然后怎么解决呢。实现一个站点从 http 到 https 的迁移
• localstorage 的跨域问题，最大存储是多少，超出了会怎么办
• 跟 cookie 的区别
• sessionStorage 的区别
• http的状态码，200，500，301，302，304
• 一个url从浏览器输入到解析经历了什么
• 你提到了三次握手，四次挥手是干嘛的
• 忘了...

二面

• 各种优化
• 之前做的项目大概介绍一下，技术栈等等
• 各种项目里的问题
• 有没有什么优化的经验，方案。不局限于打包。
• webpack 打包的优化
• 最近项目解决的一个技术难点
• 最近在学什么，对什么感兴趣
• 最近做的最成功的一次分享是什么
• 是不是热衷于团建。
• 现在已有 getData(id, callback) 方法，根据 id 发一个请求，并把 data 传给 callback。你写一个getDataCache的方法，实现相同的id，只发一次请求，即数据可以被缓存起来。
• 说一下http缓存，其实就那几种。
• 你们用的哪种，我说 304 多一些，为什么不用 200，效率方面 200 更高一些啊。我说的确，我们也是通过 hash 给文件打版本号，结合 maxage，让浏览器判断要不要重新请求的。
• 怎么学习前端知识啊
• 最近在看什么书
• 除了写blog，还有什么其他的，工作之外做的
• 还有几个忘了

三面

三面是一个技术总监，感觉人挺不错的。

• 看你之前都是一年一跳槽，是什么考虑呢
• 为什么要从事前端呢
• 看你学的是数学，为什么最后学前端。为什么上大学的时候没好好学
• 对美团怎么看
• 问你一个算法题

规律是这样的：

A B C D ... Z AA AB AC ... AZ BA BB ... CA ... ZA ... ZZ AAA AAB ...
对应：
1 2 3 4 ... 26 27  

做一个程序，让输入一个数字，输出具体的值。比如输入 27，输出 AA。这个问题我也描述不太清，其实就是一个类似进制转化的问题。

• '192.168.0.1'把它转化成位数。进制的偏移问题
• 你觉得自己有什么缺点
• 你觉得你之前做的一件最酷的事情是什么
• 你有什么想问的。大概了解了一下美团超市是干嘛的，介绍的时候还问，想不想做我们的这个商超，感兴趣吗。当然说感兴趣

总结

第一面特别细，之前很少问到的 html，css，还有 jQuery，都问了。这些地方还是多少能记着一些的，能回答个差不多。并没有问你项目中使用的框架，可能关注的点不同，他们更关注基础吧。二面其实就关注性能优化比较多了，还问了很多学习，分享方面的，估计是想看你是不是热爱学习啊，学习方法，喜欢分享的话能给团队带来新鲜度，大部分团队都是有每周的分享的。他问的问题我都是比较喜欢的，开放性的话题更多一些，你能更好的展现自己。三面问了一些基础的计算机问题，这些是我不擅长的，不过大概说了一下思路，并用 js 去实现。还有很多就是面试常问的问题啦，面试前一定要考虑，做准备。比如说做过最酷的一件事，无论是什么事，只要你自己觉得酷就行了，个性面试官。总结下来就是，对这个部门的面试感觉，觉得不错，进去做的工作是移动端，这也是我之前很少做的，也不用什么 react。这个部门是一个新成立的，团队也是从 0 开始，这种团队也有好处也有坏处，好处是大家都是新人，项目也是全新的，适合你发挥。不好处就是太新了，加班是肯定的，压力也会大一些，你长时间都会处于业务中。

最后

硬广。我们团队在招高级前端开发，大部门是平台技术部下的平台前端，我们负责的方向是专快司乘运营等大型管理系统，会用 React 是硬性条件，期待有 node 开发经验，基础好，爱学习是基本，要有积极主动的推动能力。另外，不喜欢做 pc，不用 react 的，或者有其他喜欢的部门，也可以推荐。先发邮件带简历联系我吧。

邮箱：[e-mail]