Web前端初级工程师笔试题

Web前端初级工程师笔试题考试时长：60分钟满分：100分说明：本试题涵盖HTML、CSS、JavaScript基础及实战应用，无特殊偏难题型，侧重考察日常开发基本功与实操思维，请独立完成作答。一、单选题（共15题，每题3分，共45分）1.以下哪个标签不属于HTML5新增语义化标签？（）A.headerB.sectionC.iframeD.article2.CSS中，以下哪个属性可以实现元素水平居中（块级元素）？（）A.text-align:centerB.margin:0autoC.float:centerD.position:center3.JavaScript中，以下关于var、let、const的说法错误的是？（）A.var存在变量提升，无块级作用域B.let和const存在块级作用域C.const声明的变量不可修改D.let不可重复声明同一作用域变量4.以下哪种CSS选择器的优先级最高？（）A.类选择器B.标签选择器C.ID选择器D.通配符选择器5.JS中typeofnull的返回值是？（）A.nullB.undefinedC.objectD.boolean6.以下不属于HTTP请求方法的是？（）A.GETB.POSTC.FETCHD.PUT7.CSS3中，transition属性的作用是？（）A.实现动画过渡效果B.实现3D变换C.实现旋转缩放D.实现帧动画8.JavaScript中，以下哪个方法不会改变原数组？（）A.pushB.spliceC.mapD.pop9.移动端适配中，viewport的user-scalable=no的作用是？（）A.禁止页面缩放B.自适应屏幕宽度C.设置初始缩放比例D.开启高清适配10.以下关于事件冒泡的说法正确的是？（）A.事件从父元素向子元素触发B.事件从子元素向父元素逐层触发C.冒泡事件无法阻止D.冒泡只存在点击事件中11.JS中，==和===的核心区别是？（）A.无区别B.===会严格对比类型和值，==会隐式转换类型C.==优先级更高D.===只对比值不对比类型12.清除浮动的核心目的是？（）A.让元素居中B.解决父级元素高度塌陷问题C.隐藏溢出内容D.取消元素定位13.以下哪个是ES6新增的语法特性？（）A.for循环B.箭头函数C.alert弹窗D.if判断14.浏览器渲染页面的正确流程是？（）A.构建DOM树→构建CSSOM树→生成渲染树→布局→绘制B.构建CSSOM树→构建DOM树→生成渲染树→布局→绘制C.生成渲染树→构建DOM树→构建CSSOM树→布局→绘制D.构建DOM树→生成渲染树→构建CSSOM树→绘制→布局15.以下关于cookie和localStorage的说法错误的是？（）A.cookie存储容量更小B.localStorage永久存储，手动清除才会失效C.cookie会随请求自动发送到服务端D.localStorage可以跨域访问二、多选题（共5题，每题4分，共20分，多选、少选、错选均不得分）1.以下属于JS基本数据类型的有？（）A.stringB.numberC.arrayD.undefinedE.boolean2.以下可以实现页面布局的CSS方式有？（）A.标准文档流B.浮动布局C.Flex布局D.Grid布局E.绝对定位布局3.以下能够阻止事件默认行为的方法有？（）A.stopPropagation()B.preventDefault()C.returnfalseD.stopImmediatePropagation()4.以下属于前端性能优化手段的有？（）A.图片懒加载B.代码压缩打包C.减少DOM操作D.开启缓存E.冗余嵌套DOM结构5.关于Flex布局，说法正确的有？（）A.flex-direction可以设置主轴方向B.justify-content控制主轴对齐方式C.align-items控制交叉轴对齐方式D.Flex布局可以完全替代浮动布局三、简答题（共3题，每题7分，共21分）1.简述JS中原型和原型链的概念，以及其核心作用。2.详细说说Vue中v-if和v-show的区别，以及各自的使用场景。3.简述前端跨域的产生原因，以及3种常用的跨域解决方案。四、编程实操题（共1题，14分）需求：手写实现一个防抖函数要求：1.防抖逻辑：触发事件后，延迟指定时间执行函数，若期间再次触发，重新计时；2.支持传入延迟时间、回调函数；3.代码简洁规范，有基础注释，可直接运行；4.额外实现：支持立即执行一次，后续触发延迟执行的模式。参考答案（阅卷参考）一、单选题1.C2.B3.C4.C5.C6.C7.A8.C9.A10.B11.B12.B13.B14.A15.D二、多选题1.ABDE2.ABCDE3.BC4.ABCD5.ABCD三、简答题（核心得分点）1.原型和原型链每个JS对象都有一个__proto__属性，指向其构造函数的prototype（原型对象）；原型对象包含公共的属性和方法，供所有实例共享。原型链：对象的__proto__层层向上查找，直至null，形成的链式结构。核心作用：实现属性和方法的共享、继承，减少内存占用。2.v-if和v-show区别与场景区别：v-if是真正的条件渲染，切换时会销毁/重建DOM，切换开销大；v-show是通过CSSdisplay属性控制显示隐藏，DOM始终存在，切换开销小。场景：频繁切换显示隐藏用v-show；首次加载大概率不显示、切换频率低用v-if。3.跨域原因及解决方案产生原因：浏览器同源策略限制，协议、域名、端口任一不同，即为跨域，禁止页面跨域请求资源。常用方案：服务端设置CORS跨域资源共享、JSONP跨域、代理服务器跨域（webpack/vite代理、nginx代理）。四、编程实操题（参考代码）javascript

//防抖函数：支持立即执行、延迟执行

functiondebounce(fn,delay,immediate=false){

lettimer=null;

returnfunction(...args){

//清除之前的定时器，重新计时

if(timer)clearTimeout(timer);

//立即执行模式：首次触发执行，后续延迟触发

if(immediate&&!timer){

fn.apply(this,args);

}

//延迟执行

timer=setTimeout(()=>{

//非立即执行模式，延迟后执行函数

if(!immediate){

fn.apply(this,args);

}

timer=null;

},delay);

}

}

//使用示例

//普通