最新【面试题】5年前端 - 历时1个月收获7个offer_5年前端面试题，2024前端面经_五年前端经验 面试

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

    name: '部门G',
    parentId: 2
},
{
    id: 8,
    name: '部门H',
    parentId: 4
}
1
2
3
4
5
6
7
8

]
复制代码

#### 终面


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



1
2
3
4
5
6
7
8

“ababac” —— “ababa”
“aaabbbcceeff” —— “aaabbb”
复制代码

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



1
2
3
4
5

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

### 58 (offer)


整体面试比较顺利, 就是没想到三轮远程面试后, 最终还去现场经历了一次交叉面和业务负责人面试, 不过HR确实是很热情也很专业。不过最终选择了其他offer, 甚至有点感觉对不起大家的热情。


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


#### 一面


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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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
2
3
4
5

// 比如这个函数输入一个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这三者的关联和区别是什么?


**`【场景设计】`** 设计一个转盘组件, 需要考虑什么, 需要和业务方协调好哪些技术细节? 前端如何防刷


#### 三面


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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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是如何安全通信的?
* 前端性能优化做了哪些工作?


**`【代码题】`** 不定长二维数组的全排列



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// 输入 [[‘A’, ‘B’, …], [1, 2], [‘a’, ‘b’], …]

// 输出 [‘A1a’, ‘A1b’, …]
复制代码

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



1
2
3
4
5

pre = ‘abcde123’
now = ‘1abc123’

a前面插入了1, c后面删除了de
复制代码

#### 终面


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


### 便利蜂 (offer)


整体面试比较顺利, 三位面试官也都比较健谈, 最终给了一个很高的总包。不过感觉面试题太简单, 给的钱又多, 有点担心就选择了其他offer。


#### 一面


纯聊项目


#### 二面


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


#### 三面


**`【代码题】`** sleep函数


**`【代码题】`** 节流防抖


### 小红书


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


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


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


#### 一面


* 输出什么? 为什么?



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

var b = 10;
(function b(){
b = 20;
console.log(b);
})();
复制代码

* 代码输出顺序题



1
2
3
4
5

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是如何保证安全的? 是如何保证不被中间人攻击的?


#### 终面


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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

ababcbdsa
abcdefg
复制代码

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


### 网易


一面直接挂掉, 代码题整体写的乱七八糟, 挂掉理所应当...


#### 一面


* 你觉得js里this的设计怎么样? 有没有什么缺点啥的
* vue的响应式开发比命令式有什么好处
* 装饰器
* vuex
* generator 是如何做到中断和恢复的
* function 和 箭头函数的定义有什么区别? 导致了在this指向这块表现不同
* 导致js里this指向混乱的原因是什么?
* 浏览器的事件循环
* 宏任务和微任务的区分是为了做什么? 优先级?


**`【代码题】`** 实现compose函数, 类似于koa的中间件洋葱模型



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 题目需求

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) {

}

复制代码

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



1
2
3
4
5

// 比较含有退格的字符串，“<-“代表退格键，”<“和”-“均为正常字符
// 输入：“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
* 代码输出题



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

console.log(typeof typeof typeof null);
console.log(typeof console.log(1));
复制代码

* this指向题



1
2
3
4
5

var name = ‘123’;

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

obj.print();
复制代码

**`【代码题】`** 实现一个函数, 可以间隔输出



1
2
3
4
5

function createRepeat(fn, repeat, interval) {}

const fn = createRepeat(console.log, 3, 4);

fn(‘helloWorld’); // 每4秒输出一次helloWorld, 输出3次
复制代码

**`【代码题】`** 删除链表的一个节点



1
2
3
4
5

function (head, node) {}
复制代码

**`【代码题】`** 实现LRU算法



1
2
3
4
5

class LRU {
get(key) {
}

set(key, value) {
}
1
2

}
复制代码

#### 二面


* 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? 如何防范?
* 日志 如果大量日志堆在内存里怎么办?


**`【代码题】`** 深拷贝



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

const deepClone = (obj, m) => {

};

需要手写一个深拷贝函数deepClone，输入可以是任意JS数据类型
复制代码

**`【代码题】`** 二叉树光照，输出能被光照到的节点, dfs能否解决?



1
2
3
4
5

输入: [1,2,3,null,5,null,4]
输出: [1,3,4]

输入: []
输出: []

/**

• @param {TreeNode} root
• @return {number[]}
  */
  function exposedElement(root) {

};

复制代码

![](https://img-blog.csdnimg.cn/img_convert/b0f292f3fa85750ae1e1f337dc8ba905.webp?x-oss-process=image/format,png)



**对象篇**

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWIxMTdmNzMyNDJlZjAyMDM?x-oss-process=image/format,png)

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWU5ZGY5NGRhODZhZGZjNjY?x-oss-process=image/format,png)

**模块化编程-自研模块加载器**



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LWUyNWEzOGRhNTU1NTBmOGY?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MTY4MzU2LTQ5MGM2MTlhOTI5YjY3Y2U?x-oss-process=image/format,png)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21