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

前言

先自我介绍一下：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过程，迭代器的效率比较

今天先这么多吧，后面还会补充～