前端工程师面试题及答案.docxVIP

第PAGE页共NUMPAGES页

2026年前端工程师面试题及答案

一、基础知识（共5题，每题10分，总分50分）

题目1（10分）

请解释JavaScript中的事件冒泡和事件捕获机制，并说明在实际开发中如何阻止事件冒泡。

答案：

事件冒泡是指当子元素上触发事件时，该事件会逐级向上传递到父元素。事件捕获则是从最外层元素开始向内层元素传递。默认情况下，事件流先进行捕获阶段，然后执行目标元素上的事件处理，最后进行冒泡阶段。

阻止事件冒泡可以使用`event.stopPropagation()`方法。例如：

javascript

element.addEventListener(click,function(event){

event.stopPropagation();

});

题目2（10分）

解释JavaScript中的闭包是什么，并给出一个实际应用场景。

答案：

闭包是指函数内部可以访问外部函数的变量，即使外部函数已经执行完毕。这是因为内部函数保存了对外部函数作用域的引用。

实际应用场景：实现私有变量。例如：

javascript

functioncreateCounter(){

letcount=0;

return{

increment:function(){

count++;

returncount;

},

decrement:function(){

count--;

returncount;

}

};

}

题目3（10分）

比较Promise、Promise.all和async/await的异同。

答案：

Promise是异步编程的基础，表示一个尚未完成但最终会完成的操作。Promise.all同时处理多个Promise，只有全部完成才返回结果。async/await是ES7引入的语法糖，使异步代码更像同步代码。

主要区别：

1.Promise需要手动处理链式调用，async/await自动处理。

2.Promise.all处理多个异步操作，async/await通过嵌套实现。

3.async/await代码可读性更高，更符合同步编程思维。

题目4（10分）

解释CSS中的盒模型（标准盒模型和IE盒模型）的区别，并说明如何统一处理。

答案：

标准盒模型：width和height只包含内容区域。IE盒模型：width和height包含内容、内边距和边框。

统一处理：

css

,::before,::after{

box-sizing:border-box;

}

题目5（10分）

说明HTTP状态码301、302和404的区别。

答案：

301：永久重定向，搜索引擎会更新链接。

302：临时重定向，保持原有链接权重。

404：资源不存在，403是禁止访问。

二、HTML与CSS（共6题，每题10分，总分60分）

题目6（10分）

解释HTML5中的新元素（如header、nav、section）与div的区别。

答案：

新元素具有语义化意义，便于SEO和可访问性。div是通用容器，没有特定含义。例如：

html

header网站头部/header

nav导航栏/nav

section内容区域/section

题目7（10分）

如何实现一个三栏布局，要求中间栏固定宽度，左右栏自适应。

答案：

使用Flexbox：

css

.container{

display:flex;

}

.left,.right{

flex-grow:1;

}

.center{

width:500px;

margin:010px;

}

题目8（10分）

解释CSS的BFC模型及其应用场景。

答案：

BFC（块级格式化上下文）是页面布局的一部分，具有以下特点：

1.内部元素不影响外部元素

2.同一BFC内垂直方向margin会重叠

3.计算宽度时只考虑内部元素

应用场景：防止浮动引起的双重边距问题、清除浮动等。

题目9（10分）

如何实现一个响应式设计，适应不同屏幕尺寸。

答案：

使用媒体查询：

css

.container{

width:100%;

}

@media(min-width:768px){

.container{

width:750px;

margin:0auto;

}

}

@media(min-width:992px){

.container{

width:970px;

}

}

题目10（10分）

解释CSS的伪类和伪元素的区别。

答案：

伪类：表示元素的状态（如:hover,:focus）。

伪元素：创建出元素的内容（如::before,::after）。

题目11（10分）

如何优化长列表的滚动性能。

答案：

1.使用虚