大厂前端高频面试题
HTML/CSS
1. 什么是 BFC？如何创建 BFC？
BFC（Block Formatting Context，块级格式化上下文）是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
创建 BFC 的方式：
overflow不为visibledisplay为inline-block、table-cell、flex等position为absolute或fixedfloat不为none
2. Flex 布局的常见属性有哪些？
容器属性：
flex-direction：主轴方向justify-content：主轴对齐方式align-items：交叉轴对齐方式flex-wrap：是否换行align-content：多行对齐方式
项目属性：
flex-grow：放大比例flex-shrink：缩小比例flex-basis：基础大小align-self：单独对齐方式
3. CSS 选择器优先级
!important > 行内样式 > ID 选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 通配符
JavaScript
1. 简述事件循环（Event Loop）
JavaScript 是单线程语言，通过事件循环实现异步操作。事件循环的执行顺序：
- 执行同步代码（宏任务）
- 执行所有微任务（Promise、MutationObserver 等）
- 执行下一个宏任务（setTimeout、setInterval 等）
- 重复步骤 2-3
2. 什么是闭包？有什么作用？
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。
作用：
- 数据封装和私有化
- 实现模块化
- 保存函数执行状态
3. 深拷贝和浅拷贝的区别？
- 浅拷贝：只复制对象的第一层属性，嵌套对象仍然共享引用
- 深拷贝：递归复制所有层级，完全独立的新对象
实现深拷贝的方法：
JSON.parse(JSON.stringify(obj))（有局限性）- 递归实现
structuredClone()（现代浏览器支持）lodash.cloneDeep()
Vue
1. Vue 的响应式原理
Vue2：通过 Object.defineProperty() 劫持对象属性的 getter 和 setter，在数据变化时通知依赖更新。
Vue3：使用 Proxy 代理整个对象，可以监听更多操作（新增属性、删除属性等），性能更好。
2. Vue 的 Diff 算法
Vue 采用双端 Diff 算法，对比新旧虚拟 DOM 树：
- 对比新旧节点列表的头部和尾部
- 通过 key 值寻找可复用的节点
- 处理剩余节点（新增或删除）
时间复杂度为 O(n)，相比 React 的 O(n³) 更高效。
3. Vue 组件通信方式
- Props / $emit
- $parent / $children
- $refs
- Provide / Inject
- EventBus / mitt
- Vuex / Pinia
- $attrs / $listeners
React
1. React 生命周期
类组件：
- 挂载：constructor → getDerivedStateFromProps → render → componentDidMount
- 更新：getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate
- 卸载：componentWillUnmount
函数组件（Hooks）：
- useEffect 模拟生命周期
- useLayoutEffect 同步执行副作用
2. React Fiber 架构
Fiber 是 React 16 引入的新协调算法，主要解决：
- 可中断的渲染（Time Slicing）
- 优先级调度
- 更好的错误处理
3. React Hooks 使用规则
- 只在最顶层使用 Hooks，不要在循环、条件或嵌套函数中调用
- 只在 React 函数中调用 Hooks
- 自定义 Hook 必须以 "use" 开头
浏览器
1. 从输入 URL 到页面渲染发生了什么？
- DNS 解析
- TCP 连接（三次握手）
- 发送 HTTP 请求
- 服务器处理请求并返回响应
- 浏览器解析 HTML 构建 DOM 树
- 解析 CSS 构建 CSSOM 树
- 合并 DOM 和 CSSOM 构建渲染树
- 布局（Layout/Reflow）
- 绘制（Paint）
- 合成（Composite）
2. 浏览器的缓存策略
- 强缓存：Expires、Cache-Control
- 协商缓存：Last-Modified / If-Modified-Since、ETag / If-None-Match
3. 跨域解决方案
- CORS（跨域资源共享）
- JSONP（只支持 GET）
- 反向代理（Nginx、Webpack devServer）
- postMessage
- WebSocket
网络
1. HTTP 和 HTTPS 的区别
- HTTP 明文传输，HTTPS 加密传输（SSL/TLS）
- HTTPS 需要证书
- HTTPS 默认端口 443，HTTP 默认端口 80
2. TCP 三次握手和四次挥手
三次握手：
- 客户端发送 SYN
- 服务端回复 SYN + ACK
- 客户端回复 ACK
四次挥手：
- 客户端发送 FIN
- 服务端回复 ACK
- 服务端发送 FIN
- 客户端回复 ACK
3. HTTP 各版本的区别
- HTTP/1.0：短连接，每次请求都新建 TCP 连接
- HTTP/1.1：持久连接、管道化、分块传输
- HTTP/2：二进制分帧、多路复用、头部压缩、服务器推送
- HTTP/3：基于 QUIC（UDP），减少握手延迟