【面试题】5年前端 - 历时1个月收获7个offer_5年前端面试题

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

};

复制代码

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


* **【代码题】** 输出顺序题

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指向问题



### 最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于**前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等**

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

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

**前端视频资料：**
out(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指向问题

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

[外链图片转存中…(img-Ass1AQDH-1714509463731)]

前端视频资料：