面试分享:专科半年经验面试阿里前端P6+总结(附面试真题及答案)

前言

某小哥的面试经历

成都青城山下某大学毕业,专科,软件测试 专业毕业

22岁,15年出来实习,工作经验接近三年,之前主要做后端写PHP,自己喜欢瞎折腾,从去年六月份开始研究前端,算下来前端经验半年多

年底由于种种原因想换一份工作,但由于太忙,没认真搞简历,也没怎么复习基础,导致很多本来会的都没敢往简历上写。于是写了一个简版的简历挂在Boss直聘上,准备年过完再认真筹备这件事情。

令我意外的是,一周竟收到八条阿里的面试邀请,看了网上前辈的一些心得:阿里三个月内只能应聘一次,于是选了两个心仪的部门投了简历,其中一个内推完没下文,多半是学历没过

以下是阿里面试过程

第一轮 电话面试

1、自我介绍

balabala....,好久没面试过,自我介绍居然显得很紧张,说了一些简历上没有的东西,比如之前写PHP、用Swoole做智能硬件通讯啊之类,以及为什么写前端啊,balabala...

2、会ES6吗,什么是解构赋值? 直接举了个例子

const { a, b, c } = { a: 'aa', b: 'bb', c: 'cc' }

3、说下React的生命周期

实例化

存在期

销毁时

componentWillUnmount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

4、React方法中,调用事件处理方法(里面要用到this)怎么调用

this.foo.bind(this)

5、接问题4,为什么需要bind(this)

作用域的问题,foo() {} 与 const foo = () => {}里面的this作用域不一样,foo() {}里面使用外部成员,需要bind(this),直接使用的this作用域仅在该方法内部

6、接问题4,能不能不使用bind(this)

可以使用箭头函数

可以使用lodash-decorators里面的Bind装饰器

7、装饰器的原理

语法糖,实则调用Object.defineProperty,可以添加、修改对象属性

8、自己实现一个通用方法,做到不需要使用bind与装饰器达到问题4的目的

柯里化 + apply,详细过程不赘述...

9、闭包里面的this作用域

内部函数的this指向外部包裹它的作用域

10、React render做了什么

主要分首次渲染与更新来说,说的比较多,不赘述,网上react源码分析一大堆...这期间顺带提到了利用redux-saga在shouldComponentUpdate时所做优化,以及自己的开源项目

11、说说xss与csrf,怎么防止

xss:跨站脚本攻击,如果不过滤执行了js代码,可能导致cookie泄露等。防止:过滤

csrf:跨站请求伪造,挟制用户在当前已登录的Web应用程序上执行非本意的操作。防止:设置token、写操作用post、JSON API禁用CORS、禁用跨域请求、检查referrer

12、Ajax的原理,你平常怎么发送网络请求的

通过XMLHttpRequest/ActiveXObject新建Ajax请求

通过onreadystatechange注册回调函数

使用open、setRequestHeader、send结合发送请求

平常发送网络请求:用next做同构应用时,使用isomorphic-fetch发送请求,如果只是客户端发送请求时,使用axios

13、有三个元素,第一个与第三个宽度都为100px,中间元素占用剩余空间,怎么做到中间元素随着浏览器宽度的变化而变化

{`

.main {

width: 100vw;

height: 100vh;

display: flex;

justify-content: space-around;

}

.div-1,.div-3 {

min-width: 100px;

height: 100vh;

}

.div-2 {

width: 100%;

height: 100vh;

}

`}

14、讲讲box-sizing

标准模式:width与height指的是内容区域的宽高,增加padding、border、margin会影响总体尺寸

怪异模式:width与height指内容区+padding+border,增加padding、border不会影响总体尺寸

15、做项目有没有遇到什么坑

最近做的这些项目项目也没有遇到什么大坑,印象很深的是之前实习搭建EKL中央日志服务器的时候,被一个时间问题坑了一天,EKL收集的日志时间与服务器的时间(时区)不一致,导致收集不到日志

16、你觉得搭建EKL有那些难点

相关服务器搭建倒是没什么难点,我觉得使用EKL最麻烦的是写grok match正则,匹配不同的日志,需要不同的正则,不过写到后面也习惯了,还OK

17、讲讲印象比较深的后端项目

之前实习时,做智能硬件项目,是一个宠物智能项圈,能记录宠物的运动数据,硬件每隔一段时间会发送大量的陀螺仪与加速计数据到服务端,通过swoole建立tcp,接受二进制数据,然后将接受到的数据通过map reduce处理...

18、停一下,你讲到处理大数据用map reduce,那为什么不用redis之类的

我个人觉得应该是当时团队比较小,需要一个快速且简单的解决方案,所以map reduce正是我们所需要的,redis我也知道,可以使用zset,求和很方便

19、说说mysql的事务

BEGIN、事务回滚ROLLBACK、事务提交COMMIT

20、说说你最满意的业务项目

说了一个next.js的触屏版同构项目,项目中使用到了prefech预先加载,以及next的动态加载,体验相当的快,用nprogress展示滚动条,在next.js还没有发布5.0版本/解决style-jsx中使用less、sass问题的时候,自己用postcss解决了,整个项目使用flexible + rem做响应式,自己改写了video-react组件,兼容触屏版,还有一些自认为不错的业务思想不赘述...

21、说说rem与em的区别

rem是根据根的font-size变化,em是根据父级的font-size变化

一面总结

一面面试的时候时不时顺带表现一下自己,根据面试官的问题回答时顺带提了一下看过的开源项目,比如react(redner过程)、next(postcss解决style-jsx编写less、isomorphic-fetch的使用等)、ant pro(lodash-decorators的使用)等

你可能感兴趣的:(面试分享:专科半年经验面试阿里前端P6+总结(附面试真题及答案))