招聘信息前端开发工程师面试题及答案.docxVIP

第PAGE页共NUMPAGES页

2026年招聘信息前端开发工程师面试题及答案

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

1.题（2分）：简述JavaScript中的闭包是什么，并举例说明其应用场景。

答：闭包是指在一个函数内部定义的函数可以访问其外部函数的变量。闭包的核心特点是可以访问并修改外部函数的局部变量，即使外部函数已经执行完毕。应用场景包括：

-数据私有化：隐藏内部状态，防止外部直接访问。

-函数柯里化：将多参数函数转化为单参数函数链式调用。

示例代码：

javascript

functionouter(){

letcount=0;

returnfunction(){

count++;

console.log(count);

}

}

constincrement=outer();

increment();//1

increment();//2

2.题（2分）：解释CSS中的盒模型（BoxModel），并说明`box-sizing:border-box`的作用。

答：盒模型由内容（Content）、边框（Border）、外边距（Margin）组成，默认情况下宽高只计算内容区域。`box-sizing:border-box`表示宽高包含边框和内边距，避免外边距导致布局错位。

示例：

css

.box{

width:200px;

border:10pxsolid;

box-sizing:border-box;

/宽度=200px，包含边框/

}

3.题（2分）：比较`let`和`var`在JavaScript中的作用域和提升（Hoisting）行为。

答：

-`var`：函数作用域，存在提升（声明先于赋值）。

-`let`：块级作用域，不存在提升（声明后赋值，否则报错）。

示例：

javascript

console.log(a);//undefined（var提升）

vara=1;

console.log(b);//ReferenceError（let不提升）

letb=2;

4.题（2分）：描述HTTP状态码301和302的区别。

答：

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

-302：临时重定向，搜索引擎保留原链接权重。

应用场景：301用于网站迁移，302用于A/B测试或开发环境切换。

5.题（2分）：解释事件冒泡和事件委托的概念，并说明其优缺点。

答：

-事件冒泡：子事件触发后逐级向上传递。

-事件委托：利用事件冒泡，在父级绑定统一事件处理。

优点：减少事件绑定开销，动态元素无需预绑定。

缺点：冒泡可能引发非目标事件触发（需`event.stopPropagation()`）。

示例代码：

javascript

document.getElementById(parent).addEventListener(click,e={

if(e.target.matches(.child)){

console.log(Childclicked);

}

});

二、HTML与CSS（共5题，每题3分，共15分）

6.题（3分）：如何实现一个全屏自适应的响应式布局，要求在移动端和桌面端均有良好显示效果。

答：

-使用`flexbox`或`grid`布局。

-CSS媒体查询（MediaQuery）适配不同设备。

示例：

css

html,body{

height:100%;

margin:0;

}

.container{

display:flex;

flex-direction:column;

min-height:100%;

}

@media(min-width:768px){

.container{

flex-direction:row;

}

}

7.题（3分）：解释CSS的`calc()`函数及其应用场景。

答：`calc()`用于计算CSS属性值，支持加减乘除。应用场景：

-动态宽高：如`width:calc(100%-20px)`。

-间距调整：如`margin:calc(5%+10px)`。

示例：

css

.box{

width:calc(50%-10px);

margin:0calc(5%-5px);

}

8.题（3分）：如何实现一个可折叠的折叠面板（Accordion）效果？

答：使用`checkbox`和`:checked`伪类控制面板展开/收起。

示例代码：

html

divclass=accordion

inputtype=checkboxid=panel1

labelfo