前端面试题目总结

港控/mmm° 2023-09-27 12:04 81阅读 0赞

**目录**

【一面】

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个阶段，分别是：
> 
> 1.  创建阶段，也被称为初始化阶段，表示组件第一次在DOM树中进行渲染的过程；
> 2.  更新阶段，也叫存在阶段，表示组件被重新渲染的过程；
> 3.  卸载阶段，也叫销毁阶段，表示组件从DOM中删除的过程。

#### 2. Fiber是什么？ ####

>  *  Fiber 就是重新实现的堆栈帧，本质上 Fiber 也可以理解为是一个虚拟的堆栈帧，将可中断的任务拆分成多个子任务，通过按照优先级来自由调度子任务，分段更新，从而将之前的同步渲染改为异步渲染。
>  *  所以我们可以说 Fiber 是一种数据结构(堆栈帧)，也可以说是一种解决可中断的调用任务的一种解决方案，它的特性就是时间分片(time slicing)和暂停(supense)。

#### 3. HTML5，CSS3有哪些新特性？ ####

> 1.  颜色：新增RGBA、HSLA模块
> 2.  文字阴影（text-shadow）
> 3.  边框：圆角（border-radius）边框阴影：box-shadow
> 4.  盒子模型：box-sizing
> 5.  背景 ：background-size设置背景图片尺寸；background-origin设置背景图片的原点；background-clip设置背景图片的裁切区域，以“，”分隔可以设置多背景，用于自适应布局
> 6.  渐变：linear-gradient、radial-gradient
> 7.  过渡：transition,可实现动画
> 8.  自定义动画
> 9.  2D转换：transform:translate
> 10. 3D转换

#### 4. 代码实现垂直居中 ####

> 1.  flex
> 2.  grid
> 3.  table-cell
> 4.  margin + transform
> 5.  absolute + transform
> 6.  absolute + -margin
> 7.  absolute + margin:auto
> 8.  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');
            }
          ); 
          // success

#### 7. 强制缓存，协商缓存 ####

>  *  **强制缓存：** 当再次访问同一页面时，直接从本地读取缓存。
>  *  **协商缓存：**当再次访问同一页面时，先向服务器发起请求，询问缓存是否过期，如果不过期就从本地读取缓存，否则再次向服务器发送资源请求。
>  *  **总结：**协商缓存会比强缓存好， 因为资源是会经常更新的。

#### 8. 介绍一下express中间件 ####

#### 9. React.memo()和useCallback() ####

#### 10. 什么场景用useCallback() ####

#### 11. CSS选择器优先级 ####

--------------------

### **【二面】** ###

#### 1. 抢购场景：多个人同时下单，库存有限 ####

#### 2. CommonJS 和 ES Moudle的区别 ####

#### 3. tree shaking的原理 ####

#### 4. JS 如何内存回收 ####

#### 5. 如何去透传一个ref对象 ####

#### 6. 防抖的场景应用 ####