前端面试总结（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 的，或者有其余喜欢的部门，也能够推荐。先发邮件带简历联系我吧。

邮箱：sunyongjian0108@gmail.com