web前端笔试题及答案

web前端笔试题及答案

一、单项选择题（共30题，每题1分）（注每题只有一个正确答案，将正确选项的字母填入括号内）

1.以下哪个不是HTML5新增的语义化标签？（）A.header B.nav C.div D.section

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

3.JavaScript中，以下哪个不是基本数据类型？（）A.String B.Number C.Array D.Boolean

4.浏览器中，document.querySelector.box的作用是（）A.获取第一个class为box的元素B.获取所有class为box的元素C.获取第一个id为box的元素D.获取所有id为box的元素

5.以下关于CSS盒模型的描述，正确的是（）A.标准盒模型中，元素总宽度=content+padding+border+marginB.IE盒模型中，元素总宽度=content+margin（padding和border包含在content内）C.默认情况下，浏览器使用IE盒模型D.padding的取值只能是固定数值，不能是百分比

6.JavaScript中，this关键字指向调用当前函数的（）A.全局对象B.函数本身C.实例对象D.调用者对象

7.以下哪个不是HTTP请求方法？（）A.GET B.POST C.PUT D.SAVE

8.前端存储中，数据仅在会话结束后清除的是（）A.localStorage B.sessionStorage C.cookie D.IndexedDB第1页共10页

9.以下关于ES6箭头函数的描述，错误的是（）A.箭头函数没有自己的this B.箭头函数不能用作构造函数C.箭头函数必须使用大括号包裹函数体D.箭头函数简化了函数定义语法

10.浏览器渲染页面时，以下哪个阶段会解析HTML构建DOM树？（）A.解析阶段B.布局阶段C.绘制阶段D.合成阶段

11.以下哪个是JavaScript中的异步编程方案？（）A.回调函数B.Promise C.async/await D.以上都是

12.CSS中，position:absolute的元素相对于（）定位A.最近的已定位祖先元素B.浏览器窗口C.文档流中的普通位置D.父元素的padding区域

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

14.前端工程化中，以下哪个工具主要用于代码打包和构建？（）A.ESLint B.Webpack C.Babel D.Jest

15.HTTP状态码中，404表示（）A.服务器内部错误B.请求成功C.资源不存在D.权限不足

16.以下哪个不是Vue.js的核心概念？（）A.双向数据绑定B.虚拟DOM C.指令系统D.响应式原理

17.JavaScript中，Array.prototype.map方法的作用是（）A.遍历数组，对每个元素执行函数并返回新数组B.遍历数组，删除符合条件的元素第2页共10页C.遍历数组，对每个元素执行函数，无返回值D.遍历数组，返回第一个符合条件的元素

18.以下哪个CSS属性用于设置元素的外边距？（）A.margin B.padding C.border D.background

19.浏览器中，addEventListenerclick,handler的作用是（）A.为元素绑定点击事件处理函数B.移除元素的点击事件C.触发元素的点击事件D.判断元素是否有点击事件

20.以下关于前端性能优化的描述，错误的是（）A.减少HTTP请求次数可提升加载速度B.图片懒加载可降低初始加载流量C.使用内联CSS可减少DOM操作D.避免频繁操作DOM可提升渲染性能

21.以下哪个是React中的虚拟DOM特点？（）A.直接操作真实DOM B.以JavaScript对象形式存在C.只能在服务端使用D.比真实DOM体积大

22.CSS中，flex-direction:column的作用是（）A.子元素沿水平方向排列B.子元素沿垂直方向排列C.子元素居中对齐D.子元素两端对齐

23.JavaScript中，let和var的主要区别是（）A.let声明的变量可重新赋值，var不可B.let存在变量提升，var不存在C.let在块级作用域内有效，var在函数作用域内有效D.let和var无区别

24.以下哪个不是前端安全问题？（）A.XSS攻击B.CSRF攻击C.SQL注入D.以上都是安全问题第3页共10页

25.HTTP请求中，Content-Type:application/json表示请求体是（）A.表单数据B.JSON数据C.文件数据D.二进制数据

26.以下关于BOM对象的描述，正确的是（）A.window是BOM的核心对象B.document是BOM的核心对象C.location是BOM中用于操作表单的对象D.history用于设置元素样式

27.CSS中，@media查询的作用是（）A.设置元素背景色B.实现响应式布局C.定义动画效果D.设置字体样式

28.JavaScript中，JSON.stringify的作用是（）A.将JSON字符串转换为JavaScript对象B.将JavaScript对象转换为JSON字符串C.解析JSON文件D.验证JSON格式

29.以下关于前端模块化的描述，正确的是（）A.ES6的import/export是模块化方案B.CommonJS是浏览器端标准模块化方案C.模块化会增加代码体积，应避免使用D.模块化仅用于大型项目

30.浏览器中，以下哪个API可用于在客户端存储大量结构化数据？（）A.cookie B.localStorage C.sessionStorage D.IndexedDB

二、多项选择题（共20题，每题2分）（注每题至少有一个正确答案，将正确选项的字母填入括号内，多选、少选、错选均不得分）

1.以下属于HTML5新增的API有（）第4页共10页A.Geolocation APIB.Canvas APIC.WebSocket APID.DOMAPI

2.CSS中，可用于实现居中对齐的方法有（）A.margin:0auto B.text-align:centerC.flex justify-content:center D.position:absolute;top:50%;left:50%;transform:translate-50%,-50%

3.JavaScript中的数据类型有（）A.Undefined B.Null C.Object D.Symbol

4.以下关于HTTP状态码的描述，正确的有（）A.200表示请求成功B.301表示永久重定向C.400表示请求参数错误D.500表示服务器内部错误

5.前端性能优化的常用手段有（）A.代码压缩B.图片优化（压缩、WebP格式）C.懒加载D.服务端渲染

6.Vue.js中，以下哪些是常用指令？（）A.v-bind B.v-model C.v-if D.v-for

7.JavaScript中的事件流包括（）A.事件捕获B.事件冒泡C.事件委托D.事件监听

8.以下属于前端框架的有（）A.Vue B.React C.Angular D.jQuery

9.CSS中，可用于设置背景的属性有（）A.background-color B.background-imageC.background-repeat D.background-size

10.异步编程中，Promise的状态有（）A.Pending B.Resolved C.Rejected D.Completed第5页共10页

11.以下关于ES6的描述，正确的有（）A.引入了let和const声明变量B.支持箭头函数C.提供了class语法糖D.新增了for...of循环

12.前端存储方案中，数据存储在客户端的有（）A.localStorage B.sessionStorage C.cookie D.数据库

13.以下属于前端安全防护措施的有（）A.输入过滤（防XSS）B.CSRF TokenC.敏感信息加密D.避免使用eval

14.JavaScript中，数组的常用方法有（）A.push B.pop C.slice D.splice

15.以下关于BOM对象的描述，正确的有（）A.window对象是所有BOM对象的根B.location对象用于获取URL信息C.history对象可实现页面前进后退D.navigator对象可获取浏览器信息

16.CSS中，可用于控制元素显示/隐藏的方法有（）A.display:none B.visibility:hiddenC.opacity:0D.height:0;overflow:hidden

17.以下关于HTTP请求的描述，正确的有（）A.请求行包含请求方法、URL和协议版本B.请求头包含客户端信息和请求参数C.请求体用于传递数据（如POST请求）D.响应状态码在响应行中

18.Vue.js中，组件通信的方式有（）A.Props/Events B.Vuex C.插槽D.provide/inject第6页共10页

19.以下属于前端工程化工具的有（）A.Webpack B.Vite C.Babel D.ESLint

20.JavaScript中，可用于遍历对象的方法有（）A.for...in B.Object.keys C.Object.values D.Array.prototype.forEach

三、判断题（共20题，每题1分）（注对的打“√”，错的打“×”）

1.HTML5中，main标签表示页面的主要内容区域（）

2.CSS中，float:left会使元素脱离文档流，导致父元素高度塌陷（）

3.JavaScript中，typeof null的结果是“object”（）

4.浏览器的“同源策略”会阻止不同源的页面相互访问数据（）

5.Vue.js中，v-if和v-show都可以控制元素显示/隐藏，两者无区别（）

6.HTTP协议是无状态协议，即每次请求相互独立（）

7.前端性能优化中，减少DOM操作次数可提升渲染效率（）

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

9.CSS中，z-index属性可用于设置元素的层级，值越大层级越高（）

10.前端模块化方案中，ES6的import可以在浏览器和Node.js环境中使用（）

11.浏览器渲染时，“重排”（Reflow）比“重绘”（Repaint）性能消耗更低（）第7页共10页

12.React中，setState是异步更新的，直接修改this.state可能导致数据不一致（）

13.JavaScript中，Array.prototype.includes方法用于检查数组是否包含某个元素（）

14.CSS中，box-sizing:border-box表示元素总宽度=content+padding+border（）

15.前端安全中，XSS攻击的核心是注入恶意脚本（）

16.浏览器的“缓存机制”可通过设置HTTP响应头（如Cache-Control）控制（）

17.JavaScript中，let声明的变量存在变量提升，可在声明前使用（）

18.Vuex中，mutations用于直接修改状态，actions用于提交mutations（）

19.CSS中，flex-grow属性用于设置子元素在容器中的缩放比例（）

20.前端工程化中，Babel主要用于将ES6+代码转换为兼容性代码（）

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

1.简述浏览器渲染页面的基本流程

2.说明Promise的三种状态及状态转换规则附标准答案

一、单项选择题1-5:C AC A A6-10:D DB CA11-15:D A B BC第8页共10页16-20:B AAAC21-25:B BC CB26-30:ABB AD

二、多项选择题1:ABC2:ABCD3:ABCD4:ABCD5:ABCD6:ABCD7:AB8:ABC9:ABCD10:ABC11:ABCD12:ABC13:ABCD14:ABCD15:ABCD16:ABCD17:ACD18:ABD19:ABCD20:ABC

三、判断题1:√2:√3:√4:√5:×6:√7:√8:√9:√10:×11:×12:√13:√14:√15:√16:√17:×18:√19:√20:√

四、简答题浏览器渲染流程

①解析HTML构建DOM树；

②解析CSS构建CSSOM树；

③合并DOM和CSSOM生成渲染树（Render Tree）；

④计算布局（Layout），确定元素大小和位置；

⑤绘制（Paint）像素；

⑥合成（Composite）显示到屏幕Promise状态及转换三种状态Pending（进行中）、Fulfilled（成功）、Rejected（失败）转换规则Pending→Fulfilled调用resolve方法，状态不可逆；Pending→Rejected调用reject方法，状态不可逆；第9页共10页Fulfilled/Rejected状态不可相互转换第10页共10页。