前言

我是18届毕业的，普通本科，软件工程专业。刚毕业时我意气风发，觉得进大厂挺容易的，但是现实却给我狠狠来了一击。

校招面了各种大厂，不是一面挂就是二面挂，连三面是什么样子都没见过，说实话，当时被打击的不轻，但是没办法，生活还得继续。

认知到自己的能力只是个菜鸡，又迫于生存，最终去了一家三线厂做前端开发的工作。

正文

这次之所以想出来面试，一共有两个原因：其一是，心里一直有个大厂的梦，想进大厂看看。其二是，自己想回南方发展了。还有就是顺便看看自己水平到底如何了。

所以在今年2月份开始，我就以及开始复习面试的相关知识了，并着手准备相关材料。

对下一份工作的核心诉：大平台 + 有技术沉淀 + 知名前端团队。

所以一共投递了 5 个职位：

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

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

能够拿到那么多大厂的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 ...

阿里

一面

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.18年毕业的，学校的知识没忘吧.. 计算机网络、编程语言、设计模式、数据结构算法、编译原理你对哪个比较熟悉?😨（我答得是计算机网络）

3.路由器和交换机的区别；😨

4.实现斐波纳切数，递归和非递归的时间复杂度分别是多少；
...还有其他一些基础问题，没记住：）

三面+HR 面

这一面没有问前端基础相关的问题，问了我项目中的一些技术细节，方案设计上的问题。偏右老师的问题真的很有水平，直切要害，都是项目推进过程中遇到的坎。还问了一些后续规划的问题。

关于 HR 面，之前看很多人说阿里 HR 面比较难，而且会刷人。但就我的经历来看，就是一些比较常规的问题，如：

1.为什么选择跳槽；

2.如何应对工作上的压力；

3.今后的职业规划是；

4.说说优缺点；

5.希望阿里给你什么；

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

腾讯

一面

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 同时面，感觉全程都是我疯狂讲故事。

如何准备面试

简历的准备

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

关于简历的排版，我总结起来以下几点：

1.简历的格式一定要用 PDF ！！；

2.个人信息、联系方式尽量的放在前面，简历排版需紧凑，不要太松散；

3.对于一些技术栈、关键词需加粗强调；

4.简历整体内容尽量控制在两页以内，语句需精简，切勿啰嗦；

对于简历模板，我也是准备了一套简历模板，需要的同学直接去文末领取。

主要复习点

HTML以及CSS篇 

1.说下你常用的几种布局方式
   集中往盒模型、flex布局说(至于grid布局，这个我看过没有用到过)

2.实现水平居中的几种方法？

3.animate和translate有没有用过，一些常见的属性说下？

4.CSS实现宽度自适应100%，宽高16:9的比例的矩形。

 5.如何实现左边两栏一定比例，左栏高度随右栏高度自适应？

 JavaScript篇

1.变量提升遇到的一些简单code题

2.说一下对闭包的理解，以及你在什么场景下会用到闭包？

3.说一下你对原型与原型链的了解度，有几种方式可以实现继承，用原型实现继承有什么缺点，怎么解决？

4.iframe的缺点有哪些？

5.Ajax的原生写法

6.为什么会有同源策略？

7.前端处理跨域有没有遇到过，处理跨域的方式有哪几种方式去解决

8.怎么判断两个对象是否相等

9.代码实现一个对象的深拷贝

10.从发送一个url地址到返回页面，中间发生了什么

11.说下工作中你做过的一些性能优化处理

ES6篇 

这块面试官主要是问你哪块用的比较多，你可以引导性地把面试官往你会的地方说

1.箭头函数中的this指向谁？

2.如何实现一个promise，promise的原理，以及它的两个参数是什么？

3.promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？

4.map和set有没有用过，如何实现一个数组去重，map数据结构有什么优点？

Vue篇

1.简单阐述一下vue的生命周期

2.如何实现一个自定义组件，不同组件之间如何通信的？

3.父子组件如何通信的？

4.前端路由有没有用过，你在项目中怎么实现路由的嵌套？

5.nextTick和Vuex两个有没有用过，分为什么情况下用到？

6.Vue的响应式原理你知道是怎么实现的吗？你觉得订阅者-发布者模式和观察者模式有区别吗？有的话，说一下它们的区别。

由于篇幅问题，需要文中详细资料和简历模板的三连支持我一下，然后点击这里即可领取

最后

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

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

祝愿大家都可以拿到自己心仪的offer呀。