字节前端 面经
第一次投字节，非常紧张...不得不说字节招聘效率还是蛮高的，一二三面都在同一天
一面（1h20min）
面试官是一个非常有气质的小姐姐～but问的问题都很犀利
1. 自我介绍
2. 挖简历，实习做了什么
面试官认为我的实习偏向Analysis，这边解释了一下实习的主要职责，负责了哪些组件的开发
3. 聊项目，项目的难点有哪些
需求理解、响应式布局、组件的拆分和设计
4. 既然聊到响应式布局了，说说如何实现吧
rem、百分比、flex、grid、媒体查询
5. 聊项目，登录页面是怎么做的
说了数据库里存储了用户和口令哈希的映射，前端登陆的时候用token和session做验证
6. token过期了怎么办呢
说了一些token的参数（有效期等），超时后失效需要重定向到登录页面
7. 怎么做重定向的？Vue-router
说了redirect，感觉面试官不是很满意
8. 场景题：用户访问到一个不存在的路由，如何重定向到404 Not Found的页面
场景题是我的死穴，没回答出来
9. 继续聊项目，权限控制怎么做的
真的不记得了，说了后端有用户的访问控制标签，前端读取标签后可以根据不同标签选择性渲染不同的组件。
10. 接着问，那在URL中直接访问Hash呢
beforeEach和next？权限管理这完全不熟悉，挺尴尬的
11. 浏览器输入网址到网页显示发生了什么
DNS -> TCP -> HTTP Request -> HTTP Response -> 渲染
12. GET和POST有什么区别
长度限制、参数是否暴露在URL中、是否会留下缓存和记录。因为说了POST方法更安全，追问了：请求数据也能用POST方法么？
13. 聊聊网络状态码
问了200、301和302（没答出来），302是“该资源原本确实存在，但已经被临时改变了位置”
14. 如果HTTP Response一个state 200的报文代表请求成功，但却在报文内部返回了一个错误的状态码告知错误，应该如何处理
分别代表了系统错误和业务错误，说了条件判断（面试官不满意）
15. 聊项目，分页怎么做的？哪些参数用来分页
忘记复习了...被问得很惨
- 数据的总量
- pageSize（一页展示多少条数据）
- pageNum（一共有多少页）
- currentPage（当前是第几页）
- 当前页的数据集合
16. 追问：分页和后端怎么协调的？如果在请求分页的时候后端又插入进来一些数据呢？顺序怎么控制
晕了，对后端真的不太懂，说自增索引，面试官说increment id删除后会出现断档，那就不知道了...
17. 后端怎么分页了解过吗
应该是用sql实现吧，用count这些...当时也没说得太好
18. 说说Vuex
说了state、mutation、getter、action这些
19. js代码题1：回调地狱和promise
下列代码的输出结果和输出间隔
setTimeout(() => {
console.log(111)
setTimeout(() => {
console.log(222)
setTimeout(() => {
console.log(333)
}, 3000)
}, 2000)
}, 1000)
// after 1s 111
// after 2s 222
// after 3s 333
如何改写，实现相同的功能。突然忘记promise怎么写了，当场没写出来。
// promise + then
new Promise(resovle => {
setTimeout(() => {
console.log(111);
resovle()
}, 1000)
}).then(() => {
return new Promise(resolve => {
setTimeout(() => {
console.log(222)
resolve()
}, 2000)
})
}).then(() => {
return new Promise(resolve => {
setTimeout(() => {
console.log(333)
resolve()
}, 3000)
})
})
// 封装
let setNumber = function(number, delay) {
return new Promise(resolve => {
setTimeout(() => {
console.log(number)
resolve()
}, delay)
})
}
setNumber(111, 1000).then(setNumber(222, 3000)).then(setNumber(333, 6000))
// 封装 + async + await
let setNumber = function (number, delay) {
return new Promise(resolve => {
setTimeout(() => {
console.log(number);
resolve();
}, delay);
});
}
async function sett() {
await setNumber(111, 1000);
await setNumber(222, 2000);
await setNumber(333, 3000);
}
sett();
20. js代码题2: js数据类型
先说说js有哪些数据类型
Undefined、Null、Number、String、Boolean、Object、Symbol、BigInt
哪些类型是不可变类型
说了String，Undefined和Null讨论不可变是无意义的，面试官问还有么（后来想起来基本类型都不可变）
const a = { prop: 1 };
const b = a;
b.prop = 2;
console.log(a === b, a)
// true
// { prop: data2 }
const c = { prop1: 1, prop2: 2 }
const d = { prop2: 2, prop1: 1 }
console.log(c === d)
// false
console.log(JSON.stringfy(c) === JSON.stringfy(d))
// true，面试官说不能确定，因为不同的浏览器会有不同的行为
浅比较和深比较的概念听过么
没听过，只知道深浅拷贝。面试官解释了像上文代码中的c和d在实际开发中其实是一个对象，但是js会判定为不同的对象
手写一个深比较的函数，要求他们能将c和d归为同一个对象
lodash.isEqual()可以实现- 面试官只要求compareDeep(c, d) === true，所以写了个简单无递归版的，只为通过测试
const compareDeep = function(obj1, obj2) {
for (let key in obj1) {
if (!(obj2.hasOwnProperty(key) && obj2[key] === obj2[key])) {
return false;
}
}
return true;
}
console.log(compareDeep(c, d))
后来楼主查了查深浅比较的信息，浅比较就是===，判断对象是否相等的时候，仅判断左右两边是否来自同一个引用；深比较也称原值相等，深比较是指检查两个对象的所有属性是否都相等,深比较需要以递归的方式遍历两个对象的所有属性，操作比较耗时，深比较不管这两个对象是不是同一对象的引用。
21.css代码题：使用flex布局实现一个九宫格的效果（边框也需要实现）
<!DOCTYPE html>
<head>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
width: 33%;
height: 33%;
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.container-flex2 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
height: 100%;
}
.block:nth-child(3n + 1) {
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="container-flex2">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
</div>
</body>
</html>
grid如何实现的
<!DOCTYPE html>
<head>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
border-right: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.container-flex2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.block:nth-child(3n + 1) {
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="container-flex2">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
<div class="block">9</div>
</div>
</body>
</html>
22. 反问
字节支付，收银台、绑卡注册、营销等页面的开发
总结：不愧是字节...考察地很全面，面试官会通过场景题引导你回答，实践看中地多一些。面试官也反应我promise可以再加强一下，对项目中自己是怎么做的还需要多准备。本以为凉了的，结果刚面完就约了二面。
二面（20min）
1.对vue是怎么理解的
2.vue-if和vue-show的区别说一下
3.vue数据双向绑定怎么实现的
4.vue2和vue3有哪些区别
5.vue3的hooks了解过吗
6.vue组件之间的通信方式有哪些
7.学过数据结构吗，讲讲有哪些数据结构
8.数据结构里提到了堆和栈，js的堆和栈一样么
9.学过计算机网络吗，展开讲讲这门课大致的逻辑
10.考虑过直接工作吗（岗位有转正hc）
11.身边同学有在找实习的吗，可以推荐一下
12.反问
面完就约了三面。。。
三面（10min）
感觉三面是leader面了，先问了职业规划，稳定性的相关内容，后续也都蛮轻松的。
1.了解前端优化的指标吗？说了开屏时间 2.具体算过这些指标吗？没有 3.之前的项目里有测试参加吗？没有 4.项目的难点有哪些？怎么解决的 5.了聊你对抖音支付的见解 6.交代后续可能会有hr联系
感觉是过了，但是还没收到offer call不会被吧
#字节跳动##前端##秋招#