前端模擬面試（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、工程化、微前端以及你的項目經驗。你可以在模擬面試時多總結自己的經驗，并通過手寫代碼提高自己的能力。
你需要更詳細的講解或模擬對答嗎？
