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

呃…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 问的都不是技术问题…

总结

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