前端面试题与答案详解
一、HTML
1. HTML5新特性有哪些？
答案：
- 语义化标签：
<header>,<nav>,<article>,<section>,<footer>等，提升代码可读性和SEO。 - 多媒体支持：
<audio>和<video>标签直接嵌入音视频。 - 图形绘制：
<canvas>和SVG支持动态图形。 - 本地存储：
localStorage和sessionStorage替代Cookie。 - Web API：地理定位（Geolocation）、Web Workers多线程、WebSocket全双工通信。
2. 语义化标签的作用及使用场景？
答案：
-
作用：提高代码可读性，便于SEO爬虫解析，增强无障碍访问（屏幕阅读器）。
-
场景：
<header>：页面头部或内容区块的标题。<nav>：导航链接。<main>：页面主内容区。<aside>：侧边栏或附加内容。
3. 行内元素、块级元素、空元素区别？
答案：
- 行内元素：默认不换行，无法设置宽高（如
<span>,<a>）。 - 块级元素：独占一行，可设置宽高（如
<div>,<p>）。 - 空元素：无闭合标签（如
<br>,<img>,<input>）。
4. 前端SEO优化手段？
答案：
- 使用语义化标签。
- 添加
<meta name="keywords">和<meta name="description">。 - 图片添加
alt属性。 - 合理使用
<h1>~<h6>标题层级。 - 减少DOM嵌套，提升渲染速度。
二、CSS
1. 盒模型及box-sizing的作用？
答案：
-
标准盒模型：
width = 内容宽度，实际元素宽度 =width + padding + border。 -
IE盒模型：
width = 内容 + padding + border。 -
box-sizing：
content-box（默认）：标准模型。border-box：IE模型，方便布局计算。
2. BFC（块级格式化上下文）原理及应用场景？
答案：
-
触发条件：
overflow: hidden,float: left/right,display: inline-block等。 -
作用：
- 避免垂直margin重叠。
- 清除浮动（父元素触发BFC包裹浮动子元素）。
- 阻止元素被浮动覆盖。
3. Flex/Grid布局常见属性及用法？
答案：
-
Flex：
.container { display: flex; justify-content: center; /* 主轴对齐 */ align-items: center; /* 交叉轴对齐 */ flex-wrap: wrap; /* 换行 */ } -
Grid：
.container { display: grid; grid-template-columns: 1fr 2fr; /* 列宽比例 */ gap: 10px; /* 间距 */ }
三、JavaScript
1. 闭包原理、应用场景及内存泄漏风险？
答案
原理：函数嵌套，内部函数引用外部函数变量，形成闭包。
应用：模块化（私有变量）、防抖节流、柯里化。
内存泄漏：未及时释放闭包引用（如定时器未清除）。
2. 原型链、继承实现方式（ES5/ES6）？
答案
原型链继承：
JavaScript
function Parent() {}
function Child() {}
Child.prototype = new Parent(); // ES5方式
ES6 Class继承：
JavaScript
class Parent {}
class Child extends Parent {} // 通过extends关键字
3. Event Loop机制（宏任务/微任务执行顺序）？
答案
执行顺序：同步代码 → 微任务（Promise.then）→ 宏任务（setTimeout）。
示例：
JavaScript
setTimeout(() => console.log('宏任务'), 0);
Promise.resolve().then(() => console.log('微任务'));
// 输出顺序：微任务 → 宏任务
4. ES6+新特性？
答案
箭头函数：() => {}，无自己的this。
解构赋值：const { a, b } = obj;。
模板字符串：`Hello ${name}`。
Async/Await：基于Promise的异步语法糖
四、框架相关（React/Vue）
1. React生命周期（类组件/Hooks）？
答案：
-
类组件生命周期：
- 挂载阶段：
constructor→render→componentDidMount - 更新阶段：
shouldComponentUpdate→render→componentDidUpdate - 卸载阶段：
componentWillUnmount
- 挂载阶段：
-
Hooks替代方案：
useEffect(() => { // 相当于 componentDidMount/componentDidUpdate return () => { /* 相当于 componentWillUnmount */ }; }, [dependencies]);
2. Vue双向绑定原理（Object.defineProperty vs Proxy）？
答案：
Vue2（Object.defineProperty）：
通过劫持对象属性的getter/setter监听变化，需递归遍历对象，无法直接监听数组下标变化。
Vue3（Proxy）：
代理整个对象，支持监听动态新增属性和数组索引修改，性能更优。
3. 虚拟DOM Diff算法优化策略？
答案：
同级比较：仅同层级节点对比，减少复杂度。
Key优化：通过唯一key标识节点，避免重复渲染。
批量更新：合并多次数据变更，减少DOM操作次数。
4.状态管理工具（Redux/Vuex/Pinia）核心流程？
答案：
Redux：Action → Reducer → Store → View（单向数据流）。
Vuex：State → Mutations（同步） → Actions（异步） → Components。
Pinia：去除了Mutations，直接通过Actions修改状态，支持TypeScript。
五、浏览器与网络
1. 从输入URL到页面渲染的完整流程？
答案：
DNS解析：将域名转换为IP地址。
TCP连接：三次握手建立连接。
发送HTTP请求：浏览器发送请求报文。
服务器处理并返回响应：返回HTML/CSS/JS等资源。
浏览器解析渲染：构建DOM树 → CSSOM树 → 布局 → 绘制。
关闭TCP连接：四次挥手断开连接。
