2021届前端面经分享 | 字节跳动、阿里巴巴、腾讯、美团

2,409 阅读11分钟

前言

先自我介绍一下: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视频面,这一面也是我做过最多的算法题的一面了。

算法题

  1. 蛇形填数
  2. 括号匹配
  3. 括号生成
  4. 两数之和
  5. 单词反转
  6. 最长前缀

大部份秒解,有些题目只需要讲思路,有几个要写出来。最后还要分析时间复杂度。

基础

  • 手动实现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的情况,所以还是得问清楚再下手。

经验

总结了一些经验,想进大厂的同学可以参考一下啦~

  1. 至少掌握一个框架,并且有一两个项目支撑,最好熟悉关键源码(背面经也成,但不推荐)
  2. 项目经验很重要,3到4个比较合适,简历重点突出亮点和难点,如果没有特别好的项目,实现一些小demo,要能够体现你是钻研过这个技术难点的
  3. 计网重点看http的各种请求头、缓存、状态码,https的握手过程,越详细越好,包括加密算法的原理,DNS解析,tcp都比较少问到,但至少熟悉三次握手四次挥手过程,操作系统看死锁、进程调度算法、页面置换算法
  4. 前端基础要过关,面多了这一块一般没什么问题,多看面经题,都是套路来的
  5. 算法刷透《剑指offer》,做到简单题秒解,10min内bugfree,leetcode写到200题左右基本没问题了
  6. 深入了解一些加分点,比如v8的gc过程,迭代器的效率比较

今天先这么多吧,后面还会补充~