分享一波网易前端实习生转正面试经验

呃…17 号那天转正面试。

一面:

面试官是一位看起来很有“艺术感”的人,风格和我哥蛮像,所以我感觉蛮亲切的,原先的紧张感觉去掉了大半。
进去先自我介绍,讲一下什么时候开始学的前端。然后开始聊在组内做哪些工作。我简单介绍了一下组内的项目发布平台、模块系统,然后他追着问个不停…因为系统主要开发人员不是我而且我只瞟过几眼源码,所以答的比较简单粗暴,我把之前脑补的组内平台实现思路和他说了一下…然而在问完了组内平台的问题之后他说:“好我们面试开始。”
顿时整个人都处于懵逼状态…心中一万头草泥马飘过…
因为简历上写了 React 和 Vue 的缘故吧,他一开始就盯着这俩问。
先问了 React 和 Vue 的具体使用场景,然后问了和 jQuery 的区别。因为 Vue 我很久没用了,所以我就简单说了一下 React 和 jQuery 在使用场景、关注问题上的区别。
接下来问了 React 的 diff 算法,主要是虚拟 DOM 的实现、diff 算法的实现、怎么把 diff 算法的执行结果同步到 DOM 上。这些正好我前几天一直在看,我和他说我正好实现过虚拟 DOM,就把实现的方法和他说了一下。diff 算法我也略知一二,只是关于 diff 算法的执行结果的同步问题我答错了…
之后说到模板引擎,他问我知道哪些前端模板引擎…我大概是失了智了和他说了俩后端的模板引擎…还好最终说出来了一个 mustache。然后问了如何把一串 html 字符串渲染到网页上,这个问题我记得比较清楚,因为我最开始以为问的是模板引擎实现方面的,后来他说只是问如何加 html 字符串到网页上,我很干脆的回答了一句 "innerHTML"。
之后就问了模板引擎是怎么实现的,我说我之前也做过,我是用正则 + 字符串替换来完成的。
接下来问了一个 Vue、React 和这些模板引擎有什么区别,我之前看过尤雨溪的一个知乎回答,但是面试的时候只记得他说的“React/Vue”不是模板引擎,是前端框架。我和他解释了使用模板引擎和使用前端框架 (React) 开发的区别,后期的可维护性等等…扯的蛮多的。
关于 React 和 Vue 的具体使用倒是没有问太多,看来面试官不怎么注重框架的使用,而是更多的在意框架的本身以及其实现。
关于框架还聊到了组件化开发的有点、数据流动的方向…其他我记不起来了…
之后开始问 js 基础。问了一个事件模型 (冒泡 / 捕获),怎样设置冒泡和捕获,他们的事件传递链是什么方向的,怎么阻止事件冒泡 (stopPropagation),问了我在项目中使用的时候遇到过什么问题。
然后说了面向对象,var person = new Person()的时候发生了什么过程。我说我自己也实现过new,然后把我实现的new方法给他写了一遍,大概是

function myNew(_constructor, arg) {
  var obj = {};
  var result = _constructor.call(obj, arg);
  obj._proto_ = _constructor.prototype;
  return typeof result === 'object' ? result : obj;
}

然后他看到了call,问我 call 是怎么用的,第一个和第二个参数分别是什么意思,这个也非常好答。
说到面向对象了自然要说到原型链,他让我手绘原型链,然后问我_proto_是不是标准的属性、和prototype有什么区别,这里我基本上是对答如流的,因为之前专门写了日志来分析这个。
接下来问我如何实现一个深拷贝,我说这个还不简单看我的,于是写了

var deepClone = (obj) => Object.assign({}, obj)

他说不行 ES6 比较高级,我们要兼容 IE8。
我说那还是很简单于是写了

var deepClone = function(obj) {
  return JSON.parse(JSON.stringify(obj));
}

他说还是不行不让用 JSON…于是我只能手写递归深拷贝。
写到判断是否是数组元素的时候他着重看了我的代码,问我为什么不用typeof,我说typeof [] === 'object',不稳定,要用Object.prototype.toString.call才行,他问我这个方法会返回什么,我在纸上写了[object Array]。他点点头…
在问 js 的时候还问了 ajax 的问题,原生 ajax 的写法,跨域是发生在浏览器端的还是服务端的,跨域的时候浏览器发了哪些请求,jsonp 的原理和实现。对答如流。
还问了字符串操作,然而我实在分不清[split,slice,splice,sub,substr,substring,]的区别,就和他直说了遇到的时候会直接上 MDN 查…
然后他又问了一个效果如何用纯 js 来实现,大概意思就是css里的hover对应 js 里的什么事件,也蛮简单的,随口就答了…
然后问了一下 css 的问题,先问了 flex 布局中如何垂直、水平居中,我脱口而出align-items: center; justify-content: center,然后他问了一个问题我没听清楚,大概是和 flex 的方向有关的,我随口说了一个flex-direction,他就没继续问。
然后说到 transition,他问我哪些属性是可以 transition 的,这个我不清楚,只是说了一下项目中用过的和我感觉可以的。然后他问我如果要给字体加上 transition 应该怎么操作,我最开始说用 animation 一帧一帧来,他摇头,说用 js 来操作,摇头,说写 canvas 操作,继续摇头,经过提示,说用 svg,点头。
然后让我手写一个透明度 0.5 到 1,元素大小从一半到恢复原形的动画。我用 width 和 height 写了一个,他说不行,然后我就改用transition: scale(0.5)这样写,他说可以。
然后他说 js 怎么控制 css,具体问题是如何用 js 控制元素显示,我说xxx.style.display = 'none',然后我补充说这样不好,应该先定义一个 css 假设叫.f-hide{display: none},然后去操作 dom 元素的 css,接下来还扯了一下 jquery 是怎么隐藏元素的,他点头。
接下来说了一点ES6, 真的只是一点。他问我怎么创建一个集合,我说new Set()。然后问我怎么把给定的数组变成集合,我说集合的构造方法传参数就可以。然后问怎么把集合变成数组,我脱口而出[].slice.call(new Set([1,2,3])),后来看他脸色不对,恍然大悟赶紧解释想差了,用forEach转,他说你听过对象展开符么…我这才明白,[...new Set([1,2,3])]
然后问了在 ES6 中新的 for 循环for ... of ...,我举了一个例子给他

var i = [4,1,6]
for(var i of a) {console.log(i)} // 4,1,6
for(var i in a) {console.log(i)} // 0,1,2

然后问我 for...in... 遍历对象要注意什么,我说要注意用xx.hasOwnProperty来检测对象内是否真包含元素,他还问了还有什么办法遍历对象,经提醒答出Object.keys(),问和 for...in... 有什么区别,经提醒答出一个会遍历到_proto_的属性一个不会…
一面到这里大概就结束了,他说我还不错的,大部分都答出来了,让我去等二面。

二面:

二面是一个大叔…
他先看了我的简历,发现我前后端都会,也就问了我一些后端的问题。
在这之前他先问了一个开放的问题,问我知不知道为什么手机加载数据的速度比电脑慢…我不知道咋答,也是胡扯一通…
之后问如果处理大量数据,前后端分别要注意什么。这个也算比较开放的问题吧,我按照感觉答了一下。
然后问了 session 和 cookie 的区别,这个对我来说太容易了…脱口而出。
然后问 session 是什么时候创建,什么时候销毁的,我回答是访问网页的时候创建,关闭浏览器的时候销毁。
然后问使用 cookie 有哪些参数要注意,我说 domain,key-value,expire。
然后问 cookie 有什么用,我说存储数据。
然后问除了 cookie 之外还有什么存储数据的方式…我说 localStorage,IndexDB,sessionStorage,WebSQL…
然后问后端是怎么知道哪个 session 是由哪个用户发来的,我说后端会返给前端 SessionID,后端会维护一个 session map…他点头。
之后问了一个 csrf 问题,www.163.com/a/b下的 cookie 能否在www.163.com/a下被访问到。我说不能【不知道对不对】。
然后问 http 和 https 有什么区别,走 https 的时候前端后端都做了什么…这个我没答好,我说的大概就是前端加密数据传给后端,后端解密数据进行处理,后端加密数据传给前端,前端解密数据进行展示…
之后他问我在移动端的情况下加载网页会有一个小进度条,问我怎么优化这个进度条的加载速度。这里我也没答好,我从减小请求大小、减少请求数、判断用户环境的角度答了,没想到最终答案是使用异步请求…不过他说我说的也有一定的道理。
然后还问到微信浏览器的 ua 头是什么,我说micromessage…这个比较容易。【这个问题之前还有一些问题的,我记不起来了…】
之后就比较扯了,问我在学校上哪些课…那些老师水平如何…然后说了一堆大概中心思想是让我继续学后端不要学前端的话…………………………………………
然后二面也结束了,说我结果不错,让我等 hr 面。

hr 面

这个没啥好说的…hr 问的都不是技术问题…

总结

我感觉发挥还可以。之前很紧张,但是真正开始面了发现大部分东西掌握的还是蛮好的…不过我也不敢很肯定的说一定能转正,只是感觉自己已经发挥的非常好了,如果转正失败,大概就是没缘分了吧……