前端开发面试题及答案

前端开发面试题及答案

一、单项选择题（共30题，每题1分）（以下题目覆盖前端核心基础知识，侧重概念理解与实践应用）

1.HTML5新增的语义化标签不包括以下哪项？A.headerB.sectionC.divD.footer

2.CSS选择器优先级从高到低排列正确的是？A.id选择器类选择器元素选择器后代选择器B.类选择器id选择器元素选择器后代选择器C.元素选择器类选择器id选择器后代选择器D.后代选择器元素选择器类选择器id选择器

3.JavaScript中，以下哪项不是原始数据类型？A.StringB.NumberC.ObjectD.Boolean

4.关于变量声明，以下代码执行后结果正确的是？console.loga;let a=10;A.输出10B.输出undefinedC.报错a isnot definedD.输出NaN第1页共14页

5.以下哪个方法可以将数组[1,2,3]转换为字符串1,2,3？A.[1,2,3].toStringB.[1,2,3].joinC.[1,2,3].concatD.[1,2,3].split,

6.浏览器的事件循环（Event Loop）中，以下哪个任务队列优先级最高？A.微任务（Microtask）B.宏任务（Macrotask）C.渲染任务D.网络请求任务

7.Vue中，以下哪个选项用于监听数据变化并执行副作用？A.dataB.computedC.watchD.methods

8.React中，useState的作用是？A.定义类组件B.管理组件状态C.执行副作用D.定义上下文

9.Webpack中，output配置的作用是？A.设置入口文件路径B.设置输出文件路径和名称C.配置模块解析规则第2页共14页D.定义插件列表

10.以下哪项不属于前端性能优化的关键指标？A.首屏加载时间B.首次内容绘制（FCP）C.白屏时间D.服务器响应时间

11.HTTP状态码中，403表示什么含义？A.服务器内部错误B.资源未找到C.权限不足D.请求参数错误

12.以下哪个是跨域资源共享（CORS）的响应头字段？A.Content-TypeB.Access-Control-Allow-OriginC.X-Requested-WithD.Set-Cookie

13.以下哪个不是CSS Flexbox布局的属性？A.justify-contentB.align-itemsC.grid-template-columnsD.flex-direction

14.JavaScript中，this关键字指向调用者的情况是？A.普通函数调用B.箭头函数调用C.call/apply调用第3页共14页D.bind调用

15.关于闭包的描述，正确的是？A.只能在函数内部定义B.会导致内存泄漏，应避免使用C.可以访问外部函数作用域的变量D.定义后立即执行

16.Vue3相比Vue2，核心改进不包括？A.响应式系统基于ProxyB.引入Composition APIC.移除v-if和v-elseD.支持TypeScript

17.React中，以下哪个方法用于组件卸载时清理副作用？A.useEffect的第二个参数为[]时执行B.useEffect的第二个参数为undefined时执行C.useEffect的返回函数D.useLayoutEffect

18.以下哪项不是前端安全问题？A.XSS（跨站脚本攻击）B.CSRF（跨站请求伪造）C.SQL注入D.XST（跨站跟踪）

19.CSS中，position:absolute的元素相对于哪个容器定位？A.最近的父元素（非static定位）B.浏览器视口C.根元素（html）第4页共14页D.自身包含块

20.以下哪个是JavaScript异步编程的方案？A.回调函数（Callback）B.PromiseC.async/awaitD.以上都是

21.关于前端路由，以下哪项是Hash模式的特点？A.不需要服务端配置B.路径中包含#C.支持刷新页面不404D.以上都是

22.Webpack中，loader的作用是？A.处理不同类型的文件B.打包输出文件C.定义插件D.设置环境变量

23.以下哪个是前端存储方案中，数据持久化且容量最大的？A.CookieB.localStorageC.sessionStorageD.IndexedDB

24.JavaScript中，数组的map方法返回值是？A.原数组修改后的副本B.新数组，包含原数组每个元素调用函数后的结果C.布尔值，表示是否有元素满足条件第5页共14页D.原数组是否有变化

25.Vue中，v-model指令的本质是？A.双向数据绑定B.单向数据绑定C.事件绑定D.样式绑定

26.React中，以下哪个是受控组件的特点？A.表单数据由组件状态管理B.表单数据由DOM自身管理C.不需要onChange事件D.数据变化时不会触发更新

27.以下哪项不属于前端构建工具？A.WebpackB.ViteC.BabelD.React

28.HTTP/2相比HTTP/

1.1的主要优势是？A.支持多路复用B.头部压缩C.二进制分帧D.以上都是

29.关于CSS Grid布局，以下描述正确的是？A.一维布局系统B.二维布局系统C.仅用于水平排列第6页共14页D.不支持响应式

30.JavaScript中，typeof null的结果是？A.nullB.objectC.undefinedD.报错

二、多项选择题（共20题，每题2分）（以下题目考察综合知识点，多选、少选、错选均不得分）

1.以下属于ES6新增特性的有？A.let/const声明B.箭头函数C.PromiseD.类（Class）E.模块（Module）

2.前端存储方案包括哪些？A.localStorageB.sessionStorageC.cookieD.IndexedDBE.sessionStorage

3.以下属于CSS盒模型组成部分的有？A.内容（Content）B.内边距（Padding）C.边框（Border）D.外边距（Margin）第7页共14页E.阴影（Box-shadow）

4.JavaScript中的异步编程模式有哪些？A.回调函数B.PromiseC.async/awaitD.生成器（Generator）E.事件监听

5.Vue组件通信方式包括？A.Props/EventsB.Vuex/PiniaC.provide/injectD.$parent/$childrenE.全局属性（$root）

6.React性能优化手段有哪些？A.使用React.memoB.使用useCallback/useMemoC.虚拟列表D.懒加载组件E.避免不必要的渲染

7.以下属于前端框架的有？A.VueB.ReactC.AngularD.Node.jsE.jQuery第8页共14页

8.常见的前端构建工具包括？A.WebpackB.ViteC.RollupD.BabelE.ESLint

9.以下属于HTTP请求方法的有？A.GETB.POSTC.PUTD.DELETEE.PATCH

10.前端安全问题包括？A.XSSB.CSRFC.点击劫持D.敏感信息泄露E.跨域请求

11.CSS中，用于控制元素显示/隐藏的属性有？A.display:noneB.visibility:hiddenC.opacity:0D.hiddenE.overflow:hidden

12.以下属于响应式设计实现方式的有？第9页共14页A.媒体查询（Media Queries）B.弹性布局（Flexbox）C.网格布局（Grid）D.相对单位（rem/em）E.固定像素（px）

13.关于前端工程化，以下描述正确的有？A.自动化构建B.代码规范C.版本控制D.测试E.部署

14.JavaScript中，以下哪些方法会修改原数组？A.pushB.popC.sliceD.spliceE.map

15.以下属于前端性能优化原则的有？A.减少资源体积B.优化资源加载C.提升渲染效率D.减少重排重绘E.避免网络请求

16.React Hooks包括以下哪些？A.useState第10页共14页B.useEffectC.useContextD.useReducerE.useLayoutEffect

17.以下属于前端状态管理库的有？A.ReduxB.VuexC.PiniaD.MobXE.Context API

18.关于前端模块化，以下描述正确的有？A.CommonJS（Node.js）B.AMD/RequireJSC.CMD/SeaJSD.ES ModuleE.全局变量

19.以下属于HTTP响应状态码的有？A.200B.304C.400D.500E.

20120.前端常见的动画实现方式有？A.CSS动画（transition/animation）B.Canvas动画第11页共14页C.SVG动画D.JavaScript动画（requestAnimationFrame）E.图片轮播

三、判断题（共20题，每题1分，正确打√，错误打×）

1.CSS中，id选择器的优先级高于class选择器（）

2.JavaScript中，null和undefined是同一概念（）

3.Vue中，computed属性会缓存结果，依赖变化时重新计算（）

4.React中，key属性在列表渲染时用于优化性能（）

5.HTTP请求中，GET方法可以携带请求体数据（）

6.Webpack默认会将所有文件打包到一个JS文件中（）

7.前端使用localStorage存储的数据会在浏览器关闭后消失（）

8.CSS中，flex:1表示元素占据剩余空间的100%（）

9.JavaScript中，箭头函数没有this绑定，会继承外层作用域的this（）

10.Vue3的响应式系统完全基于Object.defineProperty实现（）

11.前端路由的作用是实现单页应用（SPA）的页面切换（）

12.HTTP/2不支持多路复用（）

13.React的useEffect默认会在组件挂载和更新时执行（）

14.CSS中，position:fixed的元素相对于浏览器视口定位（）

15.JavaScript中，[1,2,3].includes4的结果是true（）

16.前端工程化的核心目标是提高开发效率和代码质量（）

17.Webpack的mode设置为development时会启用代码压缩（）

18.Vue中，v-if和v-show的本质区别是控制元素是否渲染（）

19.前端跨域的根本原因是浏览器的同源策略（）

20.React的useState可以更新多个状态（）第12页共14页

四、简答题（共2题，每题5分）

1.简述前端性能优化的常见手段（不超过150字）

2.解释闭包的概念及在实际开发中的应用场景（不超过150字）附参考答案

一、单项选择题C

2.A

3.C

4.B

5.A

6.A

7.C

8.B

9.B

10.DC

12.B

13.C

14.A

15.C

16.C

17.C

18.C

19.A

20.DD

22.A

23.D

24.B

25.A

26.A

27.D

28.A

29.B

30.B

二、多项选择题A,B,C,D,E

2.A,B,C,D,E

3.A,B,C,D

4.A,B,C,D

5.A,B,C,D,EA,B,C,D,E

7.A,B,C,E

8.A,B,C

9.A,B,C,D,E

10.A,B,C,DA,B,C

12.A,B,C,D

13.A,B,D,E

14.A,B,D

15.A,B,C,DA,B,C,D,E

17.A,B,C,D

18.A,B,C,D

19.A,B,C,D,E

20.A,B,C,D

三、判断题√

2.×

3.√

4.√

5.×

6.×

7.×

8.√

9.√

10.×√

12.×

13.√

14.√

15.×

16.√

17.×

18.√

19.√

20.×

四、简答题前端性能优化可从资源优化（压缩、懒加载）、渲染优化（减少DOM操作、虚拟DOM）、网络优化（缓存策略、CDN）、代码优化（减少冗余、按需加载）等方面入手，提升首屏加载速度和用户体验第13页共14页闭包是有权访问另一个函数作用域变量的函数工程中用于数据私有化（模块模式）、防抖节流、函数工厂等场景，通过保持对外部变量的引用实现数据隐藏和功能复用第14页共14页。