2025年上半年Web前端面试真题及答案.docxVIP

2025年上半年Web前端面试练习题及答案

1.如何理解HTML语义化？列举5个常用语义化标签并说明使用场景

HTML语义化是通过合理选择标签，让页面内容在结构和含义上更易被浏览器、搜索引擎及辅助工具（如屏幕阅读器）理解。常用语义化标签及场景：

`header`：页面或区域的头部，如网站导航、标题；

`nav`：导航链接集合，如主导航菜单；

`main`：页面主要内容（唯一），如文章主体；

`article`：独立可复用的内容块，如博客文章、评论；

`section`：主题相关的内容分组，如产品特性模块；

`aside`：侧边栏或补充信息，如相关链接、广告。

2.CSS中标准盒模型与IE盒模型的区别？如何通过boxsizing切换？

标准盒模型（contentbox）的width/height仅包含内容区（content），边框（border）和内边距（padding）会向外扩展；IE盒模型（borderbox）的width/height包含content+padding+border，内容区会被压缩以适应总尺寸。通过`boxsizing:contentbox`（默认）或`boxsizing:borderbox`切换。

3.解释Flex布局中flex:1的完整写法及计算逻辑

flex:1是`flexgrow:1;flexshrink:1;flexbasis:0%`的简写。计算逻辑：

flexbasis设为0%表示项目初始主尺寸由内容决定，但剩余空间分配时以0为基准；

flexgrow为1时，所有可增长项目按比例分配容器剩余空间；

flexshrink为1时，容器空间不足时项目按比例收缩。

例如，容器宽度500px，三个子元素flex:1，初始总基准0，剩余空间500px，各分配500/3≈166.67px。

4.简述JavaScript事件循环（EventLoop）机制，结合代码说明宏任务与微任务的执行顺序

事件循环是JS处理异步任务的核心机制，分为同步任务、微任务（Microtask）、宏任务（Macrotask）三个队列。执行顺序：

1.执行调用栈中的同步任务；

2.同步任务完成后，执行微任务队列（如Promise.then/catch/finally、MutationObserver）；

3.微任务队列清空后，执行宏任务队列中的一个任务（如setTimeout、setInterval、I/O、UI渲染）；

4.重复步骤23。

示例代码：

```javascript

console.log(1);//同步任务

setTimeout(()={

console.log(2);//宏任务

},0);

Promise.resolve().then(()={

console.log(3);//微任务

setTimeout(()={

console.log(4);//宏任务（嵌套）

},0);

});

console.log(5);//同步任务

```

执行顺序：1→5→3→2→4。

5.闭包的定义、作用及常见应用场景

闭包是函数与其词法环境的组合，使函数能访问外层函数作用域的变量，即使外层函数已执行完毕。作用：

封装私有变量（避免全局污染）；

延长变量生命周期。

常见场景：

模块模式（如IIFE创建私有方法）；

事件处理函数保留状态；

函数柯里化（如累加函数）；

防抖/节流函数（保留定时器状态）。

6.Vue3响应式原理中，Ref与Reactive的区别及使用场景

Reactive基于Proxy实现对象的响应式，适用于对象/数组；Ref基于对象包装（{value:xxx}）实现基础类型（如number、string）的响应式，同时也支持对象（会自动转为reactive）。区别：

Reactive无法直接解构（解构后失去响应性），需使用toRefs；

Ref访问值需通过.value属性，模板中可自动解包；

Reactive不支持基础类型（如constcount=reactive(1)会报错）。

场景：基础类型用Ref，对象/数组用Reactive；需解构响应式对象时用toRefs转换。

7.React中useEffect的依赖数组为空、包含变量、不填的区别？如何避免内存泄漏？

依赖数组为空（[]）：仅在组件挂载时执行一次（模拟componentDidMount）；

依赖数组包