在阿里我是如何当面试官（持续更新），2024年最新蚂蚁金服测试开发面试经验-CSDN博客

本文链接：https://blog.csdn.net/2401_84006953/article/details/137855184

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注Android）

正文

一轮技术面
二轮技术面
三轮技术面
一轮 HR 面
二轮 HR 面

如果你运气够好，可能只需要 4 面左右（没有三轮技术面、二轮 HR 面）。如果你运气不好，那么可能存在 5 ~ 6 面的情况。

友情提示：咨询了一些朋友，一般的面试（小米、滴滴、新浪以及腾讯等）可能都需要经历 4 面以上，当然也有朋友经历了网易的 3 面（二轮技术面 + 一轮 HR 面）。如果有知道其他公司的招聘情况，也可以在评论中告知大家，以便更好的应对面试。

内推数据

入职半年以来断断续续收到掘友们的内推简历。这里将内推的数据整理了一下，供大家有个体感：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

需要注意不是收到内推简历就会立即投递，会先有一个纯粹的简历筛选过程，因此上传简历和简历评估会有数量的差别。除此之外，当前还没有遇到被 HR 拒绝的情况。当然从内推数据可以看出，其中关键性的面试是简历评估和一轮技术面（通常对于应聘者而言是一面和二面）。

友情提示：上传简历会被录入阿里的人才库，如果简历不在面试流程中（或者简历在某部门面试后被释放），那么其他感兴趣的部门会发起新的招聘邀约。

面试数据

由于进入公司不久，一般我都是作为简历评估的面试官，少数时候会作为一轮技术面的面试官，这里将我作为面试官的数据整理如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

感觉和内推数据中的简历评估通过率相比，我在简历评估的时候会更加谨慎…

面试注意点

在面试的过程中，我印象最深的几点感受一定要告知大家：

1、回答问题不要过于着急，一定要耐心等待面试官把问题说完
2、回答问题要有逻辑、干练简洁
3、如果面试官打断你说话，此时一定要谨慎回答，因为很有可能你回答过于繁琐且他对你当下的回答不满意
4、一个问题不要纠结很久，尤其是让面试官感受到你在敲键盘…
5、不会的面试题必须干脆利落的回答不会
6、面试的时间最好控制在 30 ~ 40 分钟左右，这样互相之间的体验不会很差
7、面试是一个挖掘面试者能力和潜力的过程
8、面试官不是全能的，面试一定是一个互相学习的过程
9、一定要提前准备好自己想要问的问题，最致命的是别人把你安排的明明白白结果你对别人一无所知…

关于第 2 点还是要说明一下，很多面试者回答问题没有逻辑性，在回答之前可以先思考一下，然后告诉面试官将从 n 个方面进行讲解，首先第 1 个方面是…，其次第 2 个方面是…

友情提示：面试的时候发现大部分的面试者普遍存在 1 和 2 两个问题。如果你的回答没有逻辑还繁琐且没有命中要点，通常面试官对你的印象会非常差。相反，如果你回答问题过于简洁，通常情况下面试官会觉得你没 Get 到他的问题点（当然会怀疑自己的表述有没有问题），一般都会追加更详细的问题描述，毕竟这是一个挖掘的过程。

面试题解析

一般我在面试开始前，会根据应聘者的简历提前准备 8 道左右的面试题（在面试的过程中可能会有调整），最终分析了一下我的笔试题数据如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

温馨提示：这数据不包括追加的面试题，是提前为应聘者准备的面试题数据。在真正的面试中，面试题可能会因为策略和现场面试情况进行临时调整和追加。

由于自己本身对 React 熟悉还不够，因此遇到我的面试者如果是 React 技术栈会相对吃亏一些。接下来我会重点讲解一些面试题，有些简答的面试题不会出解答思路（有些面试题可从《面试分享：两年工作经验成功面试阿里 P6 总结》中找到答案），没有给出答案的面试题希望大家在评论中给出，供别人参考。

HTML 篇

在 HTML 中如何做 SEO 优化？

建设中…

首屏和白屏时间如何计算？

建设中…

CSS 篇

了解 Flex 布局么？平常有使用 Flex 进行布局么？

解题思路

首先得说出 Flex 布局概念，Flex 的结构组成（Flex Container 、Flex Item），遇到的所有面试者都没有此回答
其次可以讲讲自己平常用的最多的 Flex 属性
最后可以讲讲自己平时常用的布局（左右两列，上下两行等）

参考链接

Flex 布局教程：语法篇

CSS 中解决浮动中高度塌陷的方案有哪些？

解题思路

可以先概括解决高度塌陷问题的两种类型：clear 属性和 BFC 法
然后可以介绍两种类型的具体方案：
追加元素并设置 clear 属性
使用 CSS 样式插入伪元素
Bootstrap 的解决高度塌陷方案（BFC）

可能追加的面试题（详见参考链接）

高度塌陷产生的原因是什么？
clear 属性清除浮动的原理是什么？
采用 BFC 解决高度塌陷和clear 属性清除浮动相比的优势是什么？

参考链接

清除和去除浮动

Flex 如何实现上下两行，上行高度自适应，下行高度 200px？

解题思路

flex-direction: column
flex: 1

如何设计一个 4 列等宽布局，各列之间的边距是 10px（考虑浏览器的兼容性）？

解题思路

浮动和清除浮动
margin 负值的作用（可参考 Bootstrap 3 中栅格容器.container的样式）

Document

第一列

第二列

第三列

第四列

复制代码

可能追加的面试题

如果你回答的是 Table 布局，那一定会追问 Table 布局和 Div 布局有什么区别？

CSS 如何实现三列布局，左侧和右侧固定宽度，中间自适应宽度？

CSS 清除浮动的原理是什么？

解题思路

利用清除可以设置元素禁止浮动元素出现在它的左侧、右侧甚至是双侧。

3333333333333333333333333333333333333333333

复制代码

3333333333333333333333333333333333333333333

由于 div1 浮动，p 和 div1 布局重叠，为了解决这个问题，可以使 p 元素左侧不允许有浮动元素，给 p 元素添加一个 clear:left 的样式之后

3333333333333333333333333333333333333333333

可以发现 p 的位置下移从而使 p 和 div1 布局不会重叠，其实是使用清除之后，自动增加了 p 元素的上外边距，确保它落在浮动元素 div1 的下面。CSS2.1 引入了清除区域的概念，清除区域是在元素上外边距之上增加的额外间隔（确保浮动元素不会与该元素重叠），不允许浮动元素进入这个范围，意味着设置clear属性的 p 元素的外边距并不改变，之所以该元素会向下移动是因为清除区域造成的。div1 和 div2 的高度分别是 100px 和 50px，因此清除区域的高度在 50px 左右（不算 border 和浏览器代理初始样式等）。如果给 p 元素一个上外边距margin-top:30px，则 p 元素并不会向下移动 30px，而是在解析完样式之后清除区域的高度变成了 50px - 30px 左右，而 p 元素仍然位置不变，如果要使 p 元素下移，则需要使 p 元素的margin-top值高于最大的清除区域高度 50px，并且向下位移的距离也是margin-top值减去最大的清除区域高度。

BFF 的作用有哪些？

参考链接

《面试分享：两年工作经验成功面试阿里 P6 总结》

CSS 中的 `vertical-align` 有哪些值？它在什么情况下才能生效？

解题思路

vertical-align属性值：

线类：baseline、top、middle、bottom
文本类：text-top、text-bottom
上标下标类：sub、super
数值百分比类：20px、2em、20%等（对于基线往上或往下偏移）

负值相对于基线往下偏移，正值往上偏移，事实上vertical-align:base-line等同于vertical-align:0。

vertical-align生效前提：

vertical-align属性只能应用于内联元素以及display值为table-cell的元素，因此vertical-align只能应用于display值为inline、inline-block、inline-table或table-cell的元素，span、strong、em、img、button、input等元素天然支持vertical-align属性，块级元素则不支持。需要注意浮动和绝对定位会让元素块状化，因此此元素绝对不会生效。

CSS 中选择器有哪些？CSS 选择器优先级是怎么去匹配？

建设中…

伪元素和伪类有什么区别？

参考链接

《面试分享：两年工作经验成功面试阿里 P6 总结》

CSS 中的 `background` 的 `background-image` 属性可以和 `background-color` 属性一起生效么？

可能追加的面试题

background-color 属性可以覆盖 background-image 属性吗？

了解 CSS 3 动画的硬件加速么？在重绘和重流方面有什么需要注意的点？

参考链接

《面试分享：两年工作经验成功面试阿里 P6 总结》

CSS 可以做哪些优化工作 ?

建设中…

浮动元素和绝对定位元素的区别和应用?

建设中…

CSS 中哪些属性可以继承？

JavaScript / TypeScript 篇

聊聊继承以及说说ES5和ES6继承的区别？

解题思路

ES5 的继承使用借助构造函数实现，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面。ES6 的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
ES6 在继承的语法上不仅继承了类的原型对象，还继承了类的静态属性和静态方法
…

参考链接

JavaScript 中的类和继承

说说对原生 JavaScript 的理解？

解题思路

JavaScript 实现包含的几个部分
JavaScript 的语言类型特性
解释性脚本语言（对标编译性脚本语言）
面向对象（面向过程）
事件驱动 / 异步 IO
缺少的关键性功能等（块级作用域、模块、子类型等）
自由…

谈谈你对 TypeScript 的理解？

解题思路

类型批注和编译时类型检查
类
接口
模块
装饰器
声明文件（类似于 C 中的头文件）
对 ES 6 的支持
语法提示
ESLint（TSLint 不推荐）
…

JavaScript 中几种迭代语法在 Chrome 等现代浏览器中的性能差异？

面试题来源

应聘者简历里写了熟悉高性能 JavaScript 开发

解题思路

考察 for、for...of、for...in、forEach、while、do...while等
可以使用 console.time 和 console.timeEnd 进行测试
注意现在浏览器多次执行的性能优化问题
++ 和 -- 有没有区别
遍历的时候是否存在查找原型链的过程

可能追加的面试题

字面量 / 数组 / 对象存储性能有没有什么区别？
条件比较多的时候 if-else 和 switch 性能哪个高？
高性能的 JavaScript 开发在语法层面你觉得有哪些可以提升性能？
如何在代码中减少迭代次数？
如何实现一个 Duff 装置？

如何提升 JavaScript 变量的存储性能？

解题思路

访问字面量和局部变量的速度最快，访问数组元素和对象成员相对较慢
由于局部变量存在于作用域链的起始位置，因此访问局部变量比访问跨作用域变量更快，全局变量的访问速度最慢
避免使用with和catch，除非是有必要的情况下
套的对象成员会明显影响性能，尽量少用，例如window.loacation.href
属性和方法在原型链中的位置越深，则访问它的速度也越慢
通常来说，需要访问多次的对象成员、数组元素、跨作用域变量可以保存在局部变量中从而提升 JavaScript 执行效率

浏览器和 Node.js 的事件循环机制有什么区别？

参考链接

《面试分享：两年工作经验成功面试阿里 P6 总结》

比较一下 TypeScript 和 JavaScript，在什么情况下你觉得需要 TypeScript ?

在 JavaScript 中如何实现对象的私有属性?

在 JavaScript 可以有哪几种形式实现继承，各有什么优缺点？

解题思路

类型	优缺点
构造函数模式	可以创建不同实例属性的副本，包括引用类型的实例属性，但是不能共享方法
原型模式	引用类型的属性对于实例对象而言共享同一个物理空间，因此可以共享方法
原型链	对父类实现方法和属性继承的过程中，父类实例对象的引用类型属性在子类的实例中共享同一个物理空间，因为父类的实例对象指向了子类的原型对象
借用构造函数	解决了继承中的引用值类型共享物理空间的问题，但是没法实现方法的共享
组合继承	属性的继承使用借用构造函数方法，方法的继承使用原型链技术，即解决了引用值类型共享的问题，又实现了方法的共享，但是子类的原型对象中还存在父类实例对象的实例属性
寄生组合继承	组合继承已经可以解决大部分问题，但是也有缺陷，就是会调用两次父类的构造函数，一次是实现原型时使子类的原型等于父类的实例对象调用了父类构造函数（同时在子类的原型对象中还存在了父类实例对象的实例属性），一次是使用子类构造函数时调用了一次父类构造函数。寄生组合式继承可以解决在继承的过程中子类的原型对象中还存在父类实例对象的实例属性的问题。

参考链接

JavaScript 中的类和继承

React 篇

React 中的 `setState` 为什么需要异步操作？

解题思路

保持内部一致性：props 的更新是异步的，因为re-render父组件的时候，传入子组件的props才变化；为了保持数据一致，state也不直接更新，都是在flush的时候更新
将state的更新延缓到最后批量合并再去渲染对于应用的性能优化是有极大好处的，如果每次的状态改变都去重新渲染真实 DONM，那么它将带来巨大的性能消耗
立即更新回来视觉上的不适应，比如在页面打开时候，多个请求发布导致频繁更改Loading 状态，会导致 Loading 图标闪烁

可能追加的面试题

什么时候setState会进行同步操作？
React 官方对于setState特定情况下进行同步操作的优化方案是什么？
React 中 setState 后想要拿到更新的state值应该怎么处理？

参考链接

React 应用如何在重新加载页面时保留数据？

解题思路

localStorage 结合 Redux
url query（注意长度限制）

使用 React Hooks 的同时为什么需要使用高阶组件？

面试题来源

简历中写着使用 Hooks 结合高阶组件完成业务开发

解题思路

反向入坑问题，如果是业务迁移可以说明进行部分改造迁移导致
正向说明 Reat Hooks 中不需要高阶组件的写法，例如 Redux 举例
自定义 Hook

可能追加的面试题

完全用 Hooks 的写法是否可以摒弃高阶组件的写法？
怎么使用 Hooks 替代高阶组件？

参考链接

自定义 Hook

Ajax 请求放在 `componentDidMount` 里进行处理还是放在`componentWillMount` 里进行处理比较合适？

解题思路

服务端渲染
Event Loop

gaearon ：If it’s an async request, it won’t be fulfilled by the time the component mounts anyway, regardless of where you fire it. This is because JS is single threaded, and the network request can’t “come back” and be handled while we are still rendering. So the difference between firing it earlier and later is often negligible.

You’re right that it matters in some rare cases though and for those cases it might make sense to break the recommendation. But you should be extra cautious as state can update before mounting, and if your data depends on state, you might have to refetch in that case. In other words: when in doubt, do it in componentDidMount.

The specific recommendation to avoid side effects in the constructor and Will* lifecycles is related to the changes we are making to allow rendering to be asynchronous and interruptible (in part to support use cases like this better). We are still figuring out the exact semantics of how it should work, so at the moment our recommendations are more conservative. As we use async rendering more in production we will provide a more specific guidance as to where to fire the requests without sacrificing either efficiency or correctness. But for now providing a clear migration path to async rendering (and thus being more conservative in our recommendations) is more important.

JS 是单线程，Ajax 请求不会 “返回” 并且触发当我们正在 rendering 的时候（Ajax 的执行结果会放到任务队列中，等主线程执行完后采取读取任务队列中的任务进行执行），因为理论上放在哪里结果都一样，都会执行两次 render。

这样的话，就没必要在componentWillMount中调用 Ajax，以避免理解不到位，对state的结果预计错误。componentDidMount的执行很明了，不会引起歧义，所以在componentDidMount中最合理了。

可能追加的面试题

说说 React 官方推荐 Ajax 请求放在 componentDidMount 里进行处理，而不是放在 componentWillMount 里进行处理？
如果 Ajax 请求放在 componentWillMount 里进行处理，且 Ajax 的返回结果在 render 之前，那么最终会执行几次 render ?

参考链接

Explain why componentDidMount is a better place to make an ajax request（Open）

React 在语法层面可以做哪些性能优化？

解题思路

PureComponent + Redux + immutable-js / immutability-helper
Redux -> Redux Toolkit
组件库按需加载
动态 Ployfill
Tree Shaking
路由懒加载
Hooks useCallback
React Fragments
构建函数中的事件 bind 处理
避免使用内联样式属性
JSX 中合理控制条件渲染的范围（避免无谓的重复渲染）
key
保持 state 中数据必响应的特性

可能追加的面试题

深比较和浅比较的区别是什么？
平常在 render 时有哪些需要注意的地方？

React 和 Vue 的区别？

建设中…（这个会写的比较详细）

可能追加的面试题

说说 React 和 Vue 的三个明显的区别？
能说说 React 相比 Vue 的优势在哪里？
能说说 Vue 相比 React 的优势在哪里？
你觉得在什么场景下用 Vue 或 React ?

Vue 篇

Vue CLI 3 有哪些特性？

面试题来源

简历中写着 Vue CLI 技术栈

解题思路

图形化界面（vue ui）
插件系统
CLI 服务
Vue CLI 无需 Eject 即可进行 Webpack 配置（针对 Create React App）
可配置化 Polyfill
现代模式
Prefetch / Preload
webpack-merge / webpack-chain
浏览器兼容性
CSS 预处理器
环境变量
构建应用 / 库 / Web Components 组件
部署（CORS / PWA）
…

可能追加的面试题

有没有设计过通用的 Vuc CLI 插件？
有没有设计过通用的 Vue 脚手架？
有研究过 Vue CLI 的源码吗？

能对比一下 Create React App 和 Vue CLI 3 吗？

面试题来源

简历上写着熟悉 React 和 Vue 技术栈

解题思路

类型	Create React App	Vue CLI 3.x
可一键构建 SPA 应用	√	√
Script	react-scripts（可定制化）	@vue/cli-service
ESLint 插件集	react-app	eslint-plugin-vue（插件化）
CSS Modules	√	√
CSS 预处理器	自定义 Sass	天然支持 Sass & Less & Stylus（可配置化）
PostCSS 后处理器	√	√
HTML 和静态资源	HTML 插值 & Svg 组件化	HTML 插件 & Preload & Prefetch & 多页应用 & URL 规则
代码分割	√	√
环境变量	√	√
PWA	√	插件化
单元测试	Jest	插件化（Ject & Mock & …）
Proxy	√ （灵活，但往往需要自定义）	√（这种变成配置项）
TypeScript	模板	插件化
自定义脚手架模板	Custom Templates（`template.json`）	Preset & 插件系统（非常棒，可远程）
Webpack 配置	Eject & Webpack files	Inspect & vue.config.js & 默认配置全面 & webpack-merge & webpack-chain（有学习成本）
Webpack 分析	Source map explorer	vue ui（GUI 交互式）
快速原型开发	×	@vue/cli-service-global
交互式开发	×	vue ui
浏览器兼容性	现代浏览器（自定义 Polyfill & browserslist）	browserslist & Polyfill & 现代模式
构建	应用	应用 & 库 & Web Components 组件 (异步)

友情提示：这里指的是默认功能比较，而不是说不能进行功能自定义扩展！

Creat React App 在工程化体系上没有 Vue CLI 3.x 更加的开箱即用，除此之外，Vue CLI 3.x 中的插件体系是一个非常棒的特性，它使自定义脚手架模板变得非常灵活（非常适合企业定制化脚手架）。当然 Create React App 是有它自己的设计理念的，对于简单的应用它是一种优势（不可配置化预先约定）。

Vue.js 整个实现原理？

面试题来源

简历中写着熟悉 Vue.js 源码，或者简历中只写着 Vue.js 技术栈，或者面试的过程找不到亮点

解题思路

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这里简单的描述一下 Vue 2.x 的运行机制（需要注意分析的是 Runtime + Compiler 的 Vue.js）。

初始化流程：

创建 Vue 实例对象
init过程会初始化生命周期，初始化事件中心，初始化渲染、执行beforeCreate周期函数、初始化 data、props、computed、watcher、执行created周期函数等。
初始化后，调用$mount方法对Vue实例进行挂载（挂载的核心过程包括模板编译、渲染以及更新三个过程）。
如果没有在 Vue 实例上定义

render

方法而是定义了

template

，那么需要经历编译阶段。需要先将

template

字符串编译成

render function

，

template

字符串编译步骤如下：

parse正则解析template字符串形成 AST（抽象语法树，是源代码的抽象语法结构的树状表现形式）
optimize标记静态节点跳过 DIFF 算法（DIFF 算法是逐层进行比对，只有同层级的节点进行比对，因此时间的复杂度只有 O(n)。如果对于时间复杂度不是很清晰的，可以查看我写的文章ziyi2/algorithms-javascript/渐进记号）
generate将 AST 转化成render function字符串
编译成render function 后，调用$mount的mountComponent方法，先执行beforeMount钩子函数，然后核心是实例化一个渲染Watcher，在它的回调函数（初始化的时候执行，以及组件实例中监测到数据发生变化时执行）中调用updateComponent方法（此方法调用render方法生成虚拟 Node，最终调用update方法更新 DOM）。
调用render方法将render function渲染成虚拟的Node（真正的 DOM 元素是非常庞大的，因为浏览器的标准就把 DOM 设计的非常复杂。如果频繁的去做 DOM 更新，会产生一定的性能问题，而 Virtual DOM 就是用一个原生的 JavaScript 对象去描述一个 DOM 节点，所以它比创建一个 DOM 的代价要小很多，而且修改属性也很轻松，还可以做到跨平台兼容），render方法的第一个参数是createElement(或者说是h函数)，这个在官方文档也有说明。
生成虚拟 DOM 树后，需要将虚拟 DOM 树转化成真实的 DOM 节点，此时需要调用update方法，update方法又会调用pacth方法把虚拟 DOM 转换成真正的 DOM 节点。需要注意在图中忽略了新建真实 DOM 的情况（如果没有旧的虚拟 Node，那么可以直接通过createElm创建真实 DOM 节点），这里重点分析在已有虚拟 Node 的情况下，会通过sameVnode判断当前需要更新的 Node节点是否和旧的 Node 节点相同（例如我们设置的key属性发生了变化，那么节点显然不同），如果节点不同那么将旧节点采用新节点替换即可，如果相同且存在子节点，需要调用patchVNode方法执行 DIFF 算法更新 DOM，从而提升 DOM 操作的性能。

需要注意在初始化阶段，没有详细描述数据的响应式过程，这个在响应式流程里做说明。

响应式流程：

在init的时候会利用Object.defineProperty方法（不兼容 IE8）监听Vue实例的响应式数据的变化从而实现数据劫持能力（利用了 JavaScript 对象的访问器属性get和set，在未来的 Vue3 中会使用 ES6 的Proxy来优化响应式原理）。在初始化流程中的编译阶段，当render function被渲染的时候，会读取Vue实例中和视图相关的响应式数据，此时会触发getter函数进行依赖收集（将观察者Watcher对象存放到当前闭包的订阅者Dep的subs中），此时的数据劫持功能和观察者模式就实现了一个 MVVM 模式中的 Binder，之后就是正常的渲染和更新流程。
当数据发生变化或者视图导致的数据发生了变化时，会触发数据劫持的setter函数，setter会通知初始化依赖收集中的Dep中的和视图相应的Watcher，告知需要重新渲染视图，Wather就会再次通过update方法来更新视图。