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

摘要：作者两年经验第一家任职的是个小公司第二家算是二线互联网公司各待了一年吧能有机会去阿里面试很惊喜先来和大家分享一下面试经历电话面试初探因为还在职的缘故电话面试从晚上点钟开始持续了半个小时左右一开始的时候特比紧张甚至声音略有些颤抖简单自我介绍做

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

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

简单自我介绍, 做过哪些项目, 使用哪些技术栈 ?
这个就没什么好说的,因人而异,不要吹自己并不熟悉的技术,免得被深入问的时候答不上来

如何看待前端框架选型 ?
我比较熟悉vue和react 就主要提到了这两款框架各自的优点和缺点以及性能对比, 以及上手难度, 社区生态, 团队成员组成, 招聘难度啊 blabla...

vue的如何实现双向绑定的 ?
Object.defineProperty() 这个方法来追踪依赖并来完成UI的更新

react virsualDOM 是什么? 如何实现? 说一下diff算法 ?
vm网上资料很多, 实现其实也只是解析JSX -> AST语法树, diff算法主要是说了react如何将O(n3)的算法降低到O(n)级别的

工作中最出色的点, 和你最头疼的问题 如何解决的 ?
还好提前准备到了, 现场想肯定就黄了... (捂脸)

平时如何学习, 最近接触了解了哪些新的知识 ?
什么github 各种论坛 书籍... 想到的都说了就成

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

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

简单自我介绍, 介绍一下你的项目, 技术栈 ?

react和vue的比较 ?

React Diff 算法 ?
和电话面试前三题基本一样, 从你的回答中面试官来找问题, 可能我回答相似度高吧, 问题都相似

观察者模式实现 ?
设计模式其实看的不多, 只是说了一下大体的思路

http报文头部有哪些字段? 有什么意义 ?
这个就很多了, cookie cache-control user-agent expires host refer 等等 挑你会的常用的说, 面试官也不会要求你都说全的

移动端高清方案如何解决 ?
这里被卡住了, 没有理解到是rem布局+几倍图+1px问题, 只提到了flexible.js,并且说了一下原理,现在回头看,说的还是有问题... 还是有点久了,忘记了

webpack的原理, loader 和 plugin 是干什么的? 有自己手写过么 ?
大致说了一下,webpack解析模块, loader和plugin的作用, 没有手写过, 看过一部分代码...

简述从网页输入url到网页展示的过程发生了哪些事情 ?
说的还是比较粗, 不过重点DNS解析,三次握手,数据请求,浏览器如何解析DOM树,css树应该都提到了, 还提到了浏览器的多进程多线程架构,js线程和渲染线程互斥

细节问题: 我的项目中是一套代码实现了PC h5兼容 ,组件耦合严重, 问有没有什么好的解决方案 ?
只想到了把数据层抽象出来,但是其他的不知道该如何解决... 现在也不知道- . -

SSR 和 客户端渲染有什么区别 , vue是如何实现绑定事件的 ?
简述服务端渲染大概经历了哪些过程, 最后生成HTML文件,并且有flag让框架知道这是已经由服务端渲染完毕, store中的数据一般会挂在在window.__inialState__下... vue绑定事件的实现, 不太明白考官的意思, 简述了vue通过声明的方式来书写事件绑定代码, 实现订阅发布的模式, 对DOM原生事件做了一层封装 云云... 也不知道说的对不对

简述公司node架构中容灾的实现 ?
因为我提到了这个, 答的很模糊, 估计有不少漏洞... 实际上应该是cdn slb node三层容灾

浏览器事件有哪些过程? 为什么一般在冒泡阶段, 而不是在捕获阶段注册监听? addEventListener 参数分别是什么 ?
第一个很简单, 捕获,元素,冒泡 第二个当时没回答出来, 后来查到可能是IE8以下没有捕获阶段, 还有可能是冒泡比较符合一般控制事件影响的一般习惯

面向对象如何实现? 需要复用的变量 怎么处理 ?
ES5的构造函数+prototype ES6的class 复用的变量放在构造函数的原型上

移动端300ms延时的原因? 如何处理?
移动端双击的设置,导致会有300ms系统判断的延时. fastclick, 或者touchEnd来代替

主流框架的数据单向/双向绑定实现原理 ?
vue defineProperty(), react setState() DOMdiff, 订阅发布模式 展开来说一下就可以了

简述转行经历, 如何学习 ?
作者入坑之前,还做过两年建筑设计... 所以大概诉说了下辛酸史 (捂脸)

你觉得自己在前端工作的最大的优点是什么 拿实际工作的内容举例?
这里实际上很丢脸, 吹了一波, 结果被问细节的时候, 愣是想不起来实际工作例子... 结果面试官看我很尴尬 就换了个话题= . =

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

和一面前3问基本一致,简述项目,React vue区别 virsualDOM实现

DIFF算法为什么是O(n)复杂度而不是O(n^3)

http code码? 200 302 304等等

移动端rem布局如何实现? 简述原理?
这个网上有很多,简单说就是rem可以通过控制html的字体大小来统一作为标杆,其他的rem宽度可以跟随调整, 只需要将html根字体和移动端宽度大小做关联计算就可以

JSbridge原理, js和native是如何通信的?
问的比较深,我也是一知半解... 就说了一些schema和native方法注入webview来执行代码,ios使用iframe来通信

Rollup和webpack区别, treeshaking是什么? 为什么可以实现

TCP三次握手的过程, get post请求的区别 ?

静态文件的浏览器缓存如何实现?
其实还是考察http相关的缓存只是,答出来cache-control expires Etag 304 浏览器如何识别相同文件等等就可以了

前端跨域方案
JSONP CORS document.domain nginx/nodejs代理 等等

http 请求包含哪些字段 分别是什么意思

js 有哪些数据类型 如何判断? null 和 undefined区别 应用场景?
基本类型和复杂类型, typeof instanceof Object.prototype.toString 第二个答出来, 平时工作中很少注意到

new String("a") 和 "a" 是一样的么?
一个是字符串对象,一个是基本类型

移动端如何实现下拉到底部 跟随移动 结束后回弹的动画?
了解iScroll的话,应该不难

移动端如何优化首页白屏时间过长 ?
雅虎军规,还有一些其他的移动端优化,还有离线包或者serviceworker之类的,还趁机问了下团队是采用哪种方案,也是离线包

ES6 generator函数简述

数组去重实现?
网上很多, 说了new Set([...array]) 循环遍历indexOf 最快的对象键值对的方法

js浮点数运算不精确 如何解决?
这个真不会, 回来看了下才知道

工作中最得意和出色的点, 头疼的点, 问题如何解决的

为何换工作?
哈哈, 回答--- 大厂梦~

聊了下阿里的压力,文化

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

公司的前端工程化实践

转行之后是如何自学前端的, 学习途径 有没有一些自己的代码

DOM基础知识,添加元素,删除元素等等...

DOM节点类型
这就属于给自己挖坑, 提到了... 结果太久没看了,忘了

正则表达式如何匹配一段url ?在正则表达式中有哪几种作用?
正则平时写的比较多,同事经常会让我帮忙写正则, 这个倒是没啥问题

移动端优化方式? 离线包是如何实现的?

最后聊了一下项目,聊了一下目前公司

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

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