前端模拟面试（1 年经验）
面试时长：40-60 分钟
面试难度：初中级
技术栈：Vue 3、TypeScript、微前端（qiankun）、Webpack/Rspack、Ant Design、组件库迁移
一、基础知识
- HTML & CSS
介绍一下 BFC（块级格式化上下文）的作用？
flex: 1 具体代表什么？
CSS 选择器优先级计算规则是什么？
如何实现一个两栏布局，左侧固定 200px，右侧自适应？
如何让 CSS 动画更流畅？
- JavaScript & TypeScript
this 在 JavaScript 中是如何绑定的？
event loop 机制中，Promise.then 和 setTimeout 谁先执行？
typeof null 的结果是什么？为什么？
TypeScript 中 interface 和 type 有什么区别？
如何实现一个 deepClone 方法？
- Vue 3
Vue 2 和 Vue 3 在响应式上有什么不同？
ref 和 reactive 的区别是什么？
setup 函数的执行时机是什么？
Vue 3 组件生命周期中 onMounted 之后的生命周期有哪些？
介绍一下 defineExpose 及其应用场景。
二、框架 & 工程化
- Webpack & Rspack
Webpack 的 tree-shaking 原理是什么？
如何优化 Webpack 的构建速度？
Rspack 是如何提升构建性能的？
什么是 sideEffects？如何在 Webpack 中应用？
- 微前端 & qiankun
微前端的核心思想是什么？
qiankun 是如何实现子应用的隔离的？
你们团队在使用 qiankun 过程中遇到过哪些问题？是如何解决的？
主应用如何与子应用进行通信？
三、实践 & 业务场景
- 组件库迁移
你们是如何从旧组件库迁移到 Ant Design 的？过程中遇到哪些挑战？
业务组件库如何设计？你们如何管理版本发布？
- 性能优化
你们是如何优化 Webpack 启动时间的？
Vue 组件如何避免不必要的渲染？
前端如何做首屏加载优化？
- 项目经验
介绍一个你负责的项目，遇到了哪些技术挑战？
你在团队中主要承担了哪些角色？
你们是如何做代码 review 的？
四、手写代码
-
实现一个 deepClone 方法
-
实现一个 useDebounce Vue 3 组合式 API
-
实现一个 EventBus（发布订阅模式）
-
手写 Promise.all
-
实现一个 requestIdleCallback 兼容方案
-
实现一个简易版 computed
五、开放性问题
你对前端的发展趋势有什么看法？
如果让你优化当前团队的前端工程体系，你会从哪些方面入手？
你认为 1 年经验的前端如何更好地成长？
总结
这个面试涵盖了前端基础、Vue 3、工程化、微前端以及你的项目经验。你可以在模拟面试时多总结自己的经验，并通过手写代码提高自己的能力。
你需要更详细的讲解或模拟对答吗？
