引言
金三银四招聘季，笔者也是去面试了一些公司，下面是记录最近面试阿里的一个部门，和大家分享一下。笔者17年毕业，目前工作经验算上实习的话差不多有2年半左右，面了一个3-5年经验的岗位，总体来说确实大厂基本上很多都是问的基础题，所以大家如果想要找工作的话可以好好准备下基础知识。
一面
- 前端监控做了哪些东西
- 怎么样说服老板说这个项目会比开源的更好,做这个的目的，由于我做了个前端监控，所以问了这个问题
- 前端录制视频如何录制，还是前端监控的问题
- 前端异常监控视频是在错误发生时记录还是实时记录
- 做过的工程化实践，如何理解前端工程化
前端工程化除了提升我们的开发体验外，还要提升用户体验和产品性能，用“软件工程”的角度去回答问题
- CSS盒模型
IE盒模型和标准盒模型
- call和apply
- 浏览器缓存
强缓存和协商缓存
强缓存：
- expries:返回服务器过期日期，这是一个绝对的日期
- Cache-Control:max-age=3600相对时间，3600秒后过期
两个都返回以后者为准,expries由于是拿本地时间和返回的服务器时间做比较，所以会存在误差
协商缓存：
- Last-Modified If-Modified-Since 上一次服务器返回的时间和电脑当前的时间做对比
- Etag可以理解为一个key，value的hash值，因为有时候时间变了，但是资源本身没有发生变化，所以可以通过Etag来定位资源本身到底有没有发生变化
- DOM3级模型
- DOM0 原生的onclick事件和js的onclick事件
- DOM2 增加了addEventListener，然后将事件模型修改为捕获阶段，目标阶段，冒泡阶段
- DOM3 在原来DOM2的事件基础上面增加了blur，focus和一些键盘事件
- rem和em的区别
- vue和react的区别
- 本地存储的方式，如何清除localstorage
cookie和LocalStorage和SessionStorage
- 数组求最大值的几种方式
//方式一（利用延展函数）Math.max(null,...[1,2,4,32]);//方式二（排序取第一个）[1,2,3,5].sort(function(a,b){ return b - a;})[0];复制代码 二面
- react生命周期
- redux和vuex区别
- react的props和state区别
这个主要还是props在组件内部不可变，只能通过父传子改变，state只能通过setState改变
- event loop理解
这个的话要知道宏任务队列和微任务队列，宏任务队列在每次的事件循环中只执行一个，微任务队列在一次事件循环中会全部执行完毕，还有几个宏任务和微任务如下： 宏任务macro-task（task）包括：
- setTimeout/setInterval
- setImmediate
- I/O操作
- UI rendering
微任务micro-task（job）包括：
- process.nextTick
- Promise
- Object.observe（已废弃）
- MutationObserver(H5新特性)
-
对react的理解，和vue对比
-
设计一个spa要考虑哪些因素
这个也是一个开放题目，大致从以下几点回答
- 路由-懒加载
- 组件
- 页面性能和生命周期
- 用户体验-设计一个骨架屏
- webpack的loader和plugin区别是什么，有对webpack做过打包上面的优化么
- loader是模块和资源的转换器，像css-loader，urlloader这些，主要还是注重资源转换
- plugin主要是贯穿webpack各个生命周期的钩子，用来扩展webpack的功能，像htmlwebpackplugin或者热替换模块插件这些
- 项目性能优化的地方
这个我提了一个以前项目里面做的对几千行表格滚动加载的优化，后面还问了关于整体项目优化的一些东西，主要还是从CDN，资源合并压缩，升级成http2，非核心代码异步加载，利用浏览器缓存这些来回答
- http状态码
这个当时问了4xx以上的几个状态码，比较简单
- 除了Object.defineProperty,还有什么能实现数据劫持
可以通过Proxy ，vue3.0也是计划用这个来代替的，当时脑子一抽都忘记了，后来提醒了一下也想起来了
- 如何设计一个秒杀系统
这个是一个开放题目，面试官期望前端后端都说说，前端的话主要还是从定时器setInterval不准，需要不停的想服务器校准时间，还有一个是避免重复发请求，后端的话讲了一些redis缓存和异步队列，nginx负载均衡这些扯了一堆，网上也有一些答案，大家可以自行谷歌。
三面+HR面
- 手写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)复制代码 - 说一个你拿手的项目
- 如何预防别人在你的网页中插小广告，这题我想应该是考的一道xss安全预防问题
- xss主要两种类型，存储型和反射型，预防的话主要是编码和过滤来处理
- 简单点的话可以直接缓存https，可以屏蔽大部分运营商的广告
- 如何设计一个模块化打包器
这个的话需要去看一下require或者seajs这块的实现方式，大致上面是，写的还比较简单，要深入了解的话可以去看一些网上的文章：
- 实现一个函数类似define可以将变量作用域限制在函数内部
- 实现一个函数类似require可以获取到define函数中类似module.export的导出值
- 加载过程中如果当前内存中没有这个js，那么动态创建script请求，否则使用内存中的js，防止重复加载
- 说一下http的一些状态码，说一下TCP的三次挥手和四次握手过程
- 还考了一道对象引用值的问题
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面了，大致跟你聊聊这个部门的业务和我对于这个部门感兴趣的点，还有一些是我以前的工作经历