一位平凡人的春招面经汇总（前端）21届

coderxrw
647 阅读18分钟

背景：普通本科(二本)，对于学历不是特别好的我，在春招选择了海投简历，大大小小的公司投了大概有100多份了，但是收到面试和笔试的就只有20多家，在boss发消息基本是1/5的回复率，但是我想说的是，被拒了没事，海投就行了，总会有大厂会给机会的。

我的前端路线（仅供参考，每个人适合的方法不一样哈） 大二接触前端，大三下开始系统性学习前端，学了大概3个月左右（b站pink的基础+王元红的vue），然后开始做一些前端项目参加比赛，和室友一起做网站之类的pc端，到了大三暑假，找到了第一份与前端相关实习工作，为期7个月（负责后台、小程序、H5活动页面），年前辞去实习工作，开始了春招的提前投递和面试准备中，在准面试过程中，我建议大家将复习的知识点总结为思维导图，如process on之类的，这样还挺方便的，当然写blog也是可以哦，推荐大家在空余时间去搭建一下自己的个人blog，可以参考vuepress的博客风格，因为面试中被问到好几次是否有个人博客，大家如果有个人博客建议写在第一栏信息中标注（加分项，如果只有几篇文章就不放上去了哈）。

投递渠道 能内推绝不自己投哈，尤其是官网，大部分简历自己投都沉底了。

准备时间 越早越好，建议在2月初，这时一部分企业开放了提前批，大家可以在牛客或者企业官网上面关注。 3月一整月是关键时机，大部分大厂在三月甚至提前批就招满了（我就是好未来提前批面试的，当天面完第二天就招满了），所以大家要提前投递简历！

关于面试 面试是一个有运气存在的过程，找工作和投简历也是，所以大家心态一定要好！ 1.一个好的自我介绍可以牵引着面试官接下来的面试问题，所以一定要语言精简，2-3min即可。 2.回答相关知识点，一定要自己做延伸知识，我一般是 概念 + 应用 + 原理 三步走。 3.切记，对于自己比较熟悉的知识点，一旦被问到，要自己做知识的延伸。 4.关于项目的描述：star法则描述，所处开发环境到项目目的 → 自己负责模块 → 难点 → 总结收获，可以以一种需求 ——知识点的收获，例如：搜索模块 -> 防抖节流优化 ；等这样由项目需求牵引出知识点诱导面试官提问，在回答问题也是一样，要学会把面试官牵引到自己熟悉的领域！

关于学习（楼主大概学习了1年左右时间吧，其中包括了实习的项目时间） 常考知识点牛客大牛已经有些许总结啦，我就不多赘述啦 给大家一些建议，重心放在基础上面

  1. HTML+CSS+JS+ES6这些是核心（重点），JS看《红宝书》（必看！）和《你不知道的JavaScript》（上中），ES6看阮一峰的博客完全就ok（必看！！）
  2. 其次需要八股文计网操作系统等，其次是浏览器的相关知识和前端安全等 （记忆力）
  3. 然后就是数据结构和算法+排序算法（leetcode刷就完事了）
  4. 再就是进入框架阶段，vue/ react 选一个熟悉（当然你会两个就更好啦，前提是对其中一个已经很熟悉了） 在熟悉使用 vue/ react能开发项目后，要着手去了解一些核心底层原理 （加分项）这里就放一个vue的源码社区吧vue源码社区
  5. 再就是webpack和Node.js的学习，webpack的性能优化和一些基本原理
  6. 再就是要对前端整体的自动化部署和工程化体系，性能优化有一定的了解
  7. 如果时间充裕，你可以去熟悉微信小程序开发啦，多端框架uni-app和taro可以熟悉下
  8. 手撕代码环节 这里看32个手写就差不多啦 32个手写高频！！

在学习完后就要开始刷面试题啦！！

这里推荐一个面试汇总的掘金小册，还不错哦前端面试之道（可以私聊我给资料哦）

以上仅是我个人的建议哈，大家可以参考参考，顺序可以结合个人实际情况

下面是我个人的春招面经汇总

招银云创 2.6 武汉

这个属于年前面的一家，也是春招之前第一家吧 笔试40min + 面试30min + hr面 1.自我介绍 2.项目难点（后台+小程序+h5活动页面） 3.平常公司用的技术栈（主要是vue，基于element二次封装，基于axios的api全局封装，以及一些utils工具函数和配置等） 附加：瀑布流实现几种方式，不知道盒子高度如何实现，因为小程序项目提到了（答：css3实现布局，js获取盒子高度计算往那一列添加继续添加盒子，会遇到性能问题，需要给盒子占位图片，和进行预加载处理优化加载性能） 3.如何学习前端（巴拉巴拉） 4.水平垂直居中（答，4种） 5.三列布局，中间自适应 6.js继承方式以及每种的优缺点（6种，巴拉巴拉） 7.数组判断（5种，巴拉拉） 8.跨域（nginx，cors，jsonp，websocket等巴啦啦） 9.浏览器缓存策略（强缓存+协商缓存，巴啦巴啦） 10.vue双向绑定原理（vue2.0实现，vue3.0实现，优缺点，proxy实现，巴拉吧拉） 11.前端路由原理（基于hash，history，巴拉巴拉） 12.路由如何监听url变化而不请求服务器（hash基于hashchange事件，history机遇H5新增的push state和replace state实现，巴拉巴拉） 因为薪资 已拒

地平线（已oc） 前端一面南京（1h）3.2

笔试题（20min）

  • 第一题
function test(a) {
	a = 3
}
var a = 4
test(a)
console.log(a)
// 4 变量提升
  • 第二题，下列执行结果，以及原理，第二个输出和第三个输出有什么不同
var o = {
	user:'aaa',
	fn:function() {
		console.log(this.user);
	}
}
o.fn()
window.o.fn()
var c = o.fn
c()
// aaa, undefined, undefined this指向问题
  • 第三题 手写一个冒泡排序
  • 第四题 用promise包装一个settimeout
  • 第五题 手写扁平化处理

面试环节（40min）

  1. 自我介绍，介绍项目难点（10min）
  2. 项目中说到了深拷贝，你知道如何实现吗（巴拉巴拉），那你手写一个吧（写了一个map解决循环引用的版本）
  3. 你对js哪些理解比较深入？（原型链，promise啊async，await啊等等）
  4. 那你说一下原型链（从prototype，proto,等一些列串讲）
  5. 你知道Function.__proto__指向哪里，Object.__proto__指向哪里，为什么（都指向Function.prototype）
  6. 那你来说一下promise的resolve和一些方法怎么实现（状态变更，循环调用）
  7. 追：那resolve返回的是什么，比如我resolve（1）（返回promise对象，value为1）
  8. 顺便讲了async和await的实现过程（async就是generator的语法糖，内部对generator进行了自调用的封装，就是thunk函数，那么await就是promise中的.then方法语法糖，内部是返回了一个promise对象，然后再里面定义一个step方法自调用等）
  9. 网络了解吗，你讲一下tcp三次握手详细过程，包括字段名称（syn，ack，seq，ack num，ack num + 1 等巴拉巴拉...）
  10. 报文首部字段有几种，字节大小
  11. 你手上应该有蛮多offer吧？（啊？哦，怎么也得给你说一两个。答：2个吧）

二面（1h）3.4

  • 自我介绍
  • vue和js，以及jquery有什么不同（vue核心，组件化，虚拟dom和diff算法，数据驱动-响应式.....）
  • 你讲一下diff算法吧（patch、patchVnoe、updateChildren、新旧节点对比....以及为啥不能index做key值，或者不要key值出现bug问题，讲的比较就，追问了一些吧，主要核心就是调用updateChildren（）方法时，首尾指针的循环对比过程，用sameVnode方法对比；讲了挺久的估计有10min）
  • 虚拟dom你说到了重排，你讲一下（浏览器渲染机制.....）
  • 改变宽高会触发重排吗？（会...）
  • 解构赋值，扩展运算符（iterator接口、数组对象结构.....）；扩展运算符算什么拷贝（浅拷贝，引出深浅拷贝概念，系列串讲）
  • 看代码输出
const a = {m:1,n:2,j:{t:3} }
const b = {n:3, j:{s:4}}
console.log({...a,...b});
//{m:1,n:3,j:{s:4}}

function test() {
	a = 3 // var a = 3
}
var a = 4
test()
console.log(a) 
// a = 3时，输出3
// var a = 3 ,输出4
  • 高阶函数了解吗？（巴拉巴拉，手写了一个柯里化）
  • 冒泡机制（事件捕获，冒泡系列串讲）
  • 防抖和节流（手写了一个防抖）
  • 图片懒加载的原理（通过img中的src属性，根据可视化区域对数据进行切割）
  • 浏览器存储机制，localstorage和sessionStorage区别，cookie、session、token，token实现过程原理，顺带讲了项目中用到的token是怎么样的，巴拉巴拉，系列串讲
  • 场景题：讲一下token实现单点登陆的过程，思路怎么样（先将token存储在localstorage中，在利用跨域解决子域名共享token）（10min）
  • 软实力：如何看代加班，你和领导方案起冲突如何解决（协商呗...）

三面 （30min）3.10

这面是cto面，主要聊了一下简历上面写的项目、后台项目的整体流程、小程序项目等等，然后讲在学校里面做的比赛项目，然后面试官介绍了一下公司这边的整体规模，前端这边主要业务是to B的，然后就是聊一些理想啥的。

hr面 30min

聊公司发展，未来规划，自己实习或校园期间成就最大的地方，等等

杭州兑吧 前端一面 （1h）3.2

  1. 自我介绍，项目难点（主要说了后台的业务）（15min）
  2. 项目引出diff算法（patch过程，diff比较过程，首尾指针while循环对比，key值的关键性作用，以及为啥不能用index作为key）（10min）
  3. 你怎么学习的这些内容源码（官方文档，博客，视频讲解，总结脑图）
  4. 作用域链（执行上下文，闭包，私有变量...）
  5. 原型链，js继承，this问题，new过程，new function返回的是什么（prototype，隐式原型，继承五种，new四步，返回fun本身）
  6. 你怎么学习的vue，学到什么层面了（项目->源码，又讲了一下从响应式到nextick到diff等一系列问题）
  7. 前端路由，监听url变化，实现过程，路由守卫（基于hashchange和h5的pushstate和replacestate，路由的三种守卫...，实现过程...）
  8. vuex作用，vuex和localstorage区别，本质区别，驱动不一样(
  9. 一个是内存存储，一个是浏览器永久存储，
  10. vuex应用于组件之间的共享数据，local更多用于页面之间传递；
  11. 面试官补充：两者数据驱动不同。
  12. 追问：还有吗？
  13. 面试官：你是面试官我是面试官？hhhhh)
  14. 实现vuex的思路，原理层面(说了一点，没答全)
  15. 软实力，怎么平衡项目需求多和少，但时间周期一样（时间多了，就摸鱼（学习技术栈））
  16. 反问

二面cto （20min）3.8

  1. 聊项目，公司项目+比赛项目
  2. 聊项目中的难点和成就感，或者在公司的挫败感
  3. vue的生命周期
  4. vue响应式原理
  5. webpack性能优化
  6. 软实力等等

hr面

聊聊基本情况，问了问手上的offer

携程 前端一面 （40min） 3.8

  1. 自我介绍
  2. 聊项目，基本上简历上面写的项目难点和负责模块都问了一遍
  3. 第一个埋点后台系统，介绍一下整个项目的业务流程
  4. 主要问了小程序方面的项目，回答了搜索模块中的防抖处理优化；首页卡片瀑布流实现原理，瀑布流卡片采用预加载解决不等高盒子填充过慢以及图片懒加载优化
  5. 你写到视频组件TRTC，介绍一下，回答了解决使用uni-app开发微信小程序时候，不兼容TRTC的问题，采用混合开发，引入第三方解析代码解决兼容问题；以及微信小程序端，video列表会出现自动播放缓存过大的问题，采用视频裁剪成图片变成图片列表，从而点击图片切换视频播放解决缓存问题。
  6. 我们这边是react技术栈，你主要都是vue的项目，那你给我介绍一下vue吧（主要说了vue的响应式原理2.0和3.0的实现以及优缺点，虚拟DOM和diff算法实现过程，以及自己对vue的理解，大概说了10min）
  7. 介绍一下es6新特性吧（let、const、解构赋值、iterator接口、set和map、promise、generator、async和await的原理以及实现方式，主要介绍promise和async和await的实现，大概10min）
  8. 一道业务场景的算法题
一个a数组 [{data:string}],存放365天的日期
一个b数组 [{data:string,price:string}] 存放有特价的天数和价格
要求：用0（n）的时间复杂度，实现一个数组中，包含全年的日期，同时有特价的那天有price的显示，没有特价的那天price显示'--'

面试官态度很好，还给出提示，双层循环是可以实现，但是效率太低，不能使用，你如何用一层循环实现，写一下伪代码

for ( let i =0 ; i < b.length; i++) {
	let index // 用来存储当前b数组中在a数组中的位置
	index = b[i][data] - a[0][data] // 因为a数组日期是递增的，所以相减获得index
	a[index][price] = b[i][price] // 直接用index替换
	a[i][price] = '--'
	                                                                                                                                                                   
}

然后面试官说可以使用双指针的方式来优化一下，然后就说了一下思路，就让我下去自己实现了 9.反问 面试官说一面过了，但是一直在泡池子...

奇安信 前端一面 （45min）3.13

3.4号做的笔试（20道单选5道不定项+2道算法）

  1. 自我介绍
  2. 平常如何学习前端，是怎么一个路线
  3. 全程问项目（简历中写的三个项目，后台、小程序、pc网页都问了，以及项目难点，解决过程）
  4. 你介绍一下DOM（一些基础api，引出虚拟DOM和diff算法，顺便讲了一下diff算法的过程和vue中diff的处理过程，又顺便说了一下vue的系列原理串讲，响应式等）
  5. 你讲的这些，有自己做过笔记吗？（博客和脑图）
  6. 平时项目是怎么协作的（gitlab，一人一个分支，最后合并到dev）
  7. 你们前端属于自动化部署吗，了解前端自动化部署的过程吗？
  8. 反问

二面流程太慢拒了

富途 一面 （80min）3.16

3.5号做的笔试 （20道单选5道不定项+2道算法）

  1. 自我介绍
  2. 介绍项目（简历上写的后台+小程序的项目，关于细节难点都问了）
  3. 看代码输出，一题变量提升，一题对象的赋值；由对象引出基本类型和引用类型的区别，在引出引用类型的深浅拷贝
  4. 然后手写了一个深拷贝（解决循环引用版本）
  5. 问了如何判断类型，基本类型和数组
  6. 原型链，new过程手撕等系列问题
  7. 算法1：如何判断B数组为A数组的子集（不能使用原生方法）
  8. 算法2：括号匹配
  9. 算法3：跳跃游戏2
  10. http缓存（强缓存和协商），强缓存两种方法，你知道Cache-control字段有哪些属性吗（max-age，no-cache）,max-age设置的时间段指什么，还有其他的属性吗？
  11. tcp和udp
  12. 你说到ARQ重传机制，那你说一下快速重传的过程
  13. 我看你有写node，你讲一下node
  14. 反问

二面因为收到其他oc就拒了

跟谁学 前端一面(50min) 3.19

  • 自我介绍
  • 介绍项目，详细问了埋点后台项目，整体业务流程，你的埋点数据哪里来？（客户端上传，调数据部门接口），负责模块，项目难点（说了嵌套组件和级联多选的数据回显）
  • 项目说到diff和虚拟dom，介绍一下，你说到重排和重绘，什么情况下会触发，只获取dom的宽高会触发重排吗？（这里应该是获取视口的宽高会触发，但是dom宽高不会触发）
  • 你说到sameVnode方法，那这其中会进行哪些判断，判断返回true后还会继续递归吗，应该是不会，这里说成了会...
  • 闭包了解吗，作用域链，创建私有变量等，然后就是一题改变闭包的题目
for( var i = 0; i< 10; i++ ) {
	setTimeout(() => {
		consolg.log(i)
	},0)
}
// 输出 10个10
  • 怎么让其实现正常输出，写了let实现和 立即执行函数实现
  • vue路由的理解，说了hash和history的区别以及底层实现，基于hashchange和H5的popstate（）和replace state（）监听url变化，以及...
  • vue中$nextick的原理，什么时候调用
  • v-show和v-if区别
  • v-model，基于value和input事件的语法糖；那你在自定义组件中能否用v-model呢？可以
  • 递归手写数组扁平化
  • call、apply、bind的使用场景和区别
  • position属性值哪些
  • 你说脱离文档流，你说一下什么是文档流
  • 盒子模型，你说IE盒模型，标准盒模型，区别，怎么触发ie盒模型，用box-sizing：border-box可以实现，还有吗？ 不设置doctype
  • 水平垂直居中，4种
  • 手写防抖
  • 反问建议

二面 （30min） 3.24号

  1. 自我介绍
  2. 你最大的收获实习中
  3. 你说到自测代码，你有用过什么自测工具嘛
  4. 你说到项目规范，你说一下你们平时开发的项目规范
  5. 我看你vue用的比较多，你说一下diff吧（虚拟dom，diff的的一些概念，patchVnode节点比较的过程，新旧节点都存在触发updateChildren和sameVnode等核心过程，以及key值的作用和为啥不能index为key值）,那你觉得diff过程中做了哪些节点对比的优化吗
  6. vue中slot的作用（组件封装，默认/具名/作用域插槽，以及各类插槽的实际场景等）
  7. 有了解过哪些前沿技术吗（vue3的新特性，web worker/websocket等等），web worker的使用场景
  8. webpack你了解吗，对于项目有哪些优化（html+css+js压缩，tree-sharking等等）,tree-sharking的触发条件
  9. 项目难点，说了自己的踩坑之旅，以及从踩坑到对vue的更好理解等
  10. 算法题，对一个有重复数的数组排序，要求时间复杂度为o（n）
  11. 反问 hr面等待中

好未来 21春招提前批 前端一面二面+hr面 3.21（2.30-5.30） -- 已oc

3.9号笔试（20单选+5不定项+2算法（模板编译+螺旋矩阵）） 3.21一面

  1. 自我介绍
  2. 常见的数据结构有哪些以及应用场景
  3. DOM结构为什么树结构
  4. 常见的排序算法以及时间复杂度
  5. 这些算法的应用场景，就回答了sort的底层是快排
  6. 那你实现一个快排吧
  7. TCP和UDP的区别以及应用场景（三握四挥，拥塞处理，ARQ重传）
  8. HTTP版本之间的区别（http1.0、http1.1、http2.0/3.0）
  9. 我看你有写node，你说一下node和操作系统有哪些交互
  10. 进程和线程的区别
  11. 你说到java中的多线程高并发，你能说一下java中的多线程是怎么处理的
  12. 说一下js中的消息队列
  13. 说一下ES6新特性（基本都说了一遍，重点说promise和async和await的实现原理）
  14. 关于一个箭头函数的this指向问题
var obj = {
　　say: function() {
　　var f1 = ()=>{
　　　　console.log("1111",this);
　　}
　　f1();
　　}
}
var o = obj.say;
o();//f1执行时，say函数指向window，所以f1中的this指向window
obj.say();//f1执行时，say函数指向obj，所以f1中的this指向obj；
var ojb = {
　　pro: {
　　　　getPro: ()=>{
　　　　　　console.log(this);
　　　　}
　　}
}
obj.pro.getPro();//this指向的是window，因为箭头函数定义时，getPro的上一级是pro，是一个对象，不能形成单独的作用域，故指向window。

15.你用过哪些移动端布局（rem+rpx，媒体查询，flex，position...） 16.实现一个三列布局（flex版本，float版本）

17.从url输入到页面渲染哪些步骤

18.项目难点，由项目牵扯出vue的一些原理，如diff和虚拟dom以及响应式之类的等等

19.slot有了解过吗（组件封装时使用，分为 默认/具名/作用域插槽...并介绍了一下项目中的使用） 20.对HTML的语义化的理解，有没有了解过新增的一些周边技术，（websocket和web worker...)

21.CDN有了解过吗？其中的原理是什么？

二面

  1. 自我介绍
  2. 看你软件工程专业的，你说一下常见的数据结构和算法有哪些吧
  3. 数组和链表的区别以及适用场景，什么是链式存储
  4. 你说一下map结构吧，hashmap是个什么结构，怎么保证其中值的唯一，hash值是怎么算出来的
  5. 常见算法说了排序算法的一些，冒泡归并快排希尔
  6. cdn原理
  7. 前端请求到后端的详细过程
  8. 服务器的部署了解吗
  9. 数据库了解过吗？数据库的核心你知道吗
  10. vue的插槽
  11. 这里共享屏幕看了一下自己的博客和思维导图笔记，他看到了diff
  12. 你说一下diff算法吧
  13. vue相比于原生js区别
  14. 智力题，烧香时间
  15. 算法题，合并两个有序数组
  16. 前端安全
  17. 前端前沿新技术
  18. 微前端，three.js和3D动画写过没
  19. 你有一个很复杂的算法在页面中，你要如何对它进行优化

还有很多细节记不太清楚了，总之两面考察广度挺多的，深度主要是项目和网络挖了一下，对于计算机基础的考查还是很多的，数据结构和网络算法的八股文。 hr面 主要谈了一下以后工作中倾向的业务部门，以及一些场景题吧，然后就是聊了一下自己的比赛项目过程经历，以及个人对未来职业的规划等等

3.25号收到oc

后续有一些公司的面试和笔试，由于我拿到好未来的oc就拒了 我想跟大家说的是：面试是一个技巧和实力综合的过程，被拒绝了不可怕，我们反思提升自己，在接着面就行了，校招是我们最好的机会进入大厂了，大家要抓住机会呀！

建议

  • 关于blog，大家有空就一定要搭建自己的blog啊，是个很好的亮点！！很加分
  • 对于还在大三或者大二的同学，一定要提前学习，有一份实习经历！！，实习海投大厂，有大厂实习经验非常吃香！
  • 对于学历一般的同学跟我一样，大家不要灰心，如果有考研想法建议考研提升学历，反之可以着重自己的技术，基础打扎实了，但凡收到面试机会就把握住了！
  • 心态要好！！面试过程可能被虐，但不要灰心，不断反思问题在哪，基础不行补基础，源码不行补源码，算法不行补算法，总之大家需要在面试过程中不断进步！

最后放个offer比较吧，你会选择那个呢？ 1.地平线 - 南京 - （自动驾驶 芯片） 总包 21-27，大小周，600政府补贴/月，租房1000-1500均价 2.好未来 - 北京 - （在线教育） 总包 30，双休，10股票四年发，租房均价3000

最后希望大家在春招都能找到心意的offer上岸呀！！！

avatar
文章
阅读
粉丝