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

本贴最后更新于 2216 天前,其中的信息可能已经时移世异

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

总结

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

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 192 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 443 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 446 回帖 • 3 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • moreandmore

    CE401F9E067C1068C02D478F9BA541D3png

    1 回复
  • 其他回帖
  • someone

    嗯…十分感谢纠正!!

  • someone

    厉害厉害

  • mutoulbj

    很佩服。可以说是相当细了。
    我这种野生的, 基本上是啥也记不住。

    1 回复
  • 查看全部回帖
zjhch123
未来的事无人知晓,所以才有无穷可能。 杭州