看完这份阿里巴巴内部流出的《前端面试手册》，二本小渣渣顺利进入阿里实习啦

一时失言乱红尘 2022-11-05 03:12 270阅读 0赞

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

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

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

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

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

# 一 .面试前准备 #

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

*  红宝书
 *  《高性能Javascript》
 *  《你不知道的Javascript（上中）》下我一直没看，好像是讲ES6的，惭愧
 *  蝴蝶书
 *  《图解HTTP》
 *  ES6入门教程 [https://es6.ruanyifeng.com/][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的理解？
 *  …

![c7c1f19592b94db3b38479b49e74936b.png][]

## CSS ##

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

![095da229ed20be484cb335334ed1797f.png][]

## JavaScript ##

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

![4a5419a1c90ddbb21a2fdcf130577364.png][]

## 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的计算属性？
 *  …

![0432b8e539325b94948089383d0bfa8c.png][]

## 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请求中间件如何处理并发

![9749ea39072fc4b7b27af6f3a4db5ab1.png][]

## 浏览器 ##

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

![ea5b7660c67efee09904a7b17a48fc49.png][]

## 服务端与网络 ##

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

![fc61f4efc44449b406d8a56d5f103d67.png][]

## 算法与数据结构 ##

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

![09a5a6e1addc121711d53e3c113caeda.png][]

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

[https_es6.ruanyifeng.com]: https://es6.ruanyifeng.com/
[c7c1f19592b94db3b38479b49e74936b.png]: /images/20221023/c3f8a0a09bda4bc7978ad5d481378e45.png
[095da229ed20be484cb335334ed1797f.png]: /images/20221023/3f9dcfd49427494a9e5621d0e9fe073a.png
[4a5419a1c90ddbb21a2fdcf130577364.png]: /images/20221023/8b8aec4cde23455e9be2b5536706c2f9.png
[0432b8e539325b94948089383d0bfa8c.png]: /images/20221023/beb3839bf7aa4271a90143cce97f4d27.png
[9749ea39072fc4b7b27af6f3a4db5ab1.png]: /images/20221023/b3388d00d7e8480dab92e180ba011410.png
[ea5b7660c67efee09904a7b17a48fc49.png]: /images/20221023/1f400792480949cfb1d61ffdb56db7cb.png
[fc61f4efc44449b406d8a56d5f103d67.png]: /images/20221023/ec3dee9461584ab1bf1441aea8c9d099.png
[09a5a6e1addc121711d53e3c113caeda.png]: /images/20221023/4ff7febec6ce48fb9ca332c7faa74ed4.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=SBb7oFqq