阿里前端面经

非科班程序员,在校有三个月的项目经验,加上一年工作经验。被内推到口碑高级H5工程师职位。

一面,70分钟,压力面试

晚上九点,和女友逛完街、回到地铁站时,接到了突如其来的面试电话。由于没有做好心理准备,加上地铁站里非常吵,整个面试过程中非常紧张。首先自我介绍,面试官会根据提到的项目细节展开追问,直到答不出来为止。

问:跨域问题有几种解决方式?
答:CORS头,jsonp,设置document.domain

问:如何让一个元素在页面内上下左右居中?
答:绝对定位+负的外边距。

问:如何清除浮动?
答:clear属性,以及overflow:hidden
追问:overflow:hidden有什么副作用?
答:元素多时,可能会隐藏掉部分元素。
追问:overflow:hidden为什么能清除浮动?
答:不清楚。

问:如何实现动画?
答:CSS3 transition属性,类库如jQuery,或者用js手写。
追问:如何手写?
答:创建一个函数,传入动画元素、属性、目标值、动画时长,以及可选的时间函数。根据当前时间戳、起始时间戳、动画时长、属性初始值和目标值计算出任意时刻的值。时间函数默认为单位区间到单位区间的线性函数…(被打断:好了,这个问题差不多了)

问:CSS选择器的优先级是怎样的?
答:首先,所有带!important的属性比不带的高。其次,行内样式>内嵌样式>外置式。然后总地来说,选择器越精细,优先级越高。比如说,id选择器>类选择器>标签名选择器>*选择器,子元素选择器>后代元素选择器。同样优先级的样式,后面的会覆盖前面的。

问:熟悉什么类库吗?
答:jQuery以前比较熟悉,不过很久没用了。因为我的理念是这样的:在基础没有完全掌握牢固之前,不去依赖框架和类库,防止被惯坏了。
追问:那说说原生js怎么获取某个类名的所有元素。
答:document.querySelectorAlldocument.getElementsByClassName

问:原生js怎么发起ajax请求?
答:新建一个XMLHttpRequest实例,用opensend方法发起请求,添加状态变更监听器。
追问:一个XMLHttpRequest实例有多少种状态?
答:常用已完成状态,别的不记得了。
追问:怎样发起post请求?或者说post请求的过程是怎样的?
我坦白地说没有get到这个问题的点,面试官表示不纠结了,下一个问题。

问:用js怎样实现一个类?
答:抛开ES6的class关键字不谈,可以用构造函数。要继承的话,可以把父类的原型拷贝到子类上。讲了一下原型链上的查找过程。
追问:那如果后面动态地在父类的原型上添加一个方法,拷贝继承这种方式,子类不就找不到这个方法了吗?
答:你说得对,对于这种情况,把子类原型指向父类的实例更好。
追问:js中怎么实现封装和多态?
我表示非科班出身,它们的概念已经不记得了。

问:js的闭包了解吗?
答:函数中返回另一个函数,那么被返回的函数可以“记忆”被创建时的环境。
追问:为什么会有这样的特性?
答:作用域链?没有深入思考过。

问:js的作用域有几种?
答:var有全局作用域、函数作用域,letconst外加块作用域。

问:了解Promise吗?
答:Promise是ES6的新特性,可以用来碾平异步回调。简要地描述了一下resolvereject函数和then方法。

问:svn和git的主要区别?
答:svn的仓库有中央服务器,而git是分布式的。别的区别不清楚。

问:让一个100px的方形元素从页面的最左边过渡到最右边,最高效的动画方式是什么?
答:css3 transition使用底层渲染,比所有js动画都要高效。可以让元素绝对定位,从left:0变换为left:calc(100vw-100px)
追问:有没有更高效的方式?
答:想不到(可能想问我animation属性?当时的确没想到)。

问:有没有做过移动端应用?
答:在公司主要做中后台的内网项目,移动端经验不足。
追问:那谈谈对移动端开发的理解吧。
答:最显著的,是尺寸的差异。其次是触控方式的差别,移动端有一系列以touch开头的事件。还有要注意优化性能和加载速度,因为移动端一般不能多任务,用户可能没有那么耐心,设备性能也不能跟pc比。

问:你的前端学习历程是怎样的?
答:在学校时,主要通过图书馆的书籍。之后把MDN上教程和文档刷了一遍。

问:对于以后的职业规划?
答:想做个专门的前端工程师。在公司实际上大部分时间在写php,所以对这种精力分散、各方面都泛而不精的状态不太满意。目前已抛弃php技能,在深入学习Node.js和ES6。等到把它们烂熟于心之后,挑一门比较顺手的前端框架,可能是Reactjs或Vuejs。

问:感觉面试得如何?还有什么想问的?

我说,之前朋友要帮我内推时,其实我婉拒了。因为知道你们在招工作三年以上的、能带队的高级工程师,我达不到。今天面试比较仓促、紧张,好多东西没答上来。总之,能有这个机会我就满足了,结果,我并不看重。

面试官笑笑说,其实三年经验是虚的,只是希望新人能快速融入项目。我觉得你基础掌握得不错,帮你争取一下机会。如果我们能共事的话,公司会先组织一些培训,总之工作年限不是大问题。

回顾面试过程,真的能体会到到面试官的耐心,可惜忘了问花名,有点遗憾。

简短的二面

隔天早上接到了hr的电话,约了二面时间。本来是视频面试的,后来简化了一下,同样改成了电话面试。二面同样问了一些基础知识。有一些和一面重复的问题就不列了。

问:你只有20岁?
我说是的,上学早,又跳了几级。

问:js的字符串类型有哪些方法?
我答了一堆方法名。
追问:replace方法,第二个参数是什么?
答:可以是字符串,字符串中$开头的模式表示获取的匹配。还可以是个回调函数,接收匹配字符串作为参数,返回的字符串用来替换原字符串的匹配。
问:用replace方法如何实现trim方法?
答:.replace(/^\s+|\s+$/g, '')
问:正则表达式中,问号的含义?
答:一种是用来表示问号之前的模式是可选的。另外,放在+号和*号后边表示非贪婪匹配。还有一类,(?=)表示非获取匹配等等。

问:平常用原生js多还是jQuery多?(答:原生)原生js怎么获取元素的第一个子元素?
答:jQuery,用children()[0]。原生的话用childNodes[0](其实应该是childElements)。
追问:知道文本节点和元素节点的区别吗?
我明白了上个问题没有回答好,并解释了它们的概念。

问:如何跨标签页通信?比如一个页面和它里面的iframe通信。
答:postMessageonmessage成对使用。

问:如何实现一个弹窗组件?提供哪些接口?
答:构造函数接收html格式的内容、可选的配置项对象作为参数,其中配置项属性可以包括宽高、动画时长、显示时和关闭时的回调函数。当然要提供用来显示和关闭的方法。

问:XSS了解吗?为了防范XSS,需要处理哪些字符?
答:跨站点脚本攻击;需要过滤><&

问:HTTP状态码302和304的含义?
答:304表示Not Modified、未更改,和缓存息息相关。302表示临时跳转。

问:HTTP请求有get和post方法,其中post请求内容是放在请求头里还是请求主体里?(答:主体)post请求内容的格式是什么?
答:基于文本或二进制的格式,这个看前后端的约定。通常有JSON、FormData格式等。

问:常用那些js模板引擎?Handlebars之类的。

我说,都没用过。面试官说好吧,面试到此结束,非常感谢。这让我一度感觉自己被刷了,因为看到过有个说法,如果面试官表现得非常客气的话,那么很有可能没戏了。

三面,技术终面

面试官是口碑的前端组老大,主要考察项目经验。我介绍完了项目之后,面试官挑出了一些不完善的地方,询问优化方案。不赘述。这次又问到了闭包,由于一面回答得不是很好,所以做了一些功课。

问:什么是闭包?
答:js创建函数的同时,创建了函数作用域。本来函数执行完之后,里面的局部变量也就随之注销掉了。然而如果函数返回了另一个函数,那么相当于提供了一个访问那些的局部变量的入口。总结,闭包就是一种既能访问本身的局部变量,又能访问创建时的变量的特殊函数。
追问:你提到了作用域嵌套,那么父函数能不能访问子函数的变量?
答:不能,但反过来可以。
追问:闭包有什么副作用?
答:我也没有遇到过,不过据说在早期的IE中会导致内存泄漏。
追问:知道具体是什么情况吗?
答:我记得是事件和DOM元素循环引用,导师垃圾回收器无法回收。(其实我不记得,瞎说的。又说了一下js的基本垃圾回收机制)

问:你的项目里提到接口可用性监控,那么如何监控一个WebSocket服务?
答:创建一个特殊的客户端,定时发送约定好的监听数据,类似tcp的心跳包。

问:你觉得这一年来,你最出色的前端作品是什么?

我表示在公司主要在写后台,没有拿得出手的。面试官说,自己的项目也可以。我于是介绍了一下JavaScript 24。面试官不解,一年的时间应该也能写不少东西了,为什么觉得一个小游戏是最出色的作品呢?我无奈地表示,在公司主要在写php,没有整块时间去钻研前端工程化的东西。况且我不喜欢php,这也是我离职的主要原因。面试官说,了解了。至此,所有技术面告一段落。

一句话总结,项目经验是我最大的短板。果然隔了一个周末,收到了阿里的“祝商祺”拒信。

发表评论

您的电子邮箱地址不会被公开。