社招一年半前端面试记录及思考（阿里、腾讯、百度 offer）

清疚 2023-01-19 08:12 258阅读 0赞

![d09f7cea40151868e123dee427d0973f.png][]

作者：YeeJone | https://juejin.cn/post/6957918287644590117

在过去的一个月里，自己面试了多家公司的前端岗位，很幸运的是拿到几个不错的 offer，所以想通过这篇文章做个记录与总结，希望给打算求职的你一些参考。

## 简单介绍 ##

19届，本科，计算机相关专业。毕业后，一直在一家三线厂做前端开发的工作...

其实这次之所以想出来面试，一共有两个原因：其一是，校招结束后就没有面试的经历了，不知道自己目前在招聘市场的水平到底如何；其二是，自己想回南方发展。  
所以 2021 农历新春伊始，我就开始复习面试相关的知识，并着手准备相关材料。面试的前期准备大概花了半个月， 2 月 28 号投出了第一封简历....

对下一份工作的核心诉：大平台 + 有技术沉淀 + 「知名」前端团队  
所以一共投递了 5 个职位：

*  蚂蚁金服体验技术部
 *  腾讯 AlloyTeam
 *  百度「爱速搭」团队
 *  头条抖音支付
 *  滴滴

面试结果：蚂蚁、**腾讯**、百度、滴滴都通过了面试并拿到 offer ，抖音支付二面挂。

## 面试经历 ##

### 百度 ###

**一面**

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 技术栈实现一个流水线组件。

![3a6d84467ad9970093962cc26f415a3b.png][] 流水线组件.png

基本数据结构

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 面比较难，而且会刷人。但就我的经历来看，就是一些比较常规的问题，如：

*  为什么选择跳槽；
 *  如何应对工作上的压力；
 *  今后的职业规划是；
 *  说说 优缺点；
 *  希望阿里给你什么；  
    ...

这些问题可以先想想，然后如实回答即可～

### 腾讯 ###

**一面**

1.  手写大数相加方法；
2.  实现一个方块的拖拽；
3.  问了一些项目的问题，以及相关技术细节；
4.  从一个 URL 输入到页面渲染，经历了哪些过程，尽可能的详细；
5.  tcp 握手 回收过程，了解泛洪攻击么；
6.  说说 event loop（并出了一道题，写输出顺序）；
7.  SSR 怎么做的，怎么保证同构？server 端的数据都 renderToSting 消费了，为什么还要给到 client 端；
8.  js 的严格模式；
9.  说说 Iterator 的使用；
10. 说一说快速排序的过程；
11. node 如何捕捉错误，内存泄漏怎么排查；

还有一些基础题目...

**二面**

1.  依旧是项目问题...
2.  性能优化怎么做的，怎么衡量收益的；
3.  为什么要做 SSR；
4.  E2E 测试怎么做的，怎么保证测试覆盖率和准确性；
5.  如何合理分配 node 服务资源；

这一面对于项目里的技术细节问的很深入，还问了些计算机网络、React相关的问题...

**三面**

1.  项目...;
2.  hybrid 通信原理；
3.  如何看待小程序，它的技术原理是；
4.  设计一个协同文档的技术流程；
5.  离线包怎么做的，现在公司的 app 提供了哪些特殊能力；
6.  质量保障平台如何做的，项目中单元测试怎么做的，为什么要有 E2E 测试；

就记到这些问题...????

**四面**

1.  希尔排序，堆排，快排；
2.  this 指向问题，说出输出内容；
3.  如何设计一个组件库；
4.  用过 TypeScript 么，了解哪些新特性；
5.  说说 React Fiber...;
6.  为什么 Fiber 双向链表的结构可以解决递归慢的问题；
7.  了解设计模式么，说说单例模式的优缺点;
8.  职业规划；
9.  目前拿了哪些 offer ...；

这一面 hr 约的时候和我说是 GM 面，本以为会和其他公司一样，主要考察技术视野和职业规划... 但一上来问我技术问题着实没想到....  
这面结束后就是 HR 面，两个 HR 同时面，感觉全程都是我疯狂讲故事????

### 抖音和滴滴 ###

这两家公司具体的经历我就不一一赘述，很多问题和上面三家差不多... 就简单讲讲抖音考了那几道笔试题：

*  二维数组中的查找；
 *  从先序遍历还原二叉树
 *  手写一个版本比较函数；
 *  实现一下 cache request（请求过的数据不再请求）

## 如何准备面试 ##

前端面试三个重要部分：**简历与项目**、**前端基础**、**算法和手写代码**。一般情况下，只要三部分中的其中两个很好的话，基本就能通过面试。所以下面我会根据自己情况，来和大家说说如何准备这三部分内容：

### 简历与项目 ###

由于平时自己也负责组内进行一些面试工作，作为面试官来说，**简历真的很重要**！！它是面试官对你的第一印象，所以简历的排版以及内容质量很关键。

我们先从简历的排版说起，总结起来有以下几点：

*  **简历的格式一定要用 PDF ！！**；
 *  个人信息、联系方式尽量的放在前面，简历排版需紧凑，不要太松散；
 *  对于一些技术栈、关键词需加粗强调；
 *  简历整体内容尽量控制在两页以内，语句需精简，不要啰嗦；

如果说简历排版是外在美，那么简历中的内容则是更为重要的"内在美"。一份好的简历，是能够清楚如实地表述自己当前的背景和工作内容，我们通常将简历内容分为四个部分：**个人信息&教育背景**、**工作经历**、**项目介绍**、**自身技能&自我评价**。

**个人信息&教育背景**、**工作经历**这两部分按照自身真实情况写即可，*切勿造假！！* 可能很多人为了简历能够"华丽"，会对教育背景&工作经历进行虚构和造假，这种操作的后果，就是在背景调查阶段极有可能被发现，从而导致你的 offer 被取消，情形严重者可能会被拉黑。

**项目介绍** 和 **自身技能&自我评价** 这两块的内容往往决定了面试结果的评级。我们先说项目这部分。简历排版、个人背景决定的是你是否能够通过初筛，*个人项目则是决定面试通过后定级的上限*。在帮组内面试相关候选人时，通常会对项目这部分内容重点关注，关注的内容主要有两个：

*  这个项目是否有亮点，以及这个项目是否有落地产出；
 *  候选人的项目是否和公司的业务贴合，候选人有没有除业务工作外的工程提效的价值和潜力；

所以作为候选人，我们要尽量去罗列一些具有代表性的项目，这样会提升面试官对自己的印象，而且一定要对写在简历上的项目烂熟于心，面试前可以采取自问自答的方式来进行练习。很多候选人的项目部分会写很多业务相关的内容，没有真正拿的出手亮点项目，导致简历平平无奇。

我们在平时工作中要多去参与一些如：性能优化、质量保证、构建优化、运营赋能的技术项目，这些工作，不仅能提升你技术的广度和深度，而且可以极大的丰富你简历的内容，让你在面试中有更多筹码。

**技能&荣誉&自我评价** 只要清楚列出你的技能和荣誉即可，例如：有移动端开发经验、微前端经验、熟悉 linux、node、获得了XXX奖项等。对于「自我评价」这部分，我个人并不喜欢，因为这些内容往往都是千篇一律，没有什么有价值的信息。

### 前端基础 ###

前端基础相关的面试题，很多 github 仓库都有收集，在面试之前我们当然可以通过这些进行查漏补缺，但关键还是需要平时积累而且要有深入的理解，以免面试的时候出现一往深处问就不知道的情况...  
这里推荐几个前端基础相关的书籍和内容：

*  《JavaScript 高级程序设计》 （红宝石书）
 *  ECMAScript 6 入门(阮一峰 ES6)
 *  React 官方文档
 *  github.com/CavsZhouyou…
 *  github.com/mqyqingfeng…

### 算法和手写代码 ###

对于「算法」，亲身经历告诉你们，*临时抱佛脚是没有用的*...????  
一定要平时坚持刷，保持“手感”！就我的前端面试情况来看，考察的算法并不会很冷门、很难，一般都是 easy、medium 难度的，所以可以先从简单的开始刷，再慢慢过渡到 medium 和 hard 的，循序渐进。、

**手写代码**比较常见的几道题目：

*  防抖节流；
 *  手写 Promise 及相关 api 实现；
 *  实现 bind、apply、call；
 *  request cache；
 *  实现模版字符串；
 *  es6 class 转成 es5 ；
 *  实现 Array flat 等相关 API；
 *  实现一个版本比较函数；...

## 总结 ##

面试其实是一个自检、自省的过程，期间会发现自己的优点和不足。这次面试经历暴露了自己在算法及专项领域技术思考的欠缺...所以今后还要加强这方向的学习和巩固，但同时拿到了三家"大厂"的 offer，也是对过去一年半的工作的一个肯定，说明我是一名合格的螺丝钉 ????

关于面试期间的心理状况，面试的整个过程是很心累的，在这短短的一个月里，你会经历极度自信和极度失落的跨越，期间需要调整好自己的心态，面试没通过并不是你被全盘否认了，只是你的工作经历并不是很契合他的职位需求，所以还是要保持信心和斗志。

在经历过这几场面试之后，一直在思考一个问题：**3-5 后你的核心竞争力是什么？**

对于前端来说，在初入职场时，可能由于学习投入的时间有差别，自己和其他人的水平存在一定差距，但这种差距随着时间的推移会渐渐缩小，工作 3 年后，大多数人基本就能 cover 住业务问题了，*所以核心竞争力并不是你写了xxx需求...，而是你是否有持续学习的能力以及在某个前端领域是否有自己的思考与沉淀。*

欢迎点赞收藏 ❤️：）

[d09f7cea40151868e123dee427d0973f.png]: /images/20221021/3ebe7775f2db40a79a9ea00608aacf79.png
[3a6d84467ad9970093962cc26f415a3b.png]: /images/20221021/418aa6c6d6b7432aa9f85633737ae5e4.png