我在去年春招拿到了阿里的实习offer，经历了三个月的实习之后顺利秋招转正，现在是阿里巴巴新零售数字供应链的一员啦。

现在把阿里的面经补上，希望能给今年投阿里的师弟师妹们一点小小的帮助~

祝看到这篇帖子的同学春招都能拿到满意的offeer

本篇会从下面三个层面去介绍，依次是

• 面试前准备
• 面试内容（面经）
• 阿里实习
• 面试题资料分享

一 .面试前准备

其实走到现在来了，大部分有意向投前端岗的同学也都有各自的准备了。我这里就简单说下我自己的学习路径。前端的基础知识方面，一方面靠平时的积累，另一方面靠春招前的看面经查漏补缺。平时积累的话，我个人会看一些经典的前端书籍并且进行梳理和总结，我看过的书有

• 红宝书

• 《高性能Javascript》

• 《你不知道的Javascript（上中）》下我一直没看，好像是讲ES6的，惭愧

• 蝴蝶书

• 《图解HTTP》

• ES6入门教程 https://es6.ruanyifeng.com/

• 《大话数据结构》

平时的积累我是从春招前一年就开始准备了，有计划地看书和进行总结，看掘金，看微信公众号，看InfoQ。

看的东西很杂不要紧，重要的是形成自己的知识体系，这样在看任何技术文章之后，都能清晰地知道这项技术应该在知识图谱里属于哪一块，我是否已经掌握这一块知识，如果没有的话我是否有必要现在就去掌握它。

除此之外，我刷了大概3个月的算法和数据结构的题目并且在Github上写了几个项目来专门总结算法类题目（虽然在面试阿里的时候没有用上）

项目部分其实是我当时的薄弱部分，本科毕业选择的导师一个项目也没有，全部都是研究性的课题（虽然有了项目也不一定和前端相关），自己也没有参加各种比赛什么的，只是在自学的时候，在Github上找了一些技术栈稍微复杂些的来练手。不过我自己在练手工程化的时候写了好几个开源小工具，事实证明这些开源的作品在面试的时候是非常加分的。

面试还有一个很重要的部分，那就是考察候选人的软性素质，比如学习能力和学习能动力。这些东西一般是在交叉面或者hr面时进行考察的，比如阿里的hr可能会问你“你觉得你做过最失败的一件事是什么”，她有可能就是想看你遇到了困难是怎么想的以及怎么面对的。诸如此类的问题也难以准备，因为它由一个人的性格决定，也很难在hr面前造假，所以我能准备的只有尽可能在技术层面表现出我好学，自驱动的特质。

二.面试内容

一面

我当时一面的时候精神状态不是很好，虽然是下午但是特别困，经常答题的时候注意力不集中（现在看来真是一次危险的经历）。但是面试官超级nice，我很多次没有听清楚，他都很耐心地和我重新说（比如他当时问我了不了解async和await，我听了三遍才明白他说的这两个单词是这个，可能是因为发音问题哈哈）

• 你这个专业和计算机专业关联大吗，我就说我们这个专业在本科会学习一些计算机的课程的，当然同学的就业可能跟计算机关系不大，我自己对前端非常感兴趣所以就一直学习
• 看了下我的博客，问了里面的一个动画库
• 问了下实习经历
• 自我介绍一个比较难的项目
• 之前做过的项目里有没有用到什么比较难的算法
• Flex介绍一下
• CSS选择器
• 选择器的效率问题
• jQuery的选择器怎么实现的
• 说一下常见的伪类和伪元素
• 移动端适配
• Vue中的响应式怎么实现
• Vue中对数组也是这么做的吗
• Vue模板编译说一下流程
• 介绍一下vdom
• Vue和React的vdom算法对比
• Vue中组件通信的方法
• 持续集成的问题（因为我的项目里有）
• VueRouter两种模式的原理
• 阐述下宏任务和微任务
• 让我介绍下我对前端安全问题的理解（XSS和CSRF的出现和应对策略）
• MySQL的基本问题
• 队列有什么特点和应用场景
• 问了几种排序算法
• 提问环节（我问了一下技术栈只会用Vue有关系没，面试官说不要紧，这些都是相通的）

二面

• 介绍下自己的学习习惯
• 问了下我的一个WebGL的项目
• 让我介绍下用Vue写过什么项目
• 逮住另外一个项目一直深挖…
• Webpack的loader和plugins原理
• 三个手撕代码题，分别是考察原型链，一个是考察this，一个是判断两个矩形相交的算法题
• 让我介绍下前端安全
• 有没有了解过学校里其他前端相关的社团
• 自己评价下优点和缺点

交叉面

• 自我介绍
• 介绍一下自己认为最难的项目以及我认为的难点
• 你接触过Vue以外的框架吗，了解程度怎么样
• 详细介绍下Vue里的响应式机制
• 讲下Vue里的diff原理
• 提问环节

hr面

• 自我介绍（做了哪些事和项目，学习路径和规划）
• 总结下自己目前的短板
• 为什么选择前端
• 自己经历过最失败的一件事
• 自己觉得最成功的的一件事
• 一个词总结一下自己
• 平时有什么业余爱好

三.阿里实习

当时春招也拿了几个offer，最后考虑到阿里的含金量和转正率还是选择了阿里。

这里补充一下，我个人觉得实习还是挺有必要的，一方面在秋招中一份优质的实习经历会非常加分，同时实习可以让你提前体验互联网生活，你可以根据情况来判断自己是否要决定走互联网这条路，我们组去年就有人来了一周就辞职回去读博了（害怕.jpg）

阿里的实习待遇还是挺好的，一天250元+2000的房补，再加上周末你可以选择加班，周末加班的话食堂是全免费的，而且也可以拿到补助（正式员工加班是没有补助的hhh）

来了部门之后的故事用这一篇文章也写不完，简单总结下就是，大家都很nice，但是互联网公司的压力还是摆在那里的，且身边的小伙伴们都很优秀而且努力~

四.最后

为了准备这次面试刷了很多面试题，并且做了一个整理，分了HTML、css、JavaScript、React、Vue、浏览器、服务端与网络、算法等等…下面分享给大家

HTML

• 浏览器页面有哪三层构成，分别是什么，作用是什么?
• HTML5的优点与缺点？
• Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
• HTML5有哪些新特性、移除了哪些元素？
• 你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
• 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
• 说说你对HTML5认识?（是什么,为什么）
• 对WEB标准以及W3C的理解与认识?
• HTML全局属性(global attribute)有哪些?
• 说说超链接target属性的取值和作用？
• iframe有那些缺点？
• Label的作用是什么，是怎么用的？
• 如何实现浏览器内多个标签页之间的通信?
• 谈谈你对canvas的理解？
• …

CSS

• 解释一下CSS的盒子模型？
• 请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
• 请你说说CSS有什么特殊性?（优先级、计算特殊值）
• 常见浏览器兼容性问题与解决方案？
• 列出display的值并说明他们的作用？
• 如何居中div, 如何居中一个浮动元素?
• 请列举几种清除浮动的方法(至少两种)?
• block，inline和inlinke-block细节对比？
• 什么叫优雅降级和渐进增强？
• 说说浮动元素会引起的问题和你的解决办法
• 你有哪些性能优化的方法？
• 为什么要初始化CSS样式？
• CSS样式表根据所在网页的位置，可分为哪几种样式表？
• 请你说说em与rem的区别？
• …

JavaScript

• js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
• js拖拽功能的实现
• 异步加载js的方法
• js的防抖与节流
• 说一下闭包
• 说说你对作用域链的理解
• JavaScript原型，原型链 ? 有什么特点？
• 请解释什么是事件委托/事件代理
• Javascript如何实现继承？
• 函数执行改变this
• babel编译原理
• 函数柯里化
• 说一下类的创建和继承
• 说说前端中的事件流
• 如何让事件先冒泡后捕获
• 说一下图片的懒加载和预加载
• js的new操作符做了哪些事情
• 改变函数内部this指针的指向函数（bind，apply，call的区别）
• Ajax解决浏览器缓存问题
• …

Vue

• Vue中 key 值的作用
• Vue 组件中 data 为什么必须是函数？
• vuex的State特性是？
• 介绍一下Vue的响应式系统
• computed与watch的区别
• 介绍一下Vue的生命周期
• 为什么组件的data必须是一个函数
• 组件之间是怎么通信的
• Vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
• Vue如何实现按需加载配合webpack设置
• 简单描述每个周期具体适合哪些场景
• scss是什么？在Vue.cli中的安装使用步骤是？有哪几大特性？
• 聊聊你对Vue.js的template编译的理解？
• Vue 路由跳转的几种方式
• Vue如何实现按需加载配合webpack设置?
• Vue的路由实现：hash模式和history模式
• Vue与Angular以及React的区别？
• Vue路由的钩子函数
• 什么是Vue的计算属性？
• …

React

• 介绍一下react
• React单项数据流
• react生命周期函数和react组件的生命周期
• react和Vue的原理，区别，亮点，作用
• reactJs的组件交流
• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
• 项目里用到了react，为什么要选择react，react有哪些好处
• 怎么获取真正的dom
• 选择react的原因
• react的生命周期函数
• setState之后的流程
• react高阶组件知道吗？
• React的jsx，函数式编程
• react的组件是通过什么去判断是否刷新的
• 如何配置React-Router
• 路由的动态加载模块
• Redux中间件是什么东西，接受几个参数
• redux请求中间件如何处理并发

浏览器

• 跨标签页通讯
• 浏览器架构
• 浏览器下事件循环(Event Loop)
• 从输入 url 到展示的过程
• 重绘与回流
• 存储
• Web Worker
• V8垃圾回收机制
• 内存泄露
• reflow(回流)和repaint(重绘)优化
• 如何减少重绘和回流?
• 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
• localStorage 与 sessionStorage 与cookie的区别总结
• http多路复用
• cookie可设置哪些属性？
• 正向代理和反向代理
• …

服务端与网络

• HTTPS和HTTP的区别
• HTTP版本
• 从输入URL到页面呈现发生了什么？
• HTTP缓存
• 缓存位置
• 强缓存
• 协商缓存
• 缓存的资源在那里
• 用户行为对浏览器缓存的影响
• 缓存的优点
• 不同刷新的请求执行过程
• 为什么会有跨域问题
• 如何解决跨域
• 访问控制场景（简单请求与非简单请求）
• withCredentials 属性
• 服务器如何设置CORS
• URL类中的常用方法

算法与数据结构

• 二叉树层序遍历
• B树的特性，B树和B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 说一下冒泡快排的原理
• Heap排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前10个数

由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

标签：Vue,浏览器,二本,小渣,手册,react,阿里,缓存,前端
来源： https://blog.csdn.net/hugo233/article/details/114337384