[面经] 5年前端 – 历时1个月收获7个offer🔥-六虎

前语

pie title 面试成果计算
"Offer" : 7
"一面挂" : 2
"二面挂" : 1
"薪资没谈拢" : 2

省流：终究拿到了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吗?
webscoket的衔接原理
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 三列等宽布局怎样完成? 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呢?
postion特色大约讲一下, 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个恳求里再找一个放进恳求池里, 如此循环。

UMU (offer)

前双面都是长途, 终面去了公司现场。到了之后先做了一份测试题, 大约便是考察根本认知才能的。完过后CTO来面试, 直接在现场小黑板上写题。大佬对各种技能都能侃侃而谈, 的确很厉害, 不过传闻周六或许要加班, 而且忧虑稳定性, 就没挑选这里。

一面

除了项目, 根本都是问的日常开发相关的东西, 比较实在

node.js怎样调试
charles map local/map remote
chrome devtool 怎样查看内存情况

二面

koa洋葱模型
中间件的反常处理是怎样做的？
在没有async await 的时分, koa是怎样完成的洋葱模型?
body-parser 中间件了解过吗
假如浏览器端用post接口上传图片和一些其他字段, header里会有什么? koa里假如不必body-parser，应该怎样解析?
webscoket的衔接原理
https是怎样确保安全的? 是怎样确保不被中间人攻击的?

终面

【代码题】 给一个字符串, 找到第一个不重复的字符

ababcbdsa
abcdefg

时间复杂度是多少?
除了给的两个用例, 还能想到什么用例来测试一下?

网易

一面直接挂掉, 代码题全体写的杂乱无章, 挂掉理所应当…

一面

你觉得js里this的规划怎样样? 有没有什么缺点啥的
vue的响应式开发比命令式有什么优点
装修器
vuex
generator 是怎样做到中断和恢复的
function 和箭头函数的界说有什么差异? 导致了在this指向这块体现不同
导致js里this指向紊乱的原因是什么?
浏览器的工作循环
宏任务和微任务的区分是为了做什么? 优先级?

【代码题】 完成compose函数, 相似于koa的中间件洋葱模型

// 题目需求
let middleware = []
middleware.push((next) => {
    console.log(1)
    next()
    console.log(1.1)
})
middleware.push((next) => {
    console.log(2)
    next()
    console.log(2.1)
})
middleware.push((next) => {
    console.log(3)
    next()
    console.log(3.1)
})
let fn = compose(middleware)
fn()
/*
1
2
3
3.1
2.1
1.1
*/
//完成compose函数
function compose(middlewares) {
}

【代码题】 遇到退格字符就删去前面的字符, 遇到两个退格就删去两个字符

// 比较含有退格的字符串，"<-"代表退格键，"<"和"-"均为正常字符
// 输入："a<-b<-", "c<-d<-"，成果：true，解说：都为""
// 输入："<-<-ab<-", "<-<-<-<-a"，成果：true，解说：都为"a"
// 输入："<-<ab<-c", "<<-<a<-<-c"，成果：false，解说："<ac" !== "c"
function fn(str1, str2) {
}

快手 (offer)

全体面试的感觉很专业, 面试态度也很仔细, 考察的比较全面, 不过比较蛋疼的是HR面完毕后拖了好久, 我Shopee、腾讯、字节口头offer都拿到了, 快手终究才给的口头offer, 也或许是想对比一下其他家的价格吧。

一面

小程序的架构? 双线程别离做的什么工作?
为什么小程序里拿不到dom相关的api
代码输出题

console.log(typeof typeof typeof null);
console.log(typeof console.log(1));

this指向题

var name = '123';
var obj = {
	name: '456',
	print: function() {
		function a() {
			console.log(this.name);
		}
		a();
	}
}
obj.print();

【代码题】 完成一个函数, 能够间隔输出

function createRepeat(fn, repeat, interval) {}
const fn = createRepeat(console.log, 3, 4);
fn('helloWorld'); // 每4秒输出一次helloWorld, 输出3次

【代码题】 删去链表的一个节点

function (head, node) {}

【代码题】 完成LRU算法

class LRU {
	get(key) {
	}
	set(key, value) {
	}
}

二面

Promise then 第二个参数和catch的差异是什么?
Promise finally 怎样完成的
效果域链
Electron架构
微前端
webpack5 模块联邦
Webworker

三面

没有记载, 应该都是问的项目

高德

一面直接挂掉, 面试官一直怼着各种api考察记忆力, 都是一些十分偏十分不常用的api。

比方css有没有用过xx特色, 是做什么的?
Promise有个xx办法, 你知道是做什么的吗?

终究便是挂在了css的各种特色背诵上, 麻了, 面试的时分让候选人从头背这些api真的有意义吗?

一面

Symbol
useRef / ref / forwardsRef 的差异是什么?
useEffect的第二个参数, 传空数组和传依靠数组有什么差异?
- 假如return 了一个函数, 传空数组的话是在什么时分履行? 传依靠数组的时分是在什么时分履行?
flex布局
ES5承继
ES6承继, 静态办法/特色和实例办法/特色是什么时分挂载的
Promise各种api
各种css特色

Shopee (offer)

面试比较痛快, 总共双面。一下午直接搞定, 一面完毕后直接约了一个小时后二面, 二面完毕后直接约了一个小时后的HR面。但是终究谈薪的时分HR也是比较磨叽, 一直说要等快手或许字节的价格出来, 他们才会给价格, 说是这样才更有竞争力。

一面

各种缓存的优先级, memory disk http2 push?
小程序为什么会有两个线程? 怎样规划?
xss? 怎样防范?
日志假如大量日志堆在内存里怎样办?

【代码题】 深拷贝

const deepClone = (obj, m) => {
};
需求手写一个深拷贝函数deepClone，输入能够是恣意JS数据类型

【代码题】 二叉树光照，输出能被光照到的节点, dfs能否处理?

输入: [1,2,3,null,5,null,4]
输出: [1,3,4]
输入: []
输出: []
/**
 * @param {TreeNode} root
 * @return {number[]}
 */
function exposedElement(root) {
};

【代码题】 输出次序题

setTimeout(function () {
  console.log(1);
}, 100);
new Promise(function (resolve) {
  console.log(2);
  resolve();
  console.log(3);
}).then(function () {
  console.log(4);
  new Promise((resove, reject) => {
    console.log(5);
    setTimeout(() =>  {
      console.log(6);
    }, 10);
  })
});
console.log(7);
console.log(8);

【代码题】 效果域

var a=3;
 function c(){
    alert(a);
 }
 (function(){
  var a=4;
  c();
 })();

【代码题】 输出题

function Foo(){
    Foo.a = function(){
        console.log(1);
    }
    this.a = function(){
        console.log(2)
    }
}
Foo.prototype.a = function(){
    console.log(3);
}
Foo.a = function(){
    console.log(4);
}
Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

终面

错误捕捉
前端稳定性监控
前端内存处理

【代码题】 很多恳求, 耗时不同, 依照次序输出, 尽或许确保快, 写一个函数.

const promiseList = [
	new Promise((resolve) => {
		setTimeout(resolve, 1000)
	}),
	new Promise((resolve) => {
		setTimeout(resolve, 1000)
	}),
	new Promise((resolve) => {
		setTimeout(resolve, 1000)
	})
]
fn(promiseList);

【代码题】 一个数组的全排列

输入一个数组 arr = [1,2,3]
输出全排列
[[1], [2], [3], [1, 2], [1, 3], ...., [1,2,3], [1,2,4] ....]

腾讯 (offer)

腾讯的全体流程是最长的, 总共面了5次, 全体面试难度倒不高, 只有前三轮是正派问技能问题, 后边更像是在谈天聊项目。

由于其时全体其他offer都快到ddl了, 就赶紧催hr给个数字, 终究薪资不及预期就没去了。

一面

一般函数和箭头函数的this指向问题

const obj = {
	fn1: () => console.log(this),
	fn2: function() {console.log(this)}
}
obj.fn1();
obj.fn2();
const x = new obj.fn1();
const y = new obj.fn2();

promise相关的特性
vue父子组件, 生命周期履行次序 created mounted
vue3添加了哪些新特性?
xss 的特色以及怎样防范?
Http 2.0和http3.0对比之前的版别, 别离做了哪些改善?
HTTP 3.0根据udp的话, 怎样确保牢靠的传输?
TCP和UDP最大的差异是什么?
CSP除了能避免加载外域脚本, 还能做什么?
typescript is这个关键字是做什么呢?

【代码题】 多叉树, 获取每一层的节点之和

function layerSum(root) {
}
const res = layerSum({
    value: 2,
    children: [
        { value: 6, children: [ { value: 1 } ] },
        { value: 3, children: [ { value: 2 }, { value: 3 }, { value: 4 } ] },
        { value: 5, children: [ { value: 7 }, { value: 8 } ] }
    ]
});
console.log(res);

二面

没记载, 应该是和前面遇到的面试题重复了

【代码题】 虚拟dom转实在dom

const vnode = {
    tag: 'DIV',
    attrs: {
        id: 'app'
    },
    children: [{
            tag: 'SPAN',
            children: [{
                tag: 'A',
                children: []
            }]
        },
        {
            tag: 'SPAN',
            children: [{
                    tag: 'A',
                    children: []
                },
                {
                    tag: 'A',
                    children: []
                }
            ]
        }
    ]
}
function render(vnode) {
}

三面

前端安全 xss之类的
Https中间人攻击
前端History路由配置 nginx

【代码题】 有序数组原地去重

四面(gm?忘记了)

怎样估算一个城市中的井盖数量

终面

都是项目

字节 (offer)

之前传闻字节各种hard, 给我吓惨了, 不过或许是运气好, 碰到的题都很简略。

一面

【代码题】 二叉树层序遍历, 每层的节点放到一个数组里

给定一个二叉树，回来该二叉树层序遍历的成果，（从左到右，一层一层地遍历）
例如：
给定的二叉树是{3,9,20,#,#,15,7},
该二叉树层序遍历的成果是 [ [3], [9,20], [15,7]
]

【代码题】 完成一个函数, fetchWithRetry 会自动重试3次，恣意一次成功直接回来

【代码题】 链表中环的进口节点

关于一个给定的链表，回来环的进口节点，假如没有环，回来null

二面

截图怎样完成
qps达到峰值了，怎样去优化
谷歌图片, 假如要完成一个相似的系统或许页面, 你会怎样做?
最小的k个数
节省防抖
sleep函数
js超越Number最大值的数怎样处理?
64个运动员, 8个跑道, 假如要选出前四名, 至少跑几次?
前端路由 a -> b -> c这样前进, 也能够回来 c -> b -> a, 用什么数据结构来存比较高效
node 服务治理

【代码题】 多叉树指定层节点的个数

三面

【代码题】 叠词的数量

Input: 'abcdaaabbccccdddefgaaa'
Output: 4
1. 输出叠词的数量
2. 输出去重叠词的数量
3. 用正则完成

写在后边

最近的全体行情好像更差了, Shopee也传出了很多毁offer的工作, 其时幸亏没去…

不过劝想看机会的大伙还是骑驴找马, 能够先简略试试水, 看看行情究竟怎样, 不要只听网友怎样说。

终究愿我们变成offer收割机, 每个人都能拿到自己心仪的offer。

[面经] 5年前端 – 历时1个月收获7个offer🔥

前语

滴滴

一面

二面

终面

58 (offer)

一面

二面

三面

穿插面

终面

金山

一面

终面

便利蜂 (offer)

一面

二面

三面

小红书

一面

二面

UMU (offer)

一面

二面

终面

网易

一面

快手 (offer)

一面

二面

三面

高德

一面

Shopee (offer)

一面

终面

腾讯 (offer)

一面

二面

三面

四面(gm?忘记了)

终面

字节 (offer)

一面

二面

三面

写在后边

相关文章

云原生爱好者周刊：使用 Cilium 和 Grafana 实现无侵入可观测性

如此互联网 何来好软件

从组件按需引入深入前端打包构建

如何判断 ScrollView、List 是否正在滚动中

作者信息

如此互联网何来好软件