前端面试总结(at, md)

18,391 阅读21分钟

引入

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

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

原文链接

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