目录
【一面】
1. React的生命周期了解么？
2. Fiber是什么？
3. HTML5，CSS3有哪些新特性？
4. 代码实现垂直居中
5. 介绍一下Promise
6. 代码实现Promise.then()
7. 强制缓存，协商缓存
8. 介绍一下express中间件
9. React.memo()和useCallback()
10. 什么场景用useCallback()
11. CSS选择器优先级
【二面】
1. 抢购场景：多个人同时下单，库存有限
2. CommonJS 和 ES Moudle的区别
3. tree shaking的原理
4. JS 如何内存回收
5. 如何去透传一个ref对象
6. 防抖的场景应用
7. 手写题：多个请求的并发限制
【三面】
1. 为什么用express，现在有新的koa
2. 项目的防抖是怎么做的
3. 设计一个组件 (如搜索)，会考虑哪些东西
4. 怎么优化搜索的效率（数据量大）
5. 了解哪些设计模式
6. 观察者模式和发布订阅模式的区别
7. 举例子说明一下发布订阅模式
【一面】
1. React的生命周期了解么？
react生命周期分为3个阶段，分别是：
- 创建阶段，也被称为初始化阶段，表示组件第一次在DOM树中进行渲染的过程；
- 更新阶段，也叫存在阶段，表示组件被重新渲染的过程；
- 卸载阶段，也叫销毁阶段，表示组件从DOM中删除的过程。
2. Fiber是什么？
- Fiber 就是重新实现的堆栈帧，本质上 Fiber 也可以理解为是一个虚拟的堆栈帧，将可中断的任务拆分成多个子任务，通过按照优先级来自由调度子任务，分段更新，从而将之前的同步渲染改为异步渲染。
- 所以我们可以说 Fiber 是一种数据结构(堆栈帧)，也可以说是一种解决可中断的调用任务的一种解决方案，它的特性就是时间分片(time slicing)和暂停(supense)。
3. HTML5，CSS3有哪些新特性？
- 颜色：新增RGBA、HSLA模块
- 文字阴影（text-shadow）
- 边框：圆角（border-radius）边框阴影：box-shadow
- 盒子模型：box-sizing
- 背景 ：background-size设置背景图片尺寸；background-origin设置背景图片的原点；background-clip设置背景图片的裁切区域，以“，”分隔可以设置多背景，用于自适应布局
- 渐变：linear-gradient、radial-gradient
- 过渡：transition,可实现动画
- 自定义动画
- 2D转换：transform:translate
- 3D转换
4. 代码实现垂直居中
- flex
- grid
- table-cell
- margin + transform
- absolute + transform
- absolute + -margin
- absolute + margin:auto
- inline-block + vertical-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 方法1：flex */
.wrap{
display: flex;
justify-content: center;
align-items: center;
}
/* 方法2：grid写法1 */
/* .wrap{
display: grid;
}
.box{
align-self: center;
justify-self: center;
} */
/* 方法2：grid写法2 */
/*.wrap {
display: grid;
align-items: center;
justify-items: center;
}*/
/* 方法3：table-cell */
/*
.wrap{
display: table-cell;
text-align: center;
vertical-align:middle
}
.box{
display: inline-block;
}
*/
/* 方法4：margin + transform */
/* .wrap{
overflow:hidden
}
.box{
margin: 50% auto;
transform:translateY(-50%)
} */
/* 方法5：absolute + transform */
/* .wrap{
position: relative;
}
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
} */
/* 方法6：absolute + -margin */
/* .wrap{
position: relative;
}
.box{
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
} */
/* 方法7：absolute + margin:auto */
/* .wrap{
position: relative;
}
.box{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
} */
/* 方法8：inline-block + vertical-align*/
/* .wrap{
text-align: center;
line-height: 300px;
}
.box{
display: inline-block;
vertical-align: middle;
} */
</style>
</head>
<body>
<div class="wrap" style="width: 300px;height: 300px;background-color: yellow;">
<div class="box" style="width: 100px;height: 100px;background-color: pink;">
</div>
</div>
</body>
</html>5. 介绍一下Promise
- promise是解决异步问题的一种解决方案（但是它本身不是异步的），它本质上是一个对象，用于获取异步的一些消息。
- promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
6. 代码实现Promise.then()
// 失败：
const p = new Promise((resolve, reject) => {
reject();
});
p.then(
() => {
console.log('success');
},
() => {
console.log('error');
}
);
// error// 成功：
const p = new Promise((resolve, reject) => {
resolve();
});
p.then(
() => {
console.log('success');
},
() => {
console.log('error');
}
);
// success7. 强制缓存，协商缓存
- 强制缓存： 当再次访问同一页面时，直接从本地读取缓存。
- 协商缓存：当再次访问同一页面时，先向服务器发起请求，询问缓存是否过期，如果不过期就从本地读取缓存，否则再次向服务器发送资源请求。
- 总结：协商缓存会比强缓存好， 因为资源是会经常更新的。
8. 介绍一下express中间件
9. React.memo()和useCallback()
10. 什么场景用useCallback()
11. CSS选择器优先级
【二面】
1. 抢购场景：多个人同时下单，库存有限
2. CommonJS 和 ES Moudle的区别
3. tree shaking的原理
4. JS 如何内存回收
5. 如何去透传一个ref对象
6. 防抖的场景应用
7. 手写题：多个请求的并发限制
【三面】
1. 为什么用express，现在有新的koa
2. 项目的防抖是怎么做的
3. 设计一个组件 (如搜索)，会考虑哪些东西
4. 怎么优化搜索的效率（数据量大）
5. 了解哪些设计模式
6. 观察者模式和发布订阅模式的区别
7. 举例子说明一下发布订阅模式
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
