27 届前端 5.30 合并两场面试面经

## 时长 70 分钟 北京合思招聘系统

### 1.自我介绍环节

### 2.做题环节（20 分钟左右）

有 22 道选择（html,css,js,数据结构),一道算法题：字符串去重，我和面试官简单说了一下思路（new Set),然后他让我随便写一点交卷了

### 3.项目，场景和八股环节（这个环节持续太长了，有些我实在是忘了）

1.你是如何做到首屏优化的

2.讲讲 CI/CD 是如何实现的

3.项目中有使用过 webpack 和 vite 吗

4.webpack 和 vite 有什么区别

5.有没有使用过什么状态管理工具

6.项目使用了什么缓存机制

这里我展开讲讲。关于缓存数据，蜀黍使用了缓存头(Cache-Control)和 localStorge。项目中使用了 Promise.all 来进行并发请求，同时从服务器和本地缓存请求数据

7.怎么获取的缓存数据

localStorge，状态码 304

8.缓存的过期时间

9.NextJS 中如何设置代码在客户端运行

10.NextJS 如何设置服务端运行（好像是这个问法)

11.useEffect 中如何进行数据请求（丝滑切换至场景题）

12.如果不同 useEffect 中相互依赖过多怎么办（反问面试官，竟然是退化至使用类式组件）

13.如果我想让我的 useRef 使用外部的 props 应该怎么办（forwardRef）

14.当我的父组件将一个可能会经常变化的 props 传递给子组件时，应该怎么办（useMemo）

15.我想全局管理 props,并且防止出现 props drill 的问题，应该怎么办（useContext）

16.我想使用 useRef 来实现一个可以返回窗口顶部的功能，应该怎么实现，使用哪些 API

17.我想将一个二维数组转换为一维数组怎么办

18.如果我的二维数组中不完全都是数组怎么办（instanceof、Array.isArray）

19.实现 add(1)(2) === 3 （函数柯里化）

20.如何实现 string 和 number 之间的相互转换

21.如何改变 this 的指向

22.你有没有用过什么 ES6 的新特性

23.Promise 打印顺序

```javascript
const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})

promise.then(() => {
  console.log(3)
})

console.log(4)
```

24.有没有使用过 typeof

25.flex 布局中如何实现水平垂直居中

26.如何消除 float 带来的影响

27.给定一个完整的 URL，如何获取其查询参数

28.React 19 和 React 18 有什么区别

29.项目中是否有采用什么对静态资源的优化

可能还有，但是暂时想不起来了

## 时长 15 分钟 洋葱学园

1.对于一个列表，我们通常会给其添加一个 key,可以不添加吗，如果不添加是否有什么问题？

2.对于一个 H5 页面加载过慢，如何优化

3.将 URL 输入搜索栏，浏览器会做什么

4.如何实现进入视窗才进行懒加载

5.如何在一个 JS 文件中白屏时返回 Loading 组件（我直接说了 React 和 NextJS 中如何实现哈哈）

6.移动端适配
7.如何处理重复的请求（本人说了 axios cancelToken、防抖和节流解决这个问题）

我确实记得应该还有，但是想不起来（