首页 > 笔经面经 > 社招一年半前端面试记录及思考(阿里、腾讯、百度 offer)

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

头像
YeeJone-X
编辑于 2021-05-04 15:53:13 APP内打开
赞 35 | 收藏 143 | 回复9 | 浏览5117

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

背景介绍

学历背景:19届,本科,计算机相关专业;
工作经历:毕业后,一直在一家三线厂做前端开发的工作...

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

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

面试结果:蚂蚁、腾讯百度滴滴都通过了面试并拿到 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 技术栈实现一个流水线组件。

> 基本数据结构
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 同时面,感觉全程都是我疯狂讲故事😬

抖音和滴滴

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

如何准备面试

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

简历与项目

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

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

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

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

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

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

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

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

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

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

前端基础

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

算法和手写代码

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

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

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

总结

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

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

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

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

欢迎点赞收藏 ❤️:)

更多模拟面试

9条回帖

回帖
加载中...
话题 回帖

相关热帖

笔经面经近期热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

近期精华帖

热门推荐