Hello，大家好，我是雷布斯。

今天想给大家分享一篇社招的面经，作者拿到了 7 家公司的 offer，其中包括快手、腾讯、字节等大厂。

作者在面试前并没有太多的准备，面试过程中不断复盘，最后收获了心仪的 offer，这种复盘的经验也值得大家学习。

由于原文比较长，我们分成两篇进行分享。

前言

面试结果统计：

最终拿到了58、UMU、便利蜂、虾皮、快手、腾讯、字节的offer。

金三银四面试的，这次整体面试通过率还挺高的，面试前没有太多准备，基本上是面试过程中不断复盘，整理面试遇到的问题，到最后面几家自己心仪的公司，其实就会发现大家问的问题都差不多。

时间过去比较久了，最近得空了稍微整理一下发出来(不过有些比较重复的问题我当时没有记录，现在也记不起来了)

滴滴

第一家就面的滴滴，啥都没准备，中间很多没答好，但是意外的到了HR面，可能由于面试表现并不好，所以给的薪资不及预期。

其中印象比较深刻的是三面面试官：

面试官：问A入职后和上级意见不合应该怎么处理

我：我官话回答了半天说要考虑当时的背景、双方的观点正确与否再考虑，最终选择最有利于业务发展的一方

面试官：说这些都没用，如果最终上司的方案确实不如A的，但上司就是坚持自己的意见怎么办?

我：那我不知道，请问您有什么看法

面试官：不招A就行了，面试阶段就不能让他通过

一面

• 闭包是什么? 闭包的用途?
• 简述事件循环原理
• 虚拟dom是什么? 原理? 优缺点?
• vue 和 react 在虚拟dom的diff上，做了哪些改进使得速度很快?
• vue 和 react 里的key的作用是什么? 为什么不能用Index？用了会怎样? 如果不加key会怎样?
• vue 双向绑定的原理是什么?
• vue 的keep-alive的作用是什么？怎么实现的？如何刷新的?
• vue 是怎么解析template的? template会变成什么?
• 如何解析指令? 模板变量? html标签
• 用过vue 的render吗? render和template有什么关系
• 【代码题】 实现一个节流函数?如果想要最后一次必须执行的话怎么实现?
• 【代码题】 实现一个批量请求函数, 能够限制并发量?

二面

【代码题】 数组转树结构

const arr = [{
        id: 2,
        name: '部门B',
        parentId: 0
    },
    {
        id: 3,
        name: '部门C',
        parentId: 1
    },
    {
        id: 1,
        name: '部门A',
        parentId: 2
    },
    {
        id: 4,
        name: '部门D',
        parentId: 1
    },
    {
        id: 5,
        name: '部门E',
        parentId: 2
    },
    {
        id: 6,
        name: '部门F',
        parentId: 3
    },
    {
        id: 7,
        name: '部门G',
        parentId: 2
    },
    {
        id: 8,
        name: '部门H',
        parentId: 4
    }
]

终面

【代码题】 去除字符串中出现次数最少的字符，不改变原字符串的顺序。

“ababac” —— “ababa”
“aaabbbcceeff” —— “aaabbb”

【代码题】 写出一个函数trans，将数字转换成汉语的输出，输入为不超过10000亿的数字。

trans(123456) —— 十二万三千四百五十六
trans（100010001）—— 一亿零一万零一

58 (offer)

整体面试比较顺利，就是没想到三轮远程面试后，最终还去现场经历了一次交叉面和业务负责人面试，不过HR确实是很热情也很专业。

不过最终选择了其他offer，甚至有点感觉对不起大家的热情。

一面二面三面都很不错，交叉面和业务负责人面试有点水，就随便问问。

一面

• 对前端工程化的理解
• 前端性能优化都做了哪些工作
• Nodejs 异步IO模型
• libuv
• 设计模式
• 微前端
• 节流和防抖
• react有自己封装一些自定义hooks吗? vue有自己封装一些指令吗
• vue 向 react迁移是怎么做的? 怎么保证兼容的
• vue的双向绑定原理
• Node的日志和负载均衡怎么做的
• 那前后端的分工是怎样的？哪些后端做哪些node做
• 给出代码的输出顺序

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
    console.log('promise2')
}).then(function () {
    console.log('promise3');
});
console.log('script end');

• 【代码题】 给几个数组, 可以通过数值找到对应的数组名称

// 比如这个函数输入一个1，那么要求函数返回A
const A = [1,2,3];
const B = [4,5,6];
const C = [7,8,9];

function test(num) {

}

二面

• 了解过vue3吗?
• websocket的连接原理
• react生命周期
• redux原理
• vue 父子组件的通信方式
• async await的原理是什么?
• async/await, generator, promise这三者的关联和区别是什么?
• 【场景设计】 设计一个转盘组件, 需要考虑什么, 需要和业务方协调好哪些技术细节? 前端如何防刷

三面

• 【代码题】 数组转树, 写完后问如果要在树中新增节点或者删除节点, 函数应该怎么扩展

const arr = [{
        id: 2,
        name: '部门B',
        parentId: 0
    },
    {
        id: 3,
        name: '部门C',
        parentId: 1
    },
    {
        id: 1,
        name: '部门A',
        parentId: 2
    },
    {
        id: 4,
        name: '部门D',
        parentId: 1
    },
    {
        id: 5,
        name: '部门E',
        parentId: 2
    },
    {
        id: 6,
        name: '部门F',
        parentId: 3
    },
    {
        id: 7,
        name: '部门G',
        parentId: 2
    },
    {
        id: 8,
        name: '部门H',
        parentId: 4
    }
]

交叉面

• 虚拟列表怎么实现?
• 做过哪些性能优化?

终面

• 都是一些项目相关

金山

一面感觉不错，面试官非常专业，态度也和蔼可亲。

但终面的大哥比较盛气凌人，疯狂PUA，聊完后让我降薪，就直接告辞了。

一面

• react和vue在技术层面的区别
• 常用的hook都有哪些?
• 用hook都遇到过哪些坑?
• 了解useReducer吗
• 组件外侧let a 1 组件内侧点击事件更改a，渲染的a会发生改变吗？如果let a放在组件内部，有什么变化吗？和useState有什么区别？
• 了解过vue3吗?
• Node是怎么部署的? pm2守护进程的原理?
• Node开启子进程的方法有哪些?
• 进程间如何通信?
• css 三列等宽布局如何实现? CSS中的 “flex:1;” 是什么意思？分别有哪些属性?
• 前端安全都了解哪些? xss csrf
• csp是为了解决什么问题的?
• https是如何安全通信的?
• 前端性能优化做了哪些工作?
• 【代码题】 不定长二维数组的全排列

// 输入 [['A', 'B', ...], [1, 2], ['a', 'b'], ...]

// 输出 ['A1a', 'A1b', ....]

• 【代码题】 两个字符串对比, 得出结论都做了什么操作, 比如插入或者删除

pre = 'abcde123'
now = '1abc123'

a前面插入了1, c后面删除了de

终面

• 【场景设计】 大数据列表如何设计平滑滚动和加载，下滑再上滑的操作，上下两个buffer区间如何变化和加载数据。

便利蜂 (offer)

整体面试比较顺利，三位面试官也都比较健谈，最终给了一个很高的总包。

不过感觉面试题太简单，给的钱又多，有点担心就选择了其他offer。

一面

纯聊项目

二面

• js中的闭包
• 解决过的一些线上问题
• 线上监控 对于crashed这种怎么监控? 对于内存持续增长，比如用了15分钟之后才会出现问题怎么监控
• 对于linux熟吗? top命令的属性大概聊一下?
• 301 302 304的区别

三面

• 【代码题】 sleep函数
• 【代码题】 节流防抖

小红书

整体给我的感觉是为了面试而面试，体验极差。

一面面试官只是机械的提问，提问完也不认真听我的回答，上一个问题跟下一个问题根本没有关联性，就像是在对着题库随便选题。

二面面试时好像一直在电脑上聊天，结束后说是会约三面，过了大概两周说是只招leader，我不符合。

一面

• 输出什么? 为什么?

var b = 10;
(function b(){
    b = 20;
    console.log(b);
})();

• 代码输出顺序题

async function async1() {
  console.log('1');
  await async2();
  console.log('2');
}
 
async function async2() {
  console.log('3');
}
 
console.log('4');
 
setTimeout(function() {
    console.log('5');
}, 0);  
 
async1();
 
new Promise(function(resolve) {
    console.log('6');
    resolve();
  }).then(function() {
    console.log('7');
});
 
console.log('8');

• async await的原理是什么?

• async/await, generator, promise这三者的关联和区别是什么?

• BFC是什么? 哪些属性可以构成一个BFC呢?

• position属性大概讲一下, static是什么表现? static在文档流里吗?

• Webpack的原理, plugin loader 热更新等等

• Set和Map

• vue的keep-alive原理以及生命周期

• vuex

• 【代码题】 ES5和ES6的继承? 这两种方式除了写法, 还有其他区别吗?

• 【代码题】 EventEmitter

二面

• 浏览器从输入url开始发生了什么
• react生命周期
• redux的原理
• vue 父子组件的通信方式
• vue的双向绑定原理
• 对vue3的了解? vue3是怎么做的双向绑定?
• 【代码题】 使用Promise实现一个异步流量控制的函数, 比如一共10个请求, 每个请求的快慢不同, 最多同时3个请求发出, 快的一个请求返回后, 就从剩下的7个请求里再找一个放进请求池里, 如此循环。