Web前端开发基础笔试试题

Web前端开发基础笔试试题考试时长：90分钟满分：100分适用人群：前端初级开发、实习生、求职笔试答题说明：请独立完成作答，答案书写规范，实操题需保证代码可正常运行，无语法错误。一、单项选择题（共15题，每题2分，共30分）每题只有一个正确答案，请将正确选项填入括号内1.以下不属于HTML5新增语义化标签的是（）A.headerB.footerC.divD.article2.关于CSS盒模型，下列说法正确的是（）A.默认标准盒模型宽度包含padding和borderB.border-box模式下，元素设定的宽高包含padding、borderC.margin会改变元素自身的实际尺寸D.padding可以设置负值3.以下CSS属性中，可实现元素水平垂直居中且适配不定宽高元素的是（）A.margin:0autoB.text-align:centerC.transform:translate(-50%,-50%)D.line-height4.CSS中position的默认值是（）A.staticB.relativeC.absoluteD.fixed5.下列关于JavaScript变量声明的说法，错误的是（）A.var存在变量提升，可重复声明B.let和const存在块级作用域C.const声明的变量不可修改任何内容D.未声明直接赋值的变量会成为全局变量6.以下不属于JavaScript基本数据类型的是（）A.StringB.NumberC.ArrayD.Undefined7.关于this指向，普通函数独立调用时，浏览器环境下this指向（）A.函数本身B.window对象C.nullD.undefined8.以下数组方法中，不会改变原数组的是（）A.pushB.spliceC.mapD.reverse9.阻止事件冒泡的标准浏览器方法是（）A.event.stopPropagation()B.event.preventDefault()C.event.cancelBubbleD.returnfalse10.HTML中以下标签默认自带换行效果的是（）A.spanB.aC.pD.em11.实现网页平滑滚动，可使用的CSS属性是（）A.scroll-behaviorB.overflowC.transitionD.animation12.以下关于async/await的说法正确的是（）A.await可以单独使用，无需搭配asyncB.async函数返回值一定是Promise对象C.await可以阻塞所有代码执行D.async函数内部无法捕获异常13.清除浮动最推荐、无副作用的方式是（）A.父元素设置overflow:hiddenB.空div清除浮动C.伪类after清除浮动D.父元素设置高度14.下列选择器优先级最高的是（）A.类选择器B.ID选择器C.标签选择器D.通配符选择器15.本地存储中，数据永久存储、手动清除才会失效的是（）A.sessionStorageB.localStorageC.cookieD.以上都不是二、多项选择题（共5题，每题3分，共15分，多选、少选、错选均不得分）1.以下属于行内块元素特性的有（）A.不独占一行B.可以设置宽高C.默认垂直居中对齐D.内外边距均可设置2.下列关于闭包的作用，说法正确的有（）A.保存私有变量，避免全局污染B.延长变量生命周期C.可以实现模块化开发D.不会产生内存占用问题3.以下属于ES6新增特性的有（）A.箭头函数B.解构赋值C.PromiseD.var声明变量4.前端常见的页面渲染优化方式有（）A.减少DOM操作次数B.避免频繁重排重绘C.使用防抖节流优化高频事件D.合理使用CSS硬件加速5.关于HTTP与HTTPS的区别，说法正确的有（）A.HTTPS更加安全，具备加密机制B.HTTP端口80，HTTPS端口443C.HTTPS无需证书即可使用D.HTTP传输数据为明文三、填空题（共5空，每空2分，共10分）1.CSS中，设置元素透明度且不影响子元素的属性是________。2.JavaScript中，判断一个变量是否为数组的精准方法是________。3.事件触发的三个阶段依次是：捕获阶段、________、冒泡阶段。4.解构赋值中，对象解构的变量名必须和对象________一致。5.节流的核心作用是________高频事件触发频率。四、简答题（共4题，每题5分，共20分）1.简述重排（回流）和重绘的区别，以及日常开发中如何减少二者的触发？2.说说var、let、const三者的区别，分别适用于什么场景？3.简述Promise的三种状态及状态切换规则。4.什么是防抖和节流？请分别举例说明实际业务使用场景。五、编程实操题（共2题，第1题10分，第2题15分，共25分）1.基础代码实现（10分）请手写原生JS代码，完成以下需求：（1）定义一个数组，包含5个任意数字；（2）筛选出数组中大于10的数字，生成新数组；（3）将新数组中的每个数字乘以2；（4）遍历最终数组，在控制台打印每一个元素。2.页面布局实操（15分）使用原生HTML+CSS完成布局，要求如下：（1）实现一个通栏头部导航栏，高度60px，背景色#222；（2）导航栏内包含4个导航文字，水平均匀分布、垂直居中，文字颜色白色、间距均匀；（3）页面适配移动端，屏幕宽度小于768px时，导航文字居中堆叠排列；（4）代码规范，使用语义化标签，CSS样式整洁无冗余。参考答案（简略版）一、单选题1.C2.B3.C4.A5.C6.C7.B8.C9.A10.C11.A12.B13.C14.B15.B二、多选题1.ABD2.ABC3.ABC4.ABCD5.ABD三、填空题1.rgba()2.Array.isArray()3.目标阶段4.属性名5.限制四、简答题（核心得分点）1.重排重绘区别与优化区别：重绘是元素样式改变、不改变布局的渲染过程；重排是元素布局、尺寸、位置改变引发的页面重新布局，重排一定会触发重绘，重绘不一定触发重排。优化：批量修改DOM样式、使用文档碎片、避免频繁读取DOM属性、使用CSS类名统一修改样式、开启硬件加速等。2.var/let/const区别var：函数级作用域、存在变量提升、可重复声明、可修改；适用于旧项目兼容、全局临时变量。let：块级作用域、无变量提升、不可重复声明、可修改；适用于循环变量、临时可变变量。const：块级作用域、无变量提升、不可重复声明、值不可修改（引用类型可改属性）；适用于常量、引用类型数据声明。3.Promise三种状态pending（进行中）、fulfilled（成功）、rejected（失败）。规则：初始为pending