> 因为最近在准备面试，简历里贴了我这个网站，所以在这里快速介绍一些简历里技术之外的细节





00年，全日制统招本科，计算机科学与技术专业

## 社区

在社区很活跃，除了在上家公司996+封闭开发的时候...

**CSDN（2w粉）【学习、总结能力还行】：** https://blog.csdn.net/m0_46171043?spm=1000.2115.3001.5343

还在上学的时候，就在CSDN开始写东西，本来只是单纯找个地方归纳总结自己的学习过程，不知不觉也有几万粉丝了。

**B站（5k粉）【表达能力还行】：** https://space.bilibili.com/416065222?spm_id_from=333.1007.0.0

在没事的时候就喜欢找个事做，在B站陆续更新了几个小程序相关项目的教程，主要服务群体是那些刚入门的。

**微信公众号（7k粉）：**

公众号写的就比较杂了，什么都写点。

![qrcode_for_gh_fe6e92caacd9_258.jpg](https://creatorblog.cn/static/img/9cfb252e1c0b6b096e1d98686950925d.qrcode_for_gh_fe6e92caacd9_258.webp)


## 工作经历

工作经历就由近到远吧，半年 + 两年多 + 半年，三年左右的前端工作经验

### 北京细红线科技有限公司（AI应用 + 软硬件结合 + 跨平台）

24年中旬进入了第二家公司，[**北京细红线科技有限公司**](https://matter.ai/) **罗永浩**宣布的 "最后一次" 创业的公司，做的是一个AI应用类的项目，软件＋硬件。软件是跨平台的，Android + IOS + Webapp + Electron，Android和IOS由专门的Flutter团队维护，前端维护Web和Electron桌面端。

因为主推的是移动端的App，所以前端的方案其实是 "备胎"，管理层觉得在某些时候，应用商店会下架他们Android和IOS的应用，到时候需要一个备选方案，所以前端就1：1复刻做了Webapp，在浏览器运行的项目。

这也是后续被裁的最主要原因，因为各种各种各种原因，导致项目的发布会一直没开，所以主推的移动端App一直难产，我们这种极其特殊情况下的前端备选方案就肯定会先被干掉了。

一共工作了6个月，24年12月31号被裁了。

**薪资：18k 15薪**

**技术栈：React + TypeScript + TailwindCSS + Electron + MQTT**

### 北京北极狐信息科技有限公司（Apipost、RunnerGo）

22年中旬毕业后参加第一份正式公司， [**北京北极狐信息科技有限公司**](https://www.runnergo.com/) 可能这家公司知名的产品是 **Apipost** , 我进去的时候，公司要做另一个产品 **RunnerGo** ，在开始的一年半的时间里，前端只有我一个，从0搭建起了这个项目。

因为刚毕业当时举步维艰，有个很难做的模块：API拖拽可视化的场景。


![image.png](https://creatorblog.cn/static/img/3737ee219a75b01b722c33811d26fbe2.image.webp)


陆续干了两年多，后续因为Boss要我换去其它项目，分给了我一些看似不可能做完的事情（时间不够）。给了我一种要借机干掉我的感觉，当时已经完全度过了早期艰难的阶段，**RunnerGo** 这个项目也进入稳定迭代的时间，就主动离职了。【我离职了没两个月，这个项目就把人裁完了... 】

因为当时有维护主项目React，社区项目Vue，官方原生，所有技术栈比较杂

**薪资：刚进去14k，干了半年HR主要找我涨了2k，所以大部分时间都是16k**

**技术栈：React + React-Flow + Vue + WebSocket + Sass**

### 北京旷视科技有限公司（国内早期的AI四小龙）

21年开始参加实习，在[ **北京旷视科技有限公司** ](https://www.megvii.com/) 实习了半年多。负责了两个产品线的迭代，大模型生产平台AIS、算法量产小程序。当时ChatGPT还没出现，国内有知名度做AI的只有旷视在内的四小龙。

这个大模型生产平台类似于一个管理系统，可以通过界面级的操作，快速的创建和训练模块。

这个算法量产小程序，就是针对具体的算法能力，进行功能级的产出，有图像修改（比如拍了一个人脸，给改成微笑、愤怒）、一句话生成一个图片（最早的文生图）

**薪资：因为是实习按天算的，好像200左右一天吧**

**技术栈：Vue2 + TypeScript + Stylus + 微信小程序**

个人介绍

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