前言
先自我介绍一下:2021届双非一本前端菜鸡,面过的公司有:美团到店、阿里钉钉、阿里淘系、字节跳动、cvte、虎牙直播、腾讯,其中cvte、虎牙直播、淘系挂一面,钉钉走完流程还在等消息,4月中旬收获腾讯、美团offer,最后选择加入腾讯。本文除了一些面经外,文末有一些自己的总结和经验,可以参考一下。
面经汇总
以下面经整理过,一些在校实践的和项目的内容删减了。
阿里淘系技术部一面
阿里巴巴淘系技术部提前批一面,1h左右的电话面,挂了。
淘系给我的感觉是问得很详细,尤其是项目(阿里系很看重项目)面试官很nice,很有耐心,但要求也很高,给到我的评价是基础不错,但手机端开发不是很熟悉,可能比较看重这一块,最后没给我过。
项目
- 简单介绍一个项目
- 在做手机端有没有遇到bug,怎么解决的,每一个问得很细
- 说一个项目的技术难点
- 项目中某个动画怎么做的,为什么要这么做,为什么用CSS3动画来做
- rem的原理,PC端和手机端CSS是同一份吗?
- 怎么实现一个手机端轮播图,滑动跟随,放开翻页
前端基础
- this的指向怎么判断,有哪些场景
- apply、call、bind的区别
- 闭包的原理,以下case判断是不是闭包(注意:没有调用函数),要说明白为什么
function foo() {
let a;
return function() {
console.log(a);
}
}
- 事件冒泡、事件捕获的原理,了解自定义事件吗
- 箭头函数的特点
vue
- 组件通信的方式(答三个不满意,越多越好)
- vue数据劫持原理
其他
- 翻我博客,看到个浏览器缓存,问知道的状态码
- 翻我博客,有webpack,问常用的loader
- NodeJS跟传统的后端语言的差别
- 小程序的原理,view和model怎么交互的,小程序这类产品跟传统web有什么区别
- 前端前沿技术,问我知不知道Facebook/GraphQL
- 有没有关注移动端的一些技术点
字节跳动一面
字节跳动广州效率工程一面,1h左右的视频面,通过。
个人字节跳动比较看重基础和算法能力,对每一个知识点都挖掘得很深入,比如我提到了v8的GC是在主线程空闲的时候进行多次GC,面试官就会问怎样定义主线程空闲,比如v8的新生代内存大小是多少。
项目
- 怎样实现断点续传、怎样实现大文件上传
- localStorage、cookie的区别
- rem是什么,实现等比缩放还有哪些方法
- 怎么样限制访问cookie,httponly作用是什么
- xss是什么,csrf是什么,怎么样解决,浏览器有哪些比较危险的代码
- 同源策略是什么,怎么样解决跨域,cors说一下
- option请求的作用是什么,为什么要发option,什么情况下发
前端基础
- 事件委托、事件冒泡描述一下
- 事件委托的优点
- 什么情况下会内存泄漏
- v8是怎样GC的
- 说一下GC的过程
- 为什么使用增量标记法
- 新生代的内存大小
以下代码会打印什么
<div class="outer">
<div class="inner"></div>
</div>
funciton click(e) {
console.log(e.target.className);
console.log(e.currentTarget.className);
}
document.querySeletor('.outter').addEventListener('click', click);
inner.addEventListener('click', click);
// 1. 点击inner打印顺序
// 现在呢
funciton click(e) {
console.log(e.target.className);
console.log(e.currentTarget.className);
setTimeout(()=>{console.log('timeout')});
}
// 现在呢
funciton click(e) {
console.log(e.target.className);
console.log(e.currentTarget.className);
setTimeout(()=>{console.log('timeout')});
Promise(r=>{
console.log('promise');
r();
}).then(()=>{
console.log('resolve');
})
}
// 现在呢
funciton click(e) {
console.log(e.target.className);
console.log(e.currentTarget.className);
setTimeout(()=>{console.log('timeout')});
requestAnimationFrame(()=>{console.log('Animation')});
Promise(r=>{
console.log('promise');
r();
}).then(()=>{
console.log('resolve');
})
}
- 一道动态规划算法题,提示下勉强写出也给过了。
字节跳动二面
二面组长,比较轻松,简单的技术题+一道mid算法,40min左右的视频面,过了
- 问了一下项目
- 输入url到网页显示会发生什么
- 一道算法题:求二叉树的最大路径和
字节跳动三面
三面总监,30min左右的视频面,狂怼项目,没准备好,卒了
- 一个一个项目抠细节,解释不清基本凉了
- React和Vue在设计模式上有什么不同
- Vue的生命周期
- 一道开放题:x层楼、y层电梯,怎么调度效率最高
字节跳动还是比较可惜的,offer几乎已经到手了,第三面自己没有准备好。总体感觉难度还好,算法给我做的是两道mid难度的题,面试官会一直引导你去完成,很有耐心,我没有做到bugfree,总体代码和思想正确也放我过了。
阿里巴巴钉钉一面
先说结果,2轮技术+1轮交叉+1轮hr,目前面完了hr,但等了两周没消息,据说阿里今年只收评级A的,所以我应该是凉了。
感觉我比较幸运吧,钉钉跟淘系相比简单了很多,一面视频聊天半小时,做了两个简单的题目
- 实现一个数组去重
- 实现一个函数防抖
阿里巴巴钉钉二面
1h视频面,主要问项目,从项目开始切入去问一些知识点,其他基础基本不问。
阿里巴巴钉钉交叉面
30min电话面,是个淘宝的P9,也是问项目,问了半小时就给我过了。
阿里系给我的感觉是比较看重对项目的整体性把握、工程思维、对产品的理解这些方面,不过在我面钉钉应该是比较奇葩的,因为几乎没咋问我技术。
腾讯一面
我面腾讯应该是比较特殊的了,1轮技术直接到面委会+hr面,hr面也很有意思,最后再补了一轮总监,整个过程简直是坐过山车一样,最后在腾讯提前批结束前两天拿到了offer。
1h30min视频面,这一面也是我做过最多的算法题的一面了。
算法题
- 蛇形填数
- 括号匹配
- 括号生成
- 两数之和
- 单词反转
- 最长前缀
大部份秒解,有些题目只需要讲思路,有几个要写出来。最后还要分析时间复杂度。
基础
- 手动实现Promise的思路
- 如何实现一个中间适应,两边固定的布局
- 清除浮动的方式
- 用ES6写一个函数去判断班级中的学生是否及格
- vue双向绑定原理
- https握手原理
- 上传文件的实现(从标签说起)
腾讯二面
30min电话面,这一面是面委会,抽中一个微信支付的大哥,全程问项目,十分冷漠没什么反馈,我还以为凉透了,最后也给我过了。
- 输入url到显示经历的过程,越详细越好
- 项目的难点,怎么解决的。(感觉他不感兴趣,只能硬着头皮讲)
- 职业规划
腾讯总监面
1h视频面,这一面最惨,项目被问得很深,还被问了很多非前端的东西,包括分布式、数据库、安卓啥的,最后还被教育了一番,面完直接自闭两天。
- 说一个具有代表性的项目
- 项目的难点、bug,怎么解决的(提了一个,他说这个很难吗。。)
- 我提到浏览器会有请求并发数量的限制,他不信,开共享屏幕证明给他看(写了个node后台证明,吓出一身冷汗)
- 从输入url到页面实现发生了什么,越详细越好(DNS解析、TCP三次握手、四次挥手、浏览器解析DOM)
- 为什么要三次握手、为什么要四次挥手
- https握手过程
- Vue源码看了哪些部分
- 非关系型数据库和关系型数据库的区别
- 小程序的原理,双线程怎么通信的
- 小程序云开发有不好用的地方吗
- 了解webview和客户端的通信吗
- 了解分布式吗?了解python、go、java吗?有考虑写后台安卓吗?如果让你写后台,你可以吗?
- 职业规划,怎么理解前端的
- 假如有一个新生宿舍分配系统,你怎么选数据库,非关系型还是关系型,为什么,分配算法怎么设计
美团点评一面
美团点评到店事业群一面,1h电话面,通过。
很多常规基础问题,我忘了记录,比较深刻的有:
微信小程序
- 生命周期
- navigatorTo和redictTo的区别
- 页面间通信的方式
Vue
- keep-alive组件
- vue-router的钩子函数
- 场景题:怎么样可以使左边栏的背景颜色根据页面切换而改变
- 组件通信的方式
数据库三大范式、产生死锁的原因和解决方法
美团点评二面
1h视频面,通过
这场面试问的东西太多了,前端基础几乎问了个遍,也没记下来。
- 箭头函数的不同点
- 怎么样捕获页面所有的错误,页面哪些错误捕获不到,怎么样捕获一个资源加载错误(前端监控这块的)
- 如何把wx.request封装为一个promise
编码题
- 手写一个继承 要求可以使用 instanceof 判断
function Parent()
function Children()
- 以下代码返回什么
if( !('a' in window) ){
var a = 10;
}
console.log(a);
- 以下代码报什么类型的错
obj = {
a:1
}
obj = null;
obj.a;
- 合并两个有序数组(秒解,他说换个难的,后悔啊。)
- 根据要求编码(就换了这题)
var menus = [
{
url: ’/’,
children:[],
id:1,
parent_id:0
},{
url:’/ad’,
children:[
{
url:’/ad/product’,
parent_id:2,
id:3,
children:[]
},
{
url:’/ad/review’,
parent_id:2,
id:4,
children:[
{
url:’/ad/review/guest’,
parent_id:4,
id:5,
children:[]
}
]
}
],
id:2,
parent_id:0
}
]
var url = ‘/ad/product’
function find(menus, url){
// 返回url 对应的 根节点的 id
}
美团点评三面
1h的视频面,做了三个题,虽然都有瑕疵,但最后给过了,也拿到了offer。
- 实现一个升序排序
- 实现一个观察者模式(on、off、once)
function EventTarget() {
this.events = {
}
}
EventTarget.prototype = {
constructor: EventTarget,
on: function(event, cb) {
if (!this.events[event]) {
this.events[event] = []
}
this.events[event].push(cb);
},
off: function(event, cb) {
if (this.events[event]) {
this.events[event].forEach((item, index) => {
if (item === cb) {
this.events[event].splice(index, 1);
}
})
}
},
emit: function(event) {
if (this.events[event]) {
let cache = this.events[event].slice(); // 做一个缓存,防止出现引用问题
cache.forEach(cb => {
cb.call();
})
}
},
once: function(event, cb) {
let wrap = function() {
cb.call();
this.off(event, wrap)
}
this.on(event, wrap)
}
}
// test case
let event = new EventTarget;
event.on('click', function a() {
console.log(1);
});
function foo1(){
console.log(2);
event.off('click', foo1);
}
event.on('click', foo1);
event.on('click', function b() {
console.log(3);
});
event.emit('click')
这题的case很有意思,可以研究一下如果不做一层缓存会发生什么问题。
- 编程题
// 编写一个算法解析以下符号,转换为json树的结构
let str = `<xml><div><p><a/></p><p></p></div></xml>`
// 以下是我的答案
function Node(tag) {
return {
tag,
parent: null,
children:[]
}
}
function foo3(str) {
str = str.substring(1, str.length - 1);
let arr = str.split('><');
console.log(arr);
let reg = /\//;
let root;
let currentParent;
let stack = [];
for (let tag of arr) {
if (!reg.test(tag)) {
let el = new Node(tag);
if (!root) {
root = el;
}
stack.push(el);
} else {
let el = stack.pop();
if (el === root) {
break;
} else {
currentParent = stack[stack.length - 1];
el.parent = currentParent;
}
currentParent.children.push(el);
}
}
return root;
}
感觉美团整体难度还可以,有些算法题我没写出来也拿了offer,主要是他们的面试官都是徒手出题,会出现测试用例有bug的情况,所以还是得问清楚再下手。
经验
总结了一些经验,想进大厂的同学可以参考一下啦~
- 至少掌握一个框架,并且有一两个项目支撑,最好熟悉关键源码(背面经也成,但不推荐)
- 项目经验很重要,3到4个比较合适,简历重点突出亮点和难点,如果没有特别好的项目,实现一些小demo,要能够体现你是钻研过这个技术难点的
- 计网重点看http的各种请求头、缓存、状态码,https的握手过程,越详细越好,包括加密算法的原理,DNS解析,tcp都比较少问到,但至少熟悉三次握手四次挥手过程,操作系统看死锁、进程调度算法、页面置换算法
- 前端基础要过关,面多了这一块一般没什么问题,多看面经题,都是套路来的
- 算法刷透《剑指offer》,做到简单题秒解,10min内bugfree,leetcode写到200题左右基本没问题了
- 深入了解一些加分点,比如v8的gc过程,迭代器的效率比较
今天先这么多吧,后面还会补充~