前端面试总结（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

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

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 的，或者有其他喜欢的部门，也可以推荐。先发邮件带简历联系我吧。

邮箱：sunyongjian0108@gmail.com