> 北京一家做AI解决方案的公司，技术一面，15k-20k，要求3-5年




1. 你们React项目里路由模式用的什么
2. React里class组件和function组件都用过吗
3. 常用Hook，解释一下他们的作用
4. useEffect第二个参数填空数组和不填有什么区别
5. React组件通信的常用方式
6. 封装过哪些自定义hook
7. useMemo和useCallback的区别，useMemo可以返回函数吗，useCallback可以返回变量值吗
8. 详细说一下redux这些状态管理工具的特性及原理
9. http常见状态码，触发缓存会是什么状态码
10. css水平垂直居中
11. flex：1是什么的缩写
12. 用过promise吗，promise的静态方法有哪些，promise.all的结果数组有序吗
13. promise和async await的区别
14. js事件循环
15. 箭头函数和普通函数
16. new箭头函数会怎么样
17. 讲一下闭包，工作里有用过闭包吗
18. webpack和vite在使用上有什么区别，webpack的plugin、loader
19. tailwindcss在使用上跟sass less有什么优势
20. 在工作中做过什么优化

一共面了1个小时，基本什么都问了一遍

前端面经分享（25/03/26）

> 北京一家做协同办公软件出海的公司，技术一面，20k-40k，要求3-5年




1. 详细聊了一下上家公司的项目
2. 上家公司的项目是不做了吗，离职原因是什么，你觉得公司的这个产品怎么样
3. 在做AI类的业务时，作为前端感觉跟常规业务有什么区别
4. 详细聊了一下上上家公司的项目细节
5. 讲一下项目里用编辑器做了什么事
6. 遇到过什么难解决的问题
7. 项目里提供的UI自动化的功能是怎么做的
8. 聊了一下写博客的事情
9. 有没有了解过浏览器底层的东西
10. 最近在研究或学习什么新东西（最近正好在学nextjs，又聊了会儿）
11. 关于RESTful API的规范，put、post啥的

一共半小时左右，比较顺利，问了很多项目的内容，我在上家公司做的项目跟他们现在做的项目类型差不多。

前端面经分享（25/03/19）

> 北京一家做边缘云服务提供商公司，技术一面，15k-20k，要求3-5年




1. 上家公司的项目为什么会选择MQTT进行通信
2. React常用Hook
3. 为什么React不能在条件语句里用Hook
4. React如何在组件卸载时做一些事情
5. 前端常见的优化策略
6. React如何捕获子组件的错误
7. React给节点加key会有什么效果
8. React是怎么处理事件的，为什么要做事件委托
9. 最近俩家公司都用WebSocket做了什么
10. HTTP各个版本的区别
11. 跨域的常见解决方案
12. 前端常见布局
13. WebSocket和SSE的区别
14. A页面滚动到一定位置之后，跳转到B页面，再返回A页面，如何保留之前A页面的滚动位置
15. TypeScript在写枚举的时候，前面加上const的含义是什么
16. TypeScript里any和unknown的区别
17. 有关注什么社区的前沿资讯
18. 前端如何实现扫码登录【单点登录类的问题】

一共不到半小时，感觉挺顺利的，除了像http各个版本的区别，还有SSE这些，完全没详细了解过的，直接就说no了，其它的基本都说出来了

前端面经分享（25/03/18）

> 在最近一次面试中被问到，我印象中好像从来没用过useLayoutEffect，就没答上来。但是看名字应该是跟布局相关的，而且跟useEffect会有类似的作用。





在 `React` 中，`useEffect` 和 `useLayoutEffect` 都是用于处理副作用的 `Hooks`，但它们的执行时机和对渲染流程的影响有显著区别。以下是两者的核心差异及使用场景：

## 1. 执行时机

| Hook | 执行实际 |
| --- | --- |
| useEffect | 异步执行：在浏览器完成布局和绘制（Paint）后触发。 |
| useLayoutEffect | 同步执行：在 React 完成 DOM 更新后、浏览器绘制前触发，会阻塞浏览器渲染。 |

React 组件更新 → 计算 DOM 变更 → 更新 DOM → [useLayoutEffect 执行] → 浏览器绘制 → [useEffect 执行]

## 2. 对用户体验的影响


| Hook | 用户感知 |
| --- | --- |
| useEffect | 副作用可能稍后执行，用户可能先看到未更新的界面，再看到更新后的内容（短暂闪烁）。 |
| useLayoutEffect | 副作用在绘制前完成，用户直接看到最终结果，避免视觉不一致。 |


### 示例：修改 DOM 样式

```js
// 使用 useEffect（可能闪烁）
useEffect(() => {
  const element = document.getElementById("my-element");
  element.style.color = "red"; // 浏览器可能先绘制默认颜色，再变红
}, []);

// 使用 useLayoutEffect（无闪烁）
useLayoutEffect(() => {
  const element = document.getElementById("my-element");
  element.style.color = "red"; // 在绘制前完成修改
}, []);
```
## 3. 适用场景


| Hook | 典型场景 |
| --- | --- |
| useEffect | 数据获取（API 请求）/ 订阅事件（如 WebSocket） / 不需要同步 DOM 的操作|
| useLayoutEffect | 测量 DOM 元素尺寸/位置（如动态调整布局） / 同步修改 DOM 样式以避免闪烁 | 

### 示例：测量元素尺寸

```js
useLayoutEffect(() => {
  const element = document.getElementById("my-element");
  const width = element.offsetWidth;
  setElementWidth(width); // 在绘制前获取并更新尺寸
}, []);
```

## 4. 性能影响

- useEffect

异步执行，不会阻塞渲染，适合大多数场景，尤其是耗时操作（如网络请求）。

- useLayoutEffect

同步执行，若副作用逻辑复杂可能导致渲染延迟，需谨慎使用。

## 5. 服务端渲染（SSR）

- useEffect

无此问题，适合 `SSR` 环境。

- useLayoutEffect

在服务端渲染时，`React` 会发出警告（因为其逻辑无法在服务端执行），需替换为 useEffect 或在客户端渲染后执行。

## 6. 代码示例对比

**场景：点击按钮后动态调整元素高度**

```js
// 使用 useEffect（可能闪烁）
function Component() {
  const [height, setHeight] = useState(0);
  const ref = useRef();

  useEffect(() => {
    ref.current.style.height = "100px"; // 可能先渲染默认高度，再调整
  }, []);

  return <div ref={ref}>Height: {height}px</div>;
}

// 使用 useLayoutEffect（无闪烁）
function Component() {
  const [height, setHeight] = useState(0);
  const ref = useRef();

  useLayoutEffect(() => {
    ref.current.style.height = "100px"; // 在绘制前完成调整
  }, []);

  return <div ref={ref}>Height: {height}px</div>;
}
```

## 总结



| 维度 | useEffect | useLayoutEffect | 
| --- | --- | --- |
|  执行时机 |  异步（绘制后） | 同步（绘制前） |
|  用户体验 | 可能闪烁 | 无闪烁 | 
| 性能影响 | 低 | 可能阻塞渲染 |
| 适用场景 | 数据获取、订阅事件等异步操作 | 同步 DOM 操作（测量、调整样式） | 
| SSR 兼容性 | 兼容 | 需特殊处理 |

- 优先使用 useEffect
- 仅在需要同步操作 DOM 或避免视觉不一致时使用 useLayoutEffect

React中useEffect和useLayoutEffect的区别

> 北京一家做AI生物医疗的新公司，技术一面，15k-25k 16薪，要求1-3年




1. css盒模型
2. position属性，值为absolute的时候，跟父容器的关系
3. flex布局的常用属性
4. 如何实现自适应
5. rem和em的区别
6. 实现响应式的方式
7. css样式继承的问题
8. css选择器的优先级问题
9. 作用域/作用域链
10. 原型/原型链
11. 闭包的代码问题

```js
let x = 10;

function fn() {
    let x = 30;

    return function() {
        console.log(x);
    }
}

```

12. 如何避免闭包可能造成的内存泄漏
13. 浏览器的垃圾回收机制
14. this指向和事件循环的代码问题

```js
let zhangsan = {
    name: '张三',
    sayHi(){
        console.log('sayHi', this.name);
    },

    wait() {
        setTimeout(() => {
            console.log('wait', this.name)
        })
    },

    waitAgain() {
        setTimeout(function() {
            console.log('waitAgain', this.name);
        })
    },

    get: () => {
        console.log('get', this.name);
    }
}

zhangsan.sayHi();
zhangsan.wait();
zhangsan.waitAgain();
zhangsan.get();
```

15. js的数据类型，判断类型的方式
16. 为什么会跨域，如何解决
17. React常用Hook
18. useEffect和useLayoutEffect的区别
19. React常见的优化策略
20. 手写防抖函数


大概就这些，css和js的基础问的比较多，感觉回到了校招

前端面经分享（25/03/12）

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！