前端面试最常考、最容易被问崩的 50 道八股精简版

JS 核心 / 浏览器 / 网络 / Vue / 工程化 & 性能 / CSS

一、JS 核心（必背，18 题）

var / let / const 区别
- 变量提升、块级作用域、重复声明、重新赋值
闭包是什么？有什么用？有什么坑？
- 函数访问外部作用域变量；模块化、保存变量；内存泄漏
原型和原型链
- __proto__、prototype、Object.prototype.__proto__ === null
作用域和作用域链
- 全局、函数、块级；查找变量的规则
this 指向
- 默认、隐式、显式(call/apply/bind)、new、箭头函数
call / apply / bind 区别
- 立即执行 / 立即执行 / 返回函数；参数形式
new 关键字做了什么
- 创建空对象、绑定原型、执行构造函数、返回对象
Promise 原理 & 状态
- pending/fulfilled/rejected，不可逆，链式调用
Promise.all / race / any / allSettled 区别
async/await 原理
- Generator + 自动执行 + Promise
Event Loop（浏览器）
- 执行栈 → 微任务 → 宏任务
微任务 / 宏任务有哪些
- 微：Promise.then、queueMicrotask、MutationObserver
- 宏：setTimeout、setInterval、script、I/O、UI 渲染
防抖节流
- 防抖：最后一次触发；节流：固定频率触发
深拷贝和浅拷贝
- 浅拷贝：只拷贝一层；深拷贝：递归拷贝所有层级
== 和 === 区别
- == 会隐式类型转换
类型判断方式
- typeof、instanceof、Object.prototype.toString.call()
数组去重方法
- Set、filter、includes、reduce
手写：防抖 / 节流 / 深拷贝 / Promise.all（高频）

从输入 URL 到页面展示发生了什么
- DNS → TCP → TLS → 请求 → 响应 → 解析 HTML → 构建 DOM/CSSOM → 渲染树 → 布局 → 绘制 → 合成
重排（回流）和重绘
- 重排：几何变化，必触发重绘；重绘：样式变化
如何减少重排重绘
- 批量修改 DOM、脱离文档流、使用 transform/opacity
浏览器缓存
- 强缓存（Cache-Control/Expires）、协商缓存（ETag/Last-Modified）
localStorage / sessionStorage / cookie / session
cookie 属性
- domain、path、expires、max-age、httpOnly、secure、SameSite
跨域是什么？怎么解决
- 同源策略：协议+域名+端口；CORS、proxy、JSONP、postMessage
XSS 攻击与防御
- 注入脚本；转义、CSP、httpOnly
CSRF 攻击与防御
- 伪造请求；token、SameSite、Referer
浏览器渲染流程
- DOM + CSSOM → 渲染树 → 布局 → 绘制 → 合成

Vue2 和 Vue3 响应式区别
- Object.defineProperty / Proxy
Vue 生命周期
- 创建、挂载、更新、销毁；setup 执行时机
computed 和 watch 区别
- 计算属性缓存；监听数据变化
v-if 和 v-show 区别
- 销毁/渲染；display:none
v-for 和 v-if 为什么不能一起用
- v-for 优先级更高，性能差
key 作用
- diff 算法标识，复用节点
组件通信方式
- props/emit、eventBus、provide/inject、pinia/vuex、ref、emit、eventBus、provide/inject、pinia/vuex、ref、emit、eventBus、provide/inject、pinia/vuex、ref、parent
Vue 双向绑定原理
- 响应式 + 模板编译 + 发布订阅
diff 算法核心
- 同层比较、key 复用、头尾指针
Vue 性能优化
- v-once、v-show、异步组件、keep-alive、懒加载

居中方案
- 行内：text-align + line-height
- 定位：margin:auto / transform
- flex：justify-content + align-items