3.22模拟面试

前端模拟面试（1 年经验）

面试时长：40-60 分钟
面试难度：初中级
技术栈：Vue 3、TypeScript、微前端（qiankun）、Webpack/Rspack、Ant Design、组件库迁移

---

一、基础知识

1. HTML & CSS

介绍一下 BFC（块级格式化上下文）的作用？

flex: 1 具体代表什么？

CSS 选择器优先级计算规则是什么？

如何实现一个两栏布局，左侧固定 200px，右侧自适应？

如何让 CSS 动画更流畅？

2. JavaScript & TypeScript

this 在 JavaScript 中是如何绑定的？

event loop 机制中，Promise.then 和 setTimeout 谁先执行？

typeof null 的结果是什么？为什么？

TypeScript 中 interface 和 type 有什么区别？

如何实现一个 deepClone 方法？

3. Vue 3

Vue 2 和 Vue 3 在响应式上有什么不同？

ref 和 reactive 的区别是什么？

setup 函数的执行时机是什么？

Vue 3 组件生命周期中 onMounted 之后的生命周期有哪些？

介绍一下 defineExpose 及其应用场景。

---

二、框架 & 工程化

4. Webpack & Rspack

Webpack 的 tree-shaking 原理是什么？

如何优化 Webpack 的构建速度？

Rspack 是如何提升构建性能的？

什么是 sideEffects？如何在 Webpack 中应用？

5. 微前端 & qiankun

微前端的核心思想是什么？

qiankun 是如何实现子应用的隔离的？

你们团队在使用 qiankun 过程中遇到过哪些问题？是如何解决的？

主应用如何与子应用进行通信？

---

三、实践 & 业务场景

6. 组件库迁移

你们是如何从旧组件库迁移到 Ant Design 的？过程中遇到哪些挑战？

业务组件库如何设计？你们如何管理版本发布？

7. 性能优化

你们是如何优化 Webpack 启动时间的？

Vue 组件如何避免不必要的渲染？

前端如何做首屏加载优化？

8. 项目经验

介绍一个你负责的项目，遇到了哪些技术挑战？

你在团队中主要承担了哪些角色？

你们是如何做代码 review 的？

---

四、手写代码

1. 实现一个 deepClone 方法

2. 实现一个 useDebounce Vue 3 组合式 API

3. 实现一个 EventBus（发布订阅模式）

4. 手写 Promise.all

5. 实现一个 requestIdleCallback 兼容方案

6. 实现一个简易版 computed

---

五、开放性问题

你对前端的发展趋势有什么看法？

如果让你优化当前团队的前端工程体系，你会从哪些方面入手？

你认为 1 年经验的前端如何更好地成长？

---

总结

这个面试涵盖了前端基础、Vue 3、工程化、微前端以及你的项目经验。你可以在模拟面试时多总结自己的经验，并通过手写代码提高自己的能力。

你需要更详细的讲解或模拟对答吗？