2025年前端面试题归总(含答案).docxVIP

2025年前端面试题归总(含答案)

HTML部分：

Q：请解释HTML语义化的意义，常见的语义化标签有哪些？

A：HTML语义化指通过合理使用具有明确含义的标签描述内容结构，而非仅依赖表现。意义包括：提升可访问性（屏幕阅读器能正确解析）、利于SEO（搜索引擎更易理解内容层级）、增强代码可维护性。常见标签：`header`（页面/区域头部）、`nav`（导航）、`main`（主要内容）、`article`（独立内容块）、`section`（主题性分组）、`aside`（侧边栏）、`footer`（页脚）、`figure`（图文组合）、`figcaption`（图注）。需注意`div`和`span`是无语义通用容器，应避免滥用。

CSS部分：

Q：CSS盒模型有哪几种？如何切换？标准盒模型与IE盒模型的区别是什么？

A：盒模型分为标准盒模型（content-box）和IE盒模型（border-box）。通过`box-sizing`属性切换，默认值为`content-box`，设置`box-sizing:border-box`切换为IE盒模型。区别：标准盒模型的`width/height`仅包含内容区（content），不包含内边距（padding）、边框（border）；IE盒模型的`width/height`包含content+padding+border，实际显示尺寸固定为设置值，内边距和边框会向内挤压内容区。

Q：什么是BFC？触发条件和应用场景有哪些？

A：BFC（块级格式化上下文）是CSS中一个独立的渲染区域，内部元素的布局不受外部影响，且区域内元素会按块级盒标准布局。触发条件包括：根元素（`html`）、`float`不为none、`position`为absolute或fixed、`display`为inline-block/table-cell/table-caption/flex/grid、`overflow`不为visible。应用场景：解决浮动元素导致的父容器高度塌陷（父元素触发BFC后会包含浮动子元素）、避免相邻块级元素的margin重叠（同一BFC内的相邻块级元素margin会合并，不同BFC则不会）、防止文字环绕（BFC元素与浮动元素并列时，内容不会被浮动元素覆盖）。

JavaScript部分：

Q：简述事件循环（EventLoop）的执行机制，浏览器与Node.js的事件循环有何区别？

A：事件循环是JS处理异步任务的核心机制，分为同步任务和异步任务。执行流程：1.执行调用栈中的同步任务；2.同步任务执行完毕后，遍历微任务队列（MicrotaskQueue），执行所有微任务；3.微任务执行完毕后，根据当前渲染时机（如浏览器的重绘阶段），可能触发UI渲染；4.渲染完成后，从宏任务队列（MacrotaskQueue）中取出一个宏任务执行，重复步骤2-4。

浏览器与Node.js的区别主要在微任务和宏任务的分类及执行顺序：

-浏览器的微任务包括`Promise.then()`、`MutationObserver`、`process.nextTick`（仅Node）；宏任务包括`setTimeout`、`setInterval`、`setImmediate`（仅Node）、I/O、UI事件。

-Node.js在事件循环中增加了`check`阶段（执行`setImmediate`）和`closecallbacks`阶段（处理关闭事件）。特别地，Node的`process.nextTick`会在当前阶段结束后立即执行，早于其他微任务（如`Promise.then`），属于“次微任务”。

Q：原型链的作用是什么？如何实现继承？

A：原型链是JS实现继承的核心机制。每个对象（除`null`）都有一个`__proto__`属性指向其原型对象，原型对象又有自己的原型，最终指向`Object.prototype`，其`__proto__`为`null`，形成原型链。作用：当访问对象属性时，若对象自身无该属性，会沿原型链向上查找，直到找到或到达`null`。

实现继承的常见方式：

1.原型链继承：`Child.prototype=newParent()`，缺点是子实例共享父实例的引用类型属性；

2.构造函数继承：`functionChild(){Parent.call(this);}`，缺点是无法继承原型方法；

3.组合继承（最常用）：结合原型链和构造函数继承，`Child.prototype=newParent();Child.prototype.constructor=Child;`，但会调用