阅读 1801

2年前端经验成功拿到阿里巴巴、360offer

本人是在2020年1月份的时候开始准备面试的,春节过后开始在boss上投递简历,总共面试了十几家公司,面试都是电话+视频面试,面试结果如下:

  • 掌门1对1(过)
  • 爱贝集团(过)
  • 再惠(过)
  • 拓链(过)
  • 2345(过)
  • 今日头条一面挂
  • xTransfer(总监面挂)
  • 菜鸟网络(第四面总监+hr面挂)
  • 携程(三面技术面过,最后的线上评测挂,需要做一些图表评测的。。。无力吐槽)
  • 口碑(过)
  • 360(过)

现在已经入职了360云安全事业部,希望我的经历与感悟能够帮到大家。

转行经历

14年大学(东北大学秦皇岛分校)本科毕业后直接校招去了一家半国企单位做嵌入式开发(硬件方向)。因为公司的制度,加上内部繁琐的流程,其实在头一年就已经有了离职的想法,但公司做的产品比较小众,跳槽难,也没有勇气转行,就这样蹉跎了3年,现在回想起来,真的后悔。一直到17年8月份,买了Udacity的课程开始自学前端,10月份辞职回家,一边休息一边兼职udacity学城的前端助教,12月份到上海开始找工作,18年1月份开始第一份前端工作,薪资7.2k。

因为一开始没有工作经验,在boss上投递了四五十分简历,最后也只收到了几家公司的面试通知,比较幸运的是最后拿到了两家公司的offer,都是小公司,一家给的9k,另一家给的7.2k。这两份offer说起来还挺有意思的,给9k的这家,是做农田数据检测的,知道之前我是做嵌入式开发的,想着后面可以让我帮忙设计一下传感器的电路设计,所以给我发了offer;而7.2k这家,是我在做udacity前端助教一个学员内推的,交大的一个老师简单面试了下就让我过了。最后选了7.2k的这家,原因是这家公司在面试的时候就跟我说了,他们这基本不加班,典型的965工作制,而对当时的我来说最缺的就是时间了。

公司在交大的闵行校区,我在学校对面租了房子,走路也就十几分钟的路程,几乎又过上了大学的生活,工作在软件大楼,吃饭在学校食堂,下班后就开始学习从慕课上买的黄轶老师的vue课程,学完后又开始学koa,最后用vue+koa搭了一个简单的cms管理系统。因为在做这个项目的过程中学到了很多,想着把搭建过程记录一下,又去网上找好用的博客工具,最后相中了vuepress

我把搭建好的博客链接丢到了蜗牛老师到一个小程序群里,然后认识了一飞同学。他当时正准备帮七月老师做一个文档工具,也打算用vuepress,因为他马上要结婚了,所以想找人先把这个工具给做起来。当时找我,我觉得自己hold不住,最后在他的劝说下,觉得这也算是个机会,硬着头皮答应下来了,正好那段时间也没什么事,就一门心思扑在这上面了。刚开始的时候磕磕碰碰,怎么引入icon图标、怎么修改code主题、怎么调整页面结构都是一头雾水,也没别的办法,就是反复看源码,把结构、运行原理看个大概,又去github上扒拉issue,然后就开始在上面进行魔改了,后面进展还算比较顺利,做了一个多月,把第一版给做出来了。这个东西做完,七月对我俩还是比较满意的,然后又问我们有没有兴趣做开源项目,后来我们就成了lin-cms-vue最早的两个前端开发者了。

现在回头想想,我可能算是比较幸运的吧,入行半年多,就有机会做开源项目,这个项目也在我后面的面试过程中,给我加分了很多;但这也是我自己主动抓住了这次机会,不是吗?如果当时选了那份比较忙的工作,我就没有那么多时间去学、去写博客,如果当时我退缩了觉得自己做不好,也就没有后来的事情了。

准备面试

基础知识我主要是通过掘金出的《前端面试之道》这本小册来准备的,虽然小册有的内容讲的不深不全,但是整个前端的知识体系还是比较全面的,从js的es5、es6、浏览器的渲染、缓存机制、安全、性能优化、vue\react框架、http、数据结构、常见算法等都有涉及到,我就是按照小册的所列出来的内容来构建自己的前端体系的,来来回回看了有两三遍吧;另外小测的评论区小伙伴也列出了很多很好的文章,可以很好的拓展自己的知识深度;然后我还买了饥人谷的js专精课程,看了不少饿了么团队在知乎上发表的文章,质量都很不错;也在掘金上刷过别人的面经,查漏补缺自己的知识点,总的下来花了一个多月的时间。

准备算法的时候,正好当时慕课搞活动,我就花了1块钱买了《算法与数据结构-综合提升C++版》,每天大概花一个半小时,把基本排序、高级排序、堆和树这几章内容给看完了,后面用js实现了一遍,因为当时我也去看过别人的阿里面经,算法题一般都不会太难,所以算法这块我就这么准备了。

除了这些,还需要准备项目。因为待的是小公司,业务也相对简单,公司的项目拿不出手,没办法只能自己造了。我在19年的时候跳槽到了另一家小公司,在这一年里自己学了react、rn、flutter、ts,下半年的时候,开始准备项目。花了两个多月的时间,用react hooks + ts造了一个UI组件库,大概造了十几个组件;用egg + react仿造慕课的《从0到1 实战朋友圈移动Web App开发》写了一个高仿的webApp;还有之前用vue写的cms管理系统以及开源项目lin-cms-vue,最后简历上大概准备了四五个项目。

因为不想再去小公司了,所以简历投递的以中大型公司为主,前期面的掌门、爱贝、拓链等比较顺利,问的问题都比较常见,只有掌门涉及到了一道迷宫的算法题,我的回答面试官不是很满意不过最后还是让我过了。前期拿到几个offer之后,心理也更有底了,就想着开始试试大厂。下面就重点说说我面试阿里的经过。

头几次面试,跟面试官交流的时候会有点紧张,语言的组织也有点乱,这些情况,随着面试次数增多,在后面都慢慢的改善过来了;并且有些知识点理解不到位也在面试过程中暴露出来了,所以面试的时候,自己不会答或者觉得没答好都题,要记下来,过后再把它研究透。

菜鸟一面

第一面主要是考察基础知识,这里提一句,菜鸟面试官并没有事先跟我约好面试时间,当时接到电话是下午2点多,问我有没有时间,简单的自我介绍后,就开始进入问答环节。面试时长1小时。

  • js基础类型有哪些(没错,就是这么基础)
  • js数组去重的方法有哪些
  • set和weakSet的区别
  • es6用过哪些新特性
  • http状态码(301,302,304,401,403,405)
  • http1与http1.1的区别,用过HTTPS嘛,为什么说它更安全,用的什么加密方式
  • 浏览器缓存(强缓存、协商缓存)
  • 为什么握手需要3次?挥手需要4次
  • 如何解决跨域问题?
  • 跨域可以携带cookie嘛?如果可以,前后端需要怎么设置(面试官有看到我简历上写着会node,所以问了一些后端方面的知识)
  • 说说vue和react的区别
  • react的context功能用vue怎么实现(inject,provide)
  • vue的具名插槽功能用react怎么实现
  • hooks解决了什么问题
  • 说说用TS有什么好处,interface和type的区别,never类型什么时候会用到
  • 中间定宽,如何实现两边平分剩余的宽度,有几种实现方法
  • 将数字12345678转化成:12,345,678

面试官基本就是看着你的简历问问题,你简历上写的任何东西都有可能被问到,像框架这一块,如果只会react或者vue都没问题,但是如果你两个都写,就有可能像我这样被交叉着问;如果时间不充裕,好好准备其中一种就够了。

菜鸟二面

还是电话面,这回是交叉面。面试时长40分钟。

  • css的权重排序
  • 如何实现script的延迟加载
  • hashRouter和browserRouter原理和区别
  • vue 实现按需加载的原理
  • instanceof 实现原理
  • 说说vue的双向绑定原理
  • vue的diff算法和react的diff算法区别
  • promise 限制并发数
  • 什么是防抖,什么情况下会用到
  • react是怎么优化的
  • 两个有序数组如何拼成一个有序的数组
  • 说说为什么转行
  • 说说你做的比较好的一个项目(从需求分析,技术选型,碰到什么问题,怎么解决,有什么价值)这里我说到了开源项目,也说了后期可能会推出商业付费版,面试官还算满意吧
  • 这个岗位base在杭州,你现在在上海,有问题嘛
  • 有什么想问的

菜鸟三面

这回是视频面,是菜鸟的前端负责人。

  • 自我介绍
  • vue和react有什么不同
  • vue通过数据劫持就能知道哪些数据发生了变化,为什么还需要diff算法?
  • 现在公司的团队情况,产品情况,你在公司负责什么
  • 你是如何提高开发效率的
  • 说说你做的比较好的项目
  • 市面上已经很不少cms的开源项目,你们这个项目别人的好在哪
  • 平时怎么做性能优化的
  • 是怎么学前端的
  • 为什么想转行
  • 为什么想来我们公司
  • 随机出了几道题,有关于原型链、this指向的考题

第三面就面了半个多小时,面试官好像对我做的项目不是很有兴趣,就随便问了问,没有问太基础的问题,当时面完,感觉可能挂了。大概过了一周,意外h收到了总监+hr面的通知。

菜鸟四面

这回是两个面试官,菜鸟的总监和hr。

面试刚开始就发生了一件比较尴尬的事情。先自我介绍,这时候总监才开始看我的简历,当知道我只有2年前端经验的时候,总监有点惊讶,问了句:"你不是一直做前端开发的啊",当时听到这句话就有点慌了,感觉要跪。后面面试过程中,心态就有点变了.

  • 你们的权限系统是怎么设计的
  • 用户信息和路由信息的数据结构是什么设计的
  • 为什么做这个UI库,市面上不是已经有很多好用的UI库了
  • 平时业务方面的组件是怎么封装的
  • 为什么转行
  • 怎么学的前端
  • 你转行前的学的哪些东西,是在前端领域可以用的到的

这一面面了不到半个小时,几个转行相关的问题是hr问的。前面心态有点受影响,在讲项目的时候,出现了几次短路,没有前几面表现的好;面试官面完后问我有没有什么想问的,我就问了面试官对于工作经验的看法,面试官说他们对应聘者的工作经验是有要求的,但是也会综合评估应聘者的水平和潜力。后面过了大概5天,就收到了面试没通过的邮件了,第一次面试阿里就这样跪了。

口碑一面

电话面,面试时间1小时

  • 如何做首屏优化的
  • react高级组件作用有哪些(这里举例了redux的例子)
  • 接着问redux如何处理异步请求(这里我还跟面试官对比了vuex和redux的区别)
  • 什么是闭包,平时怎么用的
  • 同时发出A B C三个请求, 如果有一个请求超时,就取消这次请求,如何设计
  • 知道DNS劫持吗?怎么防止DNS被劫持
  • 浏览器输入URL后过程说一下
  • 有做过性能监控吗,怎么做的
  • react的生命周期说一下,16.3后新增加的两个生命周期是什么,什么情况下会触发这两个生命周期
  • fiber解决了什么问题,用的什么数据结构来存储节点信息的
  • 一个数组里,如何找出最大值,有几种办法,越多越好(遍历,排序,Math.max)
  • 二分查找的时间复杂度是多少
  • 说一下实现bind函数的思路
  • 箭头函数的this,是在定义时确定的还是运行时确定的

口碑二面

面试时间2小时,半小时笔试+一个半小时视频面试

  • 面试官一上来就跟我介绍了口碑的业务情况
  • 用过webpack吗?怎么提高打包性能?
  • webpack的loader和plugin是用来干嘛的
  • 如何不用递归,实现二叉树的前序遍历
  • 说说垃圾回收机制(这块之前没怎么了解过,然后我说了什么情况下可能会发生内存泄漏的情况)
  • 最近三个月有看过什么书吗?说说你最近从书上学到了什么(这里我举了经济学方面到内容,顺便说了一下最近国家管制口罩价格到问题,从经济学角度来看,国家不应该过早干预口罩的价格,因为口罩的利润大,大家觉得有利可图,生产口罩的厂家就会变多,这样一来口罩的生产量就上来了,口罩的价格自然而然就会跌下去)
  • 你之前公司比较轻松,那如果来阿里加班多了,你能适应吗?
  • 用node怎么处理大文件读写问题
  • 说说node的事件管理
  • 从数组中找出三数之和为n
  • 说下koa的洋葱圈模型,有什么好处,如果不调用next,会发生什么
  • 当初为什么要做开源项目,他解决了什么问题
  • 正则会吗,平时用正则来处理什么问题(这里直接跟面试官说不怎么用正则,平时可能用来匹配一些文件后缀,用到了才会去查,面试官好像不是很满意

笔试题

题目一:
请完成“空白处”代码,使得以下组件在选择时能够将合适的值打印出来
class Counter extends React.Component {
	select(val) {
		console.log('you have select' + val);
	}
	render() {
		return (<ul>
           { 
               ['a','b','c'].map((item, index) => {
                   //return <li onClick={this.select(item)}>{item}</li>
               })
           }
       </ul>)
	}
}


题目二:
请实现find函数,使下列的代码调用正确。
约定:
title数据类型为String
userId为主键,数据类型为Number
var data = [
	{userId: 8, title: 'title1'},
	{userId: 11, title: 'other'},
	{userId: 15, title: null},
	{userId: 19, title: 'title2'}
];

var find = function(origin) { //补充find
    let matchArr = []

    find.where = function (_test) {
       matchArr = origin.filter(v => _test.title.test(v.title))
       return find
    }

    find.orderBy = function (key, order) {
      if (order === 'desc') {
         matchArr.sort((a,b) => b[key] - a[key])
      } else {
         matchArr.sort((a,b) => a[key] - b[key])
      }
      return matchArr
    }

   return find
}

//查找data中,符合条件的数据,并进行排序
var result = find(data).where({
	"title": /\d$/
}).orderBy('userId', 'desc');

console.log(result); // [{ userId: 19, title: 'title2'}, { userId: 8, title: 'title1' }];




题目三:
下面是一个redux中间件,补充“空白处”代码,使得dispatch支持action为函数作为返回值
  export default function() {
    return ({ dispatch, getState }) => next => action => { //此处开始补充
      if (typeof action === 'function') {
        return action(dispatch, getState);
      }
      return next(action);
    };
  };



题目四:
为Function扩展一个方法bindX,可以实现如下功能
  function add(num1, num2) {
      return this.value + num1 + num2;
  }

  var data = {
      value: 1
  };

  var addEx = add.bindX(data, 2);

  addEx(3);    // 6

Function.prototype.bindX = function (_this,num1) { //补充
  const _context = this
  return function (num2) {
    return _context.call(_this, num1, num2)
  }
}



题目五:
有一个数组,里面只存在 * 和 字母,比如 [‘*’, ‘d’, ‘c’, ‘*’, ‘e’, ‘*’, ‘a’, ‘*‘]。现在需要把这个数组中的所有星号移动到左边,所有的字母移动到右边,所有字母的顺序不能改变。
var arr = ['*', 'd', 'c', '*', 'e', '*', 'a', '*'];

 function parse(arr){
    let signArr = []
    let alphaArr = []
    for (let i = 0 ; i < arr.length; i++) {
		if (arr[i] === '*') {
           signArr.push(arr[i])
        } else {
           alphaArr.push(arr[i])
        }
    }
   return [...signArr, ...alphaArr]
 }

 console.log(parse(arr));

复制代码

笔试题不算很难,做完题面试官会根据你的答案来反问你,比如最后一题,问了我时间复杂度是多少,有没有别的方法,不需要借助外部的存储空间等等。

口碑三面

第三面是BOSS面,视频面了差不多2个小时

  • 用CSS隐藏元素的方式有哪些
  • display:none 和visiblity:hidden的区别
  • 数组结构如何转换成树结构,说说思路
  • 表单可以跨域吗
  • 如果你的后台访问量,达到每秒超10万次,要怎么设计(这里要说到负载均衡方面的内容)
  • 如果让你设计饿了么的外卖系统,你会怎么设计,有哪些需要考虑的(这里考的是对业务的理解,送外卖,就是想的要怎么能尽快把外卖送到客户手里,怎么调度配送员,需要考虑到一些路况信息、天气情况之类到)
  • redux是如何把数据注入到react应用里的
  • 你们平时是怎么提交代码,git flow了解吗?
  • 前端测试是怎么做的
  • 说说你的转行经历,这里BOSS原来也是转行做前端的,大学是学的化工,然后给我讲了一些他的学习经验,如何克服焦虑,前端知识体系更新太快怎么学习巴拉巴拉的,这块聊了有20多分钟。

在这一面,面试官多次提到了要对业务有深入的理解,用业务来推动技术的升级,而不能单单只从一个前端开发者的角度去看。

HR面

HR就问了为什么转行,介绍了一下过去做的东西,觉得自己对公司要哪些贡献,为什么离职。。。问了我的期望薪资,这里我把现在这家公司的薪资待遇,还有360给的薪资待遇跟HR说了下,我还比较耿直的说了阿里加班会比较多,所以希望待遇比360高点(这里因为现在自己这家公司的待遇不高,是避税的形式,然后我本身前端经验也不是很多,所以谈薪资的时候有点虚,没敢多要)。又过了2天,HR给我电话说过了,确定了薪资,级别是P6。

总的来说阿里的面试比注重基础,也比较看中你的知识广度,面试一般都是先从最基础的开始;算法会问,但是总体来说还是属于简单的,不是难为人的那种题;除了这些,阿里也比较看重的你的项目,特别是在后两面;如果你跟我一样,自己公司的业务项目相对简单,可能就需要自己造一些有挑战性的项目了,并且项目这东西在平时的工作中就要有意识的去准备,等到想跳槽了再准备,可能会来不及了。

复习资料

中高级前端大厂面试秘籍,为你保驾护航金三银四,直通大厂(上)

一个合格(优秀)的前端都应该阅读这些文章

饿了么前端

关注下面的标签,发现更多相似文章
评论