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

引言

金三银四招聘季&＃xff0c;笔者也是去面试了一些公司&＃xff0c;下面是记录最近面试阿里的一个部门&＃xff0c;和大家分享一下。笔者17年毕业&＃xff0c;目前工作经验算上实习的话差不多有2年半左右&＃xff0c;面了一个3-5年经验的岗位&＃xff0c;总体来说确实大厂基本上很多都是问的基础题&＃xff0c;所以大家如果想要找工作的话可以好好准备下基础知识。

一面

前端监控做了哪些东西
怎么样说服老板说这个项目会比开源的更好,做这个的目的&＃xff0c;由于我做了个前端监控&＃xff0c;所以问了这个问题
前端录制视频如何录制&＃xff0c;还是前端监控的问题
前端异常监控视频是在错误发生时记录还是实时记录
做过的工程化实践&＃xff0c;如何理解前端工程化

前端工程化除了提升我们的开发体验外&＃xff0c;还要提升用户体验和产品性能&＃xff0c;用“软件工程”的角度去回答问题

CSS盒模型

IE盒模型和标准盒模型

call和apply
浏览器缓存

强缓存和协商缓存

强缓存&＃xff1a;

expries:返回服务器过期日期&＃xff0c;这是一个绝对的日期
Cache-Control:max-age&＃61;3600相对时间&＃xff0c;3600秒后过期

两个都返回以后者为准,expries由于是拿本地时间和返回的服务器时间做比较&＃xff0c;所以会存在误差

协商缓存&＃xff1a;

Last-Modified If-Modified-Since 上一次服务器返回的时间和电脑当前的时间做对比
Etag可以理解为一个key&＃xff0c;value的hash值&＃xff0c;因为有时候时间变了&＃xff0c;但是资源本身没有发生变化&＃xff0c;所以可以通过Etag来定位资源本身到底有没有发生变化

DOM3级模型

DOM0 原生的onclick事件和js的onclick事件
DOM2 增加了addEventListener&＃xff0c;然后将事件模型修改为捕获阶段&＃xff0c;目标阶段&＃xff0c;冒泡阶段
DOM3 在原来DOM2的事件基础上面增加了blur&＃xff0c;focus和一些键盘事件

rem和em的区别
vue和react的区别
本地存储的方式&＃xff0c;如何清除localstorage

COOKIE和LocalStorage和SessionStorage

数组求最大值的几种方式

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

二面

react生命周期
redux和vuex区别
react的props和state区别

这个主要还是props在组件内部不可变&＃xff0c;只能通过父传子改变&＃xff0c;state只能通过setState改变

event loop理解

这个的话要知道宏任务队列和微任务队列&＃xff0c;宏任务队列在每次的事件循环中只执行一个&＃xff0c;微任务队列在一次事件循环中会全部执行完毕&＃xff0c;还有几个宏任务和微任务如下&＃xff1a; 宏任务macro-task&＃xff08;task&＃xff09;包括&＃xff1a;

setTimeout/setInterval
setImmediate
I/O操作
UI rendering

微任务micro-task&＃xff08;job&＃xff09;包括&＃xff1a;

process.nextTick
Promise
Object.observe&＃xff08;已废弃&＃xff09;
MutationObserver(H5新特性)

对react的理解&＃xff0c;和vue对比
设计一个spa要考虑哪些因素

这个也是一个开放题目&＃xff0c;大致从以下几点回答

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

webpack的loader和plugin区别是什么&＃xff0c;有对webpack做过打包上面的优化么

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

项目性能优化的地方

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

http状态码

这个当时问了4xx以上的几个状态码&＃xff0c;比较简单

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

可以通过Proxy &＃xff0c;vue3.0也是计划用这个来代替的&＃xff0c;当时脑子一抽都忘记了&＃xff0c;后来提醒了一下也想起来了

如何设计一个秒杀系统

这个是一个开放题目&＃xff0c;面试官期望前端后端都说说&＃xff0c;前端的话主要还是从定时器setInterval不准&＃xff0c;需要不停的想服务器校准时间&＃xff0c;还有一个是避免重复发请求&＃xff0c;后端的话讲了一些redis缓存和异步队列&＃xff0c;nginx负载均衡这些扯了一堆&＃xff0c;网上也有一些答案&＃xff0c;大家可以自行谷歌。

三面&＃43;HR面

手写reduce或者filter的polyfill

//这里提供一个filter的写法 Array.prototype.filters &＃61; function filter(fun){var arr &＃61; this;var filterArr &＃61; [];for(var i &＃61; 0,len &＃61; arr.length;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)