百度、蚂蚁金服社招前端工程师面试题目分享
对下一份工作的核心诉：大平台+ 有技术沉淀 + 「知名」前端团队
面试经历
百度
一面
1. webpack 中 chunkHash 与 contentHash 区别；
2. 写过webpack 的 loader 和 plugin 么；
3. webpack 处理 image 是用哪个 loader，限制成 image 大小的是...；
4. webpack 将 css 合并成一个；
5. webpack 的摇树对 commonjs 和 es6 module 都生效么，原理是；
6. 实现一下「模版字符串」功能；
7. 实现一下Promise.all (Promise 不用写)；
8. 怎么实现响应式布局的；
9. css flex 的各个属性值；
10. css 动画 animation 各个时间值含义；
11. css 如何实现让一个元素旋转并横向移动，如果只用一个 css 属性；
12. less 与 sass 区别，技术选型时如何取舍；
13. ES6 symbol 如何使用以及使用场景；
14. ES6 Proxy 如何使用以及使用场景，说说 Reflect；
15. generator 有什么应用场景;
16. async await 如何实现的；
17. git reset 与 revert 区别，revert 多个 mr 改如何处理；
18. git 如何撤回 add 后的内容；
19. http2 与 http1.1 区别，了解 http3 么，说说；
20. tcp 与 udp 的区别；
21. 还问了简历相关的一些问题(例如：性能优化、E2E 测试相关的);
二面
1. 介绍一下项目；
2. 手写在给定的n 个数中随机取出 m 个数，要求等概率；
3. 手写一下防抖节流函数；
4. 设计实现一个「星级评分」组件；
5. 说说http 缓存；
6. call、apply、bind 三者的区别，如何实现 bind；
...其他一些记不住了，这一面很多手写：）
三面
这一面没有问前端基础支持，只是对简历中的一些项目进行了提问，还问了前端的学习经历以及后续的职业规划...
这面通过后就是HR 了，聊 offer ...
蚂蚁金服
蚂蚁金服的面试流程和其他公司有所不同，它的每一轮面试都是面试官单独加你微信，再和你约面试时间的。
在正式开始一面之前，一面面试官给我发了两道笔试题，让我这规定时间内完成后发给他，题目是：
题目一: 请实现 find 函数，使下列的代码调用正确。
// 约定：
// title数据类型为String
// userId为主键，数据类型为Number
var data = [
{userId: 8, title: 'title1'},
{userId: 11, title: 'other'},
{userId: 15, title: null},
{userId: 19, title: 'title2'}
];
var find = function(origin) {
// your code are here...
}
// 查找 data 中，符合条件的数据，并进行排序
var result = find(data).where({
'title': /\d$/
}).orderBy('userId', 'desc');
console.log(result);// [{ userId: 19, title: 'title2'}, { userId: 8, title: 'title1' }];
复制代码
题目二: 使用 React 或 Vue 技术栈实现一个流水线组件。
基本数据结构
interface Pipeline{
stages: Stage[];
}
interface Stage{
title: string;
jobs: Job[];
}
interface Job{
name: string;
status: 'success' | 'fail';
time: number; //毫秒时间戳
}
复制代码
一面
1. 介绍一下你自己，以及项目，简单说一下你做了什么，有什么难点及亮点；
2. js 有哪些基本类型，说说 typeof 与 instanceof；
3. 说说new 操作符；
4. 什么是event loop；
5. Promise 的用法？了解 allSettled 方法么，怎么实现？
6. 说说闭包；
7. ES5 实现继承的方法;
8. 说说跨域；
9. commonJS 与 ES6 模块化区别；
10. webpack 了解么？loader、plugin 分别是干嘛的？如何实现一个 loader？
11. webpack 如何优化打包速度；
12. 说一下css 盒模型，border-box 和 content-box 区别；
13. 说说BFC；
14. 移动端响应式布局怎么实现的；
15. 说一说flex 布局，有了解 Grid 么；
16. 有兼容retina 屏幕的经历吗？如何在移动端实现 1 px 的线;
17. 说一下react 组件的生命周期；
18. react 组件如何做性能优化，说说 pureComponent；
19. 调用setState 之后发生了什么;
20. 了解fiber 么？解决了什么问题？具体原理是；
21. 有用过hooks 么？怎么看待 hooks？它的原理是；
22. 了解过react 最新的一些动态么？time slice 、suspense、server component 能说说么；
23. 了解最近一些新技术么，webpack5 做了哪些新突破；
24. 为什么vite、snowpack 可以比 webpack 快那么多？具体原理是；
25. 什么是CSRF 攻击，怎么预防；
26. 为什么说用css 实现动画比 js 动画性能好；
27. 什么是合成层；
28. http2 与 http1.1 区别；
29. 说一说http 缓存；
30. http 状态码；
二面
1. 自我介绍，介绍项目，问项目中的一些问题；
2. 19 年毕业的，学校的知识没忘吧.. 计算机网络、编程语言、设计模式、数据结构算法、编译原理你对哪个比较熟悉?
3. 路由器和交换机的区别；
4. 实现斐波纳切数，递归和非递归的时间复杂度分别是多少；
...还有其他一些基础问题，没记住：）
三面+HR 面
偏右面的我（ps：终于见到 偏右 大佬了
这一面没有问前端基础相关的问题，问了我项目中的一些技术细节，方案设计上的问题。偏右老师的问题真的很有水平，直切要害，都是项目推进过程中遇到的坎。还问了一些后续规划的问题。
关于HR 面，之前看很多人说阿里HR 面比较难，而且会刷人。但就我的经历来看，就是一些比较常规的问题，如：
· 为什么选择跳槽；
· 如何应对工作上的压力；
· 今后的职业规划是；
· 说说优缺点；
· 希望阿里给你什么；
...
这些问题可以先想想，然后如实回答即可～以上就是我这两段面经啦，希望能对大家有所帮助吧。
#百度##蚂蚁集团##面经##社招#