前端面试题和答案2025 s掘金

前端面试题和答案2025s掘金###

一、选择题（本题型共15题，每题2分，共30分）

1.以下哪个HTML标签不属于语义化标签？（）A.div B.nav C.article D.section

2.CSS中，以下哪种选择器的优先级最高？（）A.类选择器B.ID选择器C.标签选择器D.属性选择器

3.下列关于HTML5新增表单元素的描述，错误的是？（）A.datalist提供输入建议B.keygen用于表单验证C.output用于显示计算结果D.progress表示任务进度

4.JavaScript中，以下哪个方法会改变原数组？（）A.slice B.map C.splice D.concat

5.CSS中，box-sizing:border-box的作用是？（）A.宽度包含内边距和边框B仅宽度包含边框C.宽度仅包含内容区D.高度包含内边距和边框

6.以下关于事件冒泡的描述，正确的是？（）A.事件冒泡是从子元素向父元素传播B.事件冒泡无法阻止C.使用stopPropagation会阻止所有冒泡D.冒泡事件不会触发默认行为

7.下列不是JavaScript数据类型的是？（）A.Undefined B.Number C.Boolean D.Array

8.CSS中，以下哪个属性用于实现元素的水平居中？（）A.text-align:center B.margin:0auto C.justify-content:center D.align-items:center

9.HTTP状态码中，404表示的含义是？（）第1页共14页A.服务器内部错误B.请求成功C.资源不存在D.权限不足

10.JavaScript中，Promise对象的哪个方法用于处理成功后的回调？（）A.catch B.then C.finally D.resolve

11.以下哪个不是CSS Flex布局的属性？（）A.flex-direction B.justify-content C.align-content D.position

12.HTML中，以下哪个标签用于定义表格的表头单元格？（）A.td B.th C.tr D.table

13.JavaScript中，let和var的主要区别是？（）A.let声明的变量可以重新赋值B.let有块级作用域C.var声明的变量可在声明前访问D.两者无区别

14.以下关于跨域的描述，错误的是？（）A.跨域是浏览器的安全限制B.同源策略指协议、域名、端口相同C.JSONP通过动态创建script标签实现跨域D.CORS需要服务器端设置Access-Control-Allow-Methods

15.CSS中，transition属性的作用是？（）A.定义元素的过渡效果B.设置元素的背景色C.实现元素的定位D.定义元素的动画效果###

二、判断题（本题型共10题，每题1分，共10分）

1.CSS中，display:inline-block的元素不会独占一行，且可以设置宽高（）

2.JavaScript中，null是一个对象类型（）

3.HTML5的localStorage是会话级存储，关闭浏览器后数据会丢失（）第2页共14页

4.事件委托的主要优点是减少事件监听器的数量，提高性能（）

5.CSS中，z-index属性仅对position值为static的元素生效（）

6.JavaScript的原型链是一种继承方式，每个对象都有一个原型对象（）

7.HTTP请求中的GET方法可以提交大量数据（）

8.ES6中，箭头函数没有自己的this，继承自外层作用域的this（）

9.CSS中，box-shadow属性用于给元素添加阴影效果（）

10.JavaScript的async/await语法是Promise的语法糖，用于简化异步代码（）###

三、填空题（本题型共10题，每题2分，共20分）请在空白处填入正确内容

1.HTML5中，用于定义视频的标签是________

2.CSS中，实现元素固定定位的属性是________

3.JavaScript中，用于获取DOM元素的方法有________（至少写2个）

4.HTTP请求中，常见的请求头有________（至少写2个）

5.CSS的媒体查询语法中，用于设置屏幕宽度小于768px时的样式是________

6.JavaScript中，事件循环的三个阶段依次是________→________→________

7.HTML语义化的主要作用是________

8.CSS中，calc函数的作用是________第3页共14页

9.前端工程化常见的工具或框架有________（至少写2个）（如Webpack、Babel等）

10.JavaScript中，处理异步操作的常见方案有________（至少写3个）###

四、简答题（本题型共8题，每题4分，共32分）请简要回答以下问题

1.简述闭包的概念及主要应用场景

2.解释什么是原型链，以及JavaScript中实现继承的几种方式

3.说明CSS中的BFC（块格式化上下文）是什么，以及触发BFC的条件

4.描述JavaScript中的事件循环机制，并举例说明同步任务和异步任务的执行顺序

5.解释HTTP缓存的分类（至少写出3种），并说明它们的区别

6.什么是跨域？请列举3种常见的跨域解决方案及原理

7.简述前端性能优化的常用策略（至少写出5种）

8.解释什么是虚拟DOM，以及它的优缺点###

五、代码题（本题型共5题，每题5分，共25分）请根据题目要求编写代码

1.实现一个防抖函数（debounce），要求当事件触发后n秒内函数执行，若n秒内触发则重新计时

2.编写一个函数，将数组[1,[2,[3,[4,5],6],7],8]扁平化处理为一维数组

3.实现Promise.all方法，要求接收一个Promise数组，返回一个新的Promise，当所有Promise都成功时，返回结果数组；若有一个失败，直接返回失败的结果第4页共14页

4.用CSS Flex布局实现一个三栏式布局，左侧固定宽度200px，右侧固定宽度150px，中间内容自适应

5.用ES6语法实现一个简单的类（Class），包含属性name和方法greet，返回“Hello,Im[name]”###

六、案例分析题（本题型共3题，每题15分，共45分）请分析以下案例并回答问题

1.**案例**```html!DOCTYPE htmlhtmlheadstyle.box{width:200px;height:200px;background:red;transition:width1s;}.box:hover{width:300px;/*期望hover时宽度从200px变为300px，平滑过渡*/}/style/headbody第5页共14页div class=box/div/body/html```**问题**上述代码中，当鼠标悬停在.box元素上时，元素宽度未实现平滑过渡，可能的原因是什么？如何修正？

2.**案例**```javascript//异步代码setTimeout={console.logsetTimeout;},0;new Promiseresolve={resolve;}.then={console.logPromise then;};console.log同步代码;```**问题**以上代码的执行顺序是什么？为什么？若将Promise的resolve改为异步操作（如setTimeout），执行顺序会如何变化？

3.**案例**某电商网站首页使用了大量图片，导致页面加载速度慢，用户体验差第6页共14页**问题**请从前端角度分析可能的原因，并提出至少5种优化方案###

七、论述题（本题型共3题，每题10分，共30分）请结合前端开发实际，论述以下问题

1.详细说明前端模块化的发展历程（如CommonJS、AMD、CMD、ESModule），并比较它们的优缺点

2.阐述前端安全的常见威胁（如XSS、CSRF、SQL注入等），并针对XSS攻击说明防御措施

3.解释前端工程化的概念及核心目标，列举至少5个前端工程化工具，并说明它们的主要功能作用###参考答案####

一、选择题

1.A

2.A

3.B

4.C

5.A

6.A

7.D

8.B

9.C

10.B

11.D

12.B

13.B

14.D

15.A####

二、判断题

1.√

2.×

3.×

4.√

5.×

6.√

7.×

8.√

9.√

10.√####

三、填空题

1.video

2.position:fixed

3.getElementById、querySelector（或getElementsByClassName、getElementsByTagName）

4.Accept、Content-Type、User-Agent（任写2个）第7页共14页

5.@media screenand max-width:767px

6.调用栈、宏任务队列、微任务队列

7.便于浏览器解析、提升可访问性、有利于SEO优化

8.计算动态值（如宽度=100%-200px）

9.Webpack、Babel、ESLint（任写2个）

10.Callback、Promise、async/await（任写3个）####

四、简答题

1.闭包是指有权访问另一个函数作用域中变量的函数，通常由函数嵌套形成应用场景数据私有化、函数工厂、防抖节流实现、模块化等

2.原型链是对象通过`__proto__`属性串联起来的继承链，每个对象的属性和方法通过原型链向上查找实现继承的方式原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、Class继承等

3.BFC（块格式化上下文）是一个独立的渲染区域，内部元素的布局不受外部影响触发条件float不为none、overflow不为visible、display为inline-block/flex/grid等、position为absolute/fixed

4.事件循环是JavaScript处理异步的机制，主线程先执行同步任务，遇到异步任务（如setTimeout、Promise.then）放入任务队列，同步任务执行完后，依次执行微任务队列（Promise.then、async/await），再执行宏任务队列（setTimeout、setInterval）例同步代码→Promise.then（微任务）→setTimeout（宏任务）

5.HTTP缓存分类强缓存（Expires、Cache-Control）、协商缓存（Last-Modified/If-Modified-Since、ETag/If-None-Match）、私有第8页共14页缓存、公共缓存等区别强缓存不发请求，协商缓存发请求由服务器判断是否使用缓存

6.跨域是指浏览器因同源策略（协议、域名、端口一致）阻止不同源资源访问的现象解决方案JSONP（动态创建script标签，利用src属性无跨域限制）、CORS（服务器设置Access-Control-Allow-Origin等响应头）、代理服务器（如Webpack DevServer代理）、postMessage（窗口间通信）等

7.前端性能优化策略减少HTTP请求（合并文件、图片懒加载）、优化资源加载（压缩代码、图片优化、使用CDN）、减少重排重绘（批量DOM操作、使用absolute/fixed脱离文档流）、缓存策略优化、代码分割、预加载等

8.虚拟DOM是用JavaScript对象模拟DOM树结构，当数据变化时，先比较新旧虚拟DOM的差异，再只更新变化的部分到真实DOM优点提升性能（减少DOM操作）、跨平台（可渲染到不同平台）、状态管理方便缺点首次渲染可能比直接操作DOM慢（需构建虚拟DOM）####

五、代码题

1.防抖函数实现```javascriptfunction debouncefn,delay{let timer=null;return function...args{clearTimeouttimer;timer=setTimeout={fn.applythis,args;},delay;第9页共14页};}```

2.数组扁平化```javascriptfunction flattenarr{return arr.reduceacc,val={return acc.concatArray.isArrayvalflattenval:val;},[];}```

3.Promise.all实现```javascriptPromise.myAll=functionpromises{return newPromiseresolve,reject={if!Array.isArraypromises{return rejectnewTypeError参数必须是数组;}const result=[];let count=0;if promises.length===0{return resolveresult;}promises.forEachpromise,index={Promise.resolvepromise.thendata={第10页共14页result[index]=data;count++;if count===promises.length{resolveresult;}}.catchreject;};};};```

4.三栏式布局（Flex）```css.container{display:flex;}.left{width:200px;height:500px;background:#f00;}.main{flex:1;/*自适应*/height:500px;background:#0f0;}第11页共14页.right{width:150px;height:500px;background:#00f;}```

5.ES6类实现```javascriptclass Person{constructorname{this.name=name;}greet{return`Hello,Im${this.name}`;}}```####

六、案例分析题

1.原因CSS中`transition`属性的宽度变化未设置初始状态，或`width`属性未定义过渡效果修正确保`.box`有明确的初始宽度（如`width:200px`），并在`.box`上定义`transition:width1s`

2.首次执行顺序同步代码→Promise then→setTimeout原因Promise.then属于微任务，setTimeout属于宏任务，微任务在同步任务后、宏任务前执行若Promise中改为异步（如第12页共14页`setTimeoutresolve,0`），则执行顺序变为同步代码→setTimeout（宏任务1）→Promise then（微任务）→setTimeout（宏任务2）

3.优化方案

①图片懒加载（使用`loading=lazy`属性或Intersection ObserverAPI）；

②图片压缩（使用TinyPNG等工具）；

③使用WebP格式图片（比JPEG/PNG更小）；

④图片预加载策略（预加载关键图片）；

⑤CDN加速（将图片部署到CDN，减少源站请求）；

⑥减少图片数量（使用CSS背景图代替小图片）；

⑦图片尺寸适配（根据设备加载不同分辨率图片）####

七、论述题

1.模块化发展历程

①CommonJS（Node.js环境，同步加载，require/module.exports）；

②AMD（异步加载，require.js，define/require）；

③CMD（通用模块定义，sea.js，与AMD类似但更注重依赖就近）；

④ES Module（ES6标准，静态加载，import/export，浏览器/Node.js均支持）优缺点CommonJS同步、适合服务端；AMD/CMD异步、适合浏览器但语法复杂；ES Module静态、生态完善、支持Tree-shaking

2.前端安全威胁XSS（跨站脚本攻击，注入恶意脚本）、CSRF（跨站请求伪造，利用用户身份执行未授权操作）、SQL注入（注入SQL代码获取数据）、点击劫持（iframe嵌套诱导用户点击）等XSS防御措施

①输入过滤（过滤特殊字符，如、、）；

②输出编码（HTML编码、JavaScript编码）；

③使用CSP（内容安全策略，限制资源加载来源）；

④设置HttpOnly和SameSite Cookie属性；

⑤避免使用innerHTML插入用户输入内容第13页共14页

3.前端工程化概念通过工具和规范将前端开发流程标准化、自动化，提升开发效率和代码质量核心目标模块化、规范化、自动化、优化化工具及功能

①Webpack（模块打包、代码分割、Tree-shaking）；

②Babel（ES6+转ES

5、代码转换）；

③ESLint（代码检查、规范代码风格）；

④Git/Husky（版本控制、提交前代码检查）；

⑤PostCSS（CSS预处理/后处理，自动添加浏览器前缀）；

⑥PWA（渐进式Web应用优化）；

⑦Vite（快速开发服务器、按需编译）；

⑧Jest（单元测试工具）第14页共14页。