前端开发面试高频题：这些坑你踩过几个？（实战经验版）

前言：面试不是八股文！！！

最近帮团队做技术面试，发现很多候选人背题痕迹明显（划重点），但碰到实际场景就卡壳！今天分享真正高频且容易翻车的题目，附带避坑指南和解题思路。看完这篇，至少帮你避开30%的常见雷区！（亲测有效）

一、HTML/CSS必考题：你以为简单其实花样多

1. 垂直居中到底有几种写法？（送命题）

这题80%的人能答3种，但面试官想听的是：

/* 2023年最推荐方案 */
.parent {
  display: grid; /* 网格布局才是新宠！ */
  place-items: center;
}

必杀技：顺带吐槽flex和transform在不同场景的坑！比如：

flex布局在Safari老版本会有兼容性问题（别问我怎么知道的）
transform导致子元素模糊的玄学问题（遇到过+1）

2. BFC是什么？举个实际应用场景

错误示范：背概念（面试官内心OS：下一个！）
正确姿势：
“上周刚用BFC解决浮动导致的布局错乱！比如商品详情页的价格栏…”（瞬间真实度+10086）

二、JavaScript灵魂拷问：闭包是送分题？

1. 手写防抖函数（现场翻车重灾区）

90%的人写成这样：

function debounce(fn, delay) {
  let timer
  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

死亡陷阱：没处理立即执行版本！现在很多UI库都支持leading参数（比如lodash），这时候要主动问面试官需求场景！

2. 事件循环输出顺序题

经典题但年年出新花样！现在流行结合async/await搞事情：

console.log('1')

setTimeout(() => console.log('2'), 0)

Promise.resolve().then(() => console.log('3'))

async function main() {
  console.log('4')
  await console.log('5')
  console.log('6')
}
main()

// 输出顺序是？评论区见分晓！

加分项：画出浏览器/node环境下的差异（这道题能刷掉一半中级选手！）

三、框架篇：Vue和React相爱相杀

1. Vue3的响应式原理变了啥？（别再说Object.defineProperty了！）

标准答案：

Proxy代理整个对象
effect替代watcher
新增Ref系列API

实战坑点：

数组下标修改不触发更新？用push还是[...arr]？（血泪教训）
用reactive包裹axios响应对象会怎样？（当场表演错误示范）

2. React Hooks的依赖项数组怎么填？

常见送命回答：“根据ESLint提示填就好”
深度解析：

空数组可能导致闭包陷阱
函数要不要放进去？用useCallback还是直接传
自定义Hook的依赖传递玄学（真实项目翻车案例）

四、性能优化：从入门到放弃

1. 首屏加载慢怎么排查？

菜鸟方案：上lighthouse生成报告（面试官：就这？）
高手套路：

打开Chrome的Coverage看未使用代码比例
Webpack的magic comment拆分路由
服务端流式渲染怎么玩（Next.js实战案例）
连字体文件都要优化！（woff2格式+子集化）

2. 内存泄漏怎么查？

演示用Chrome Memory面板拍快照的姿势：

对比两次快照的Detached DOM节点
全局变量没清理的典型案例
取消事件监听的最佳时机（beforeUnmount还是destroyed？）

五、手写代码：从Promise到微前端

1. 实现Promise.all（别小看异常处理！）

function myAll(promises) {
  return new Promise((resolve, reject) => {
    let count = 0
    const results = []
    promises.forEach((p, i) => {
      Promise.resolve(p).then(res => {
        results[i] = res
        if (++count === promises.length) resolve(results)
      }).catch(reject) // 这里漏写直接挂！
    })
  })
}

致命细节：处理非Promise输入要用Promise.resolve包装！

结语：面试是技术交流，不是考试！

最后给候选人的建议（来自面过200+人的老司机）：

不会的直接说"这个我不熟"，比瞎编强10倍！
项目难点要准备3个不同维度的案例
反问环节一定要问团队技术栈！（避免入职后发现用jQuery）

彩蛋：评论区留下你遇到的最奇葩面试题，点赞最高的送前端避坑指南PDF！