【面试】-阿里前端社招面试

引言

金三银四招聘季，笔者也是去面试了一些公司，下面是记录最近面试阿里的一个部门，和你们分享一下。笔者17年毕业，目前工做经验算上实习的话差很少有2年半左右，面了一个3-5年经验的岗位，整体来讲确实大厂基本上不少都是问的基础题，因此你们若是想要找工做的话能够好好准备下基础知识。

一面

1. 前端监控作了哪些东西
2. 怎么样说服老板说这个项目会比开源的更好,作这个的目的，因为我作了个前端监控，因此问了这个问题
3. 前端录制视频如何录制，仍是前端监控的问题
4. 前端异常监控视频是在错误发生时记录仍是实时记录
5. 作过的工程化实践，如何理解前端工程化

前端工程化除了提高咱们的开发体验外，还要提高用户体验和产品性能，用“软件工程”的角度去回答问题

6. CSS盒模型

IE盒模型和标准盒模型

7. call和apply
8. 浏览器缓存

强缓存和协商缓存

强缓存：

• expries:返回服务器过时日期，这是一个绝对的日期
• Cache-Control:max-age=3600相对时间，3600秒后过时

两个都返回之后者为准,expries因为是拿本地时间和返回的服务器时间作比较，因此会存在偏差

协商缓存：

• Last-Modified If-Modified-Since 上一次服务器返回的时间和电脑当前的时间作对比
• Etag能够理解为一个key，value的hash值，由于有时候时间变了，可是资源自己没有发生变化，因此能够经过Etag来定位资源自己到底有没有发生变化

9. DOM3级模型

• DOM0 原生的onclick事件和js的onclick事件
• DOM2 增长了addEventListener，而后将事件模型修改成捕获阶段，目标阶段，冒泡阶段
• DOM3 在原来DOM2的事件基础上面增长了blur，focus和一些键盘事件

10. rem和em的区别
11. vue和react的区别
12. 本地存储的方式，如何清除localstorage

cookie和LocalStorage和SessionStorage

13. 数组求最大值的几种方式

//方式一（利用延展函数）
Math.max(null,...[1,2,4,32]);
//方式二（排序取第一个）
[1,2,3,5].sort(function(a,b){
    return b - a;
})[0];
复制代码

二面

1. react生命周期
2. redux和vuex区别
3. react的props和state区别

这个主要仍是props在组件内部不可变，只能经过父传子改变，state只能经过setState改变

4. event loop理解

这个的话要知道宏任务队列和微任务队列，宏任务队列在每次的事件循环中只执行一个，微任务队列在一次事件循环中会所有执行完毕，还有几个宏任务和微任务以下： 宏任务macro-task（task）包括：

• setTimeout/setInterval
• setImmediate
• I/O操做
• UI rendering

微任务micro-task（job）包括：

• process.nextTick
• Promise
• Object.observe（已废弃）
• MutationObserver(H5新特性)

5. 对react的理解，和vue对比

6. 设计一个spa要考虑哪些因素

这个也是一个开放题目，大体从如下几点回答

• 路由-懒加载
• 组件
• 页面性能和生命周期
• 用户体验-设计一个骨架屏

7. webpack的loader和plugin区别是什么，有对webpack作过打包上面的优化么

• loader是模块和资源的转换器，像css-loader，urlloader这些，主要仍是注重资源转换
• plugin主要是贯穿webpack各个生命周期的钩子，用来扩展webpack的功能，像htmlwebpackplugin或者热替换模块插件这些

8. 项目性能优化的地方

这个我提了一个之前项目里面作的对几千行表格滚动加载的优化，后面还问了关于总体项目优化的一些东西，主要仍是从CDN，资源合并压缩，升级成http2，非核心代码异步加载，利用浏览器缓存这些来回答

9. http状态码

这个当时问了4xx以上的几个状态码，比较简单

10. 除了Object.defineProperty,还有什么能实现数据劫持

能够经过Proxy ，vue3.0也是计划用这个来代替的，当时脑子一抽都忘记了，后来提醒了一下也想起来了

11. 如何设计一个秒杀系统

这个是一个开放题目，面试官指望前端后端都说说，前端的话主要仍是从定时器setInterval不许，须要不停的想服务器校准时间，还有一个是避免重复发请求，后端的话讲了一些redis缓存和异步队列，nginx负载均衡这些扯了一堆，网上也有一些答案，你们能够自行谷歌。

三面+HR面

1. 手写reduce或者filter的polyfill

//这里提供一个filter的写法
Array.prototype.filters = function filter(fun){
	var arr = this;
	var filterArr = [];
	for(var i = 0,len = arr.length;i < len; i ++){
		if(callback(i,arr[i],arr)){
			filterArr.push(arr[i]);
		}
	}
	return filterArr;
}

function callback(index,item,arr){
	return item > 5;
}



[1,2,3,4,78].filters(callback)
复制代码

2. 说一个你拿手的项目
3. 如何预防别人在你的网页中插小广告，这题我想应该是考的一道xss安全预防问题

• xss主要两种类型，存储型和反射型，预防的话主要是编码和过滤来处理
• 简单点的话能够直接缓存https，能够屏蔽大部分运营商的广告

4. 如何设计一个模块化打包器

这个的话须要去看一下require或者seajs这块的实现方式，大体上面是，写的还比较简单，要深刻了解的话能够去看一些网上的文章：

• 实现一个函数相似define能够将变量做用域限制在函数内部
• 实现一个函数相似require能够获取到define函数中相似module.export的导出值
• 加载过程当中若是当前内存中没有这个js，那么动态建立script请求，不然使用内存中的js，防止重复加载

5. 说一下http的一些状态码，说一下TCP的三次挥手和四次握手过程
6. 还考了一道对象引用值的问题

var a1,b2;
a1 = {c:1};
b2 = a1;
b2.c = 2;
alert(b2.c);
a1 = {c:3};
alert(b2.c);
a1.c = 4;
alert(b2.c);
复制代码

接下来就是HR面了，大体跟你聊聊这个部门的业务和我对于这个部门感兴趣的点，还有一些是我之前的工做经历