前端面试分享: 两年经验社招-阿里巴巴

作者两年经验, 第一家任职的是个小公司, 第二家算是二线互联网公司, 各待了一年吧...
能有机会去阿里面试很惊喜!
先来和大家分享一下面试经历...

电话面试初探

因为还在职的缘故,电话面试从晚上8点钟开始, 持续了半个小时左右,
一开始的时候特比紧张,甚至声音略有些颤抖 = =!

1. 简单自我介绍, 做过哪些项目, 使用哪些技术栈 ?
   这个就没什么好说的,因人而异,不要吹自己并不熟悉的技术,免得被深入问的时候答不上来
2. 如何看待前端框架选型 ?
   我比较熟悉vue和react 就主要提到了这两款框架各自的优点和缺点以及性能对比, 以及上手难度, 社区生态, 团队成员组成, 招聘难度啊 blabla...
3. vue的如何实现双向绑定的 ?
   Object.defineProperty() 这个方法来追踪依赖并来完成UI的更新
4. react virsualDOM 是什么? 如何实现? 说一下diff算法 ?
   vm网上资料很多, 实现其实也只是解析JSX -> AST语法树, diff算法主要是说了react如何将O(n3)的算法降低到O(n)级别的
5. 工作中最出色的点, 和你最头疼的问题 如何解决的 ?
   还好提前准备到了, 现场想肯定就黄了... (捂脸)
6. 平时如何学习, 最近接触了解了哪些新的知识 ?
   什么github 各种论坛 书籍... 想到的都说了就成

结束之后,面试官不告诉我结果说让我等通知, 然后挂了电话一分钟后, 电话就来了...
约我第二天去办公地点面试 ! (效率还挺高)...

---

技术一面

一面的面试官很和蔼,彬彬有礼, 让我顿时放松了许多

1. 简单自我介绍, 介绍一下你的项目, 技术栈 ?
2. react和vue的比较 ?
3. React Diff 算法 ?
   和电话面试前三题基本一样, 从你的回答中面试官来找问题, 可能我回答相似度高吧, 问题都相似
4. 观察者模式实现 ?
   设计模式其实看的不多, 只是说了一下大体的思路
5. http报文头部有哪些字段? 有什么意义 ?
   这个就很多了, cookie cache-control user-agent expires host refer 等等 挑你会的常用的说, 面试官也不会要求你都说全的
6. 移动端高清方案如何解决 ?
   这里被卡住了, 没有理解到是rem布局+几倍图+1px问题, 只提到了flexible.js,并且说了一下原理,现在回头看,说的还是有问题... 还是有点久了,忘记了
7. webpack的原理, loader 和 plugin 是干什么的? 有自己手写过么 ?
   大致说了一下,webpack解析模块, loader和plugin的作用, 没有手写过, 看过一部分代码...
8. 简述从网页输入url到网页展示的过程发生了哪些事情 ?
   说的还是比较粗, 不过重点DNS解析,三次握手,数据请求,浏览器如何解析DOM树,css树应该都提到了, 还提到了浏览器的多进程多线程架构,js线程和渲染线程互斥
9. 细节问题: 我的项目中是一套代码实现了PC h5兼容 ,组件耦合严重, 问有没有什么好的解决方案 ?
   只想到了把数据层抽象出来,但是其他的不知道该如何解决... 现在也不知道- . -
10. SSR 和 客户端渲染有什么区别 , vue是如何实现绑定事件的 ?
    简述服务端渲染大概经历了哪些过程, 最后生成HTML文件,并且有flag让框架知道这是已经由服务端渲染完毕, store中的数据一般会挂在在window.__inialState__下... vue绑定事件的实现, 不太明白考官的意思, 简述了vue通过声明的方式来书写事件绑定代码, 实现订阅发布的模式, 对DOM原生事件做了一层封装 云云... 也不知道说的对不对
11. 简述公司node架构中容灾的实现 ?
    因为我提到了这个, 答的很模糊, 估计有不少漏洞... 实际上应该是cdn slb node三层容灾
12. 浏览器事件有哪些过程? 为什么一般在冒泡阶段, 而不是在捕获阶段注册监听? addEventListener 参数分别是什么 ?
    第一个很简单, 捕获,元素,冒泡 第二个当时没回答出来, 后来查到可能是IE8以下没有捕获阶段, 还有可能是冒泡比较符合一般控制事件影响的一般习惯
13. 面向对象如何实现? 需要复用的变量 怎么处理 ?
    ES5的构造函数+prototype ES6的class 复用的变量放在构造函数的原型上
14. 移动端300ms延时的原因? 如何处理?
    移动端双击的设置,导致会有300ms系统判断的延时. fastclick, 或者touchEnd来代替
15. 主流框架的数据单向/双向绑定实现原理 ?
    vue defineProperty(), react setState() DOMdiff, 订阅发布模式 展开来说一下就可以了
16. 简述转行经历, 如何学习 ?
    作者入坑之前,还做过两年建筑设计... 所以大概诉说了下辛酸史 (捂脸)
17. 你觉得自己在前端工作的最大的优点是什么 拿实际工作的内容举例?
    这里实际上很丢脸, 吹了一波, 结果被问细节的时候, 愣是想不起来实际工作例子... 结果面试官看我很尴尬 就换了个话题= . =

最后聊了一会儿,问了一下团队情况,换个人继续二面

---

技术二面

1. 和一面前3问基本一致,简述项目,React vue区别 virsualDOM实现
2. DIFF算法为什么是O(n)复杂度而不是O(n^3)
3. http code码? 200 302 304等等
4. 移动端rem布局如何实现? 简述原理?
   这个网上有很多,简单说就是rem可以通过控制html的字体大小来统一作为标杆,其他的rem宽度可以跟随调整, 只需要将html根字体和移动端宽度大小做关联计算就可以
5. JSbridge原理, js和native是如何通信的?
   问的比较深,我也是一知半解... 就说了一些schema和native方法注入webview来执行代码,ios使用iframe来通信
6. Rollup和webpack区别, treeshaking是什么? 为什么可以实现
7. TCP三次握手的过程, get post请求的区别 ?
8. 静态文件的浏览器缓存如何实现?
   其实还是考察http相关的缓存只是,答出来cache-control expires Etag 304 浏览器如何识别相同文件等等就可以了
9. 前端跨域方案
   JSONP CORS document.domain nginx/nodejs代理 等等
10. http 请求包含哪些字段 分别是什么意思
11. js 有哪些数据类型 如何判断? null 和 undefined区别 应用场景?
    基本类型和复杂类型, typeof instanceof Object.prototype.toString 第二个答出来, 平时工作中很少注意到
12. new String('a') 和 'a' 是一样的么?
    一个是字符串对象,一个是基本类型
13. 移动端如何实现下拉到底部 跟随移动 结束后回弹的动画?
    了解iScroll的话,应该不难
14. 移动端如何优化首页白屏时间过长 ?
    雅虎军规,还有一些其他的移动端优化,还有离线包或者serviceworker之类的,还趁机问了下团队是采用哪种方案,也是离线包
15. ES6 generator函数简述
16. 数组去重实现?
    网上很多, 说了new Set([...array]) 循环遍历indexOf 最快的对象键值对的方法
17. js浮点数运算不精确 如何解决?
    这个真不会, 回来看了下才知道
18. 工作中最得意和出色的点, 头疼的点, 问题如何解决的
19. 为何换工作?
    哈哈, 回答--- 大厂梦~
20. 聊了下阿里的压力,文化

---

技术三面

这一面据说是p8大佬,面的时候并不知道,聊的时候挺晚的了,没之前紧张,轻松了很多

1. 公司的前端工程化实践
2. 转行之后是如何自学前端的, 学习途径 有没有一些自己的代码
3. DOM基础知识,添加元素,删除元素等等...
4. DOM节点类型
   这就属于给自己挖坑, 提到了... 结果太久没看了,忘了
5. 正则表达式如何匹配一段url ?在正则表达式中有哪几种作用?
   正则平时写的比较多,同事经常会让我帮忙写正则, 这个倒是没啥问题
6. 移动端优化方式? 离线包是如何实现的?
7. 最后聊了一下项目,聊了一下目前公司

最后跟我说技术面试通过了(很爽快~), 后面会有HR来面我...

---

后面就是很紧张的通过了HR面试, 定级P6
目前还在最后的流程中, 还在等待offer, 祝我一切顺利吧! ^ - ^