2026年Web前端开发工程师考核题库附答案

2026年Web前端开发工程师考核题库附答案一、单项选择题（每题2分，共30分）1.以下哪个标签不属于HTML5语义化标签？A.<header>B.<footer>C.<div>D.<article>答案：C解析：<div>是通用容器标签，没有语义含义；<header>、<footer>、<article>均为HTML5新增的语义化标签。2.下列CSS选择器中，优先级最高的是？A..navB.div.navC.#header.navD.*答案：C解析：优先级按权重计算，ID选择器权重最高。#header.nav包含一个ID和一个类，权重为(1,1,0)；div.nav为(0,1,1)；.nav为(0,1,0)；*为(0,0,0)。3.在JavaScript中，typeofnull的返回值是？A."null"B."object"C."undefined"D."number"答案：B解析：这是JavaScript早期实现遗留的问题，typeofnull返回"object"，并非"null"。4.关于箭头函数，下列说法错误的是？A.箭头函数没有自己的thisB.箭头函数不能用作构造函数C.箭头函数内部可以使用arguments对象D.箭头函数语法更简洁答案：C解析：箭头函数没有自己的arguments对象，若使用会沿作用域链向上查找；A、B、D说法均正确。5.在CSSFlexbox布局中，justify-content:space-between的效果是？A.项目紧靠主轴起点B.项目均匀分布，首尾项目贴边C.项目均匀分布，每个项目两侧间隔相等D.项目居中排列答案：B解析：space-between使首尾项目贴边，中间项目之间间隔相等；space-around才是项目两侧间隔相等，首尾项目也有一半间隔。6.以下代码输出顺序是？console.log(1);

setTimeout(()=>console.log(2),0);

Promise.resolve().then(()=>console.log(3));

console.log(4);A.1,2,3,4B.1,3,4,2C.1,4,3,2D.1,4,2,3答案：C解析：同步代码先执行输出1和4；微任务（Promise.then）在宏任务（setTimeout）之前执行输出3；最后输出2。7.HTTP状态码404表示什么含义？A.服务器内部错误B.请求的资源未找到C.请求成功D.客户端无权限答案：B解析：404NotFound，表示服务器无法找到请求的资源；500表示服务器内部错误，200表示成功，403表示无权限。8.下列操作中最可能引起浏览器回流（reflow）的是？A.修改元素的colorB.修改元素的background-colorC.修改元素的widthD.修改元素的visibility答案：C解析：修改元素的尺寸会改变布局，导致回流；修改颜色、背景等只会引起重绘（repaint）；visibility改变通常只引起重绘。9.在Webpack中，Loader的主要作用是？A.扩展Webpack的功能，如打包优化、资源管理B.对模块的源代码进行转换C.启动开发服务器D.压缩代码答案：B解析：Loader用于对模块源码进行转换，如将ES6转ES5、将SCSS转CSS等；Plugin用于扩展Webpack的整体功能。10.在React或Vue的列表渲染中，使用key的主要目的是？A.设置列表项的样式B.帮助框架高效地识别节点变化，减少不必要的DOM操作C.定义列表项的唯一IDD.强制列表项按顺序渲染答案：B解析：key是虚拟DOM中节点的标识，用于diff算法中高效地复用和更新节点，减少不必要的DOM操作。11.设置box-sizing:border-box后，元素的width包含哪些部分？A.仅内容宽度B.内容宽度+paddingC.内容宽度+borderD.内容宽度+padding+border答案：D解析：border-box使元素的宽度包含内容、内边距和边框；默认的content-box宽度只包含内容区域。12.以下代码的输出结果是？for(vari=0;i<3;i++){

setTimeout(()=>console.log(i),0);

}A.0,1,2B.3,3,3C.2,1,0D.0,0,0答案：B解析：var声明的变量作用于函数作用域，循环结束后i为3，所有定时器回调共享同一个i，输出三个3。若使用let声明则输出0,1,2。13.下列哪项不属于解决跨域问题的常见方案？A.CORSB.JSONPC.服务器端代理D.localStorage答案：D解析：localStorage是浏览器本地存储机制，不能解决跨域问题；CORS、JSONP、服务器端代理是常见的跨域解决方案。14.以下哪项不是前端性能优化的有效手段？A.图片懒加载B.使用大型未压缩图片C.代码分割与按需加载D.减少HTTP请求答案：B解析：使用大型未压缩图片会增加传输负担，降低页面加载性能；其他选项均为有效的性能优化手段。15.在TypeScript中，关于interface和type的说法错误的是？A.interface可以声明合并B.type可以声明联合类型C.interface不能扩展其他接口D.type不能重复声明同一名称答案：C解析：interface可以使用extends扩展其他接口；type通过交叉类型&扩展，且不能重复声明同名的type。A、B、D说法正确。二、多项选择题（每题3分，共15分）1.以下哪些属于HTML5新增的标签？A.<canvas>B.<video>C.<article>D.<div>答案：A、B、C解析：<div>是HTML早期就存在的通用容器标签；<canvas>、<video>、<article>均为HTML5新增的媒体或语义化标签。2.下列CSS属性中，哪些可以提升元素到独立合成层（触发GPU加速）？A.transform:translateZ(0)B.filter:blur(1px)C.will-change:transformD.color:red答案：A、B、C解析：transform、filter、will-change等属性会创建新的合成层，由GPU加速渲染；color只改变文字颜色，不会创建合成层。3.下列JavaScript值中，属于falsy（假值）的是？A.0B.''（空字符串）C.nullD.[]（空数组）答案：A、B、C解析：[]是对象，转换为布尔值为true；0、''、null均为假值，转换为布尔值为false。4.关于HTTPS，下列说法正确的是？A.使用SSL/TLS协议进行加密传输B.默认端口号为443C.比HTTP更安全，能防止数据被窃听和篡改D.可以完全防止所有类型的网络攻击答案：A、B、C解析：HTTPS在HTTP基础上增加SSL/TLS加密，默认端口443，提供机密性、完整性和身份认证；但不能防止所有攻击，如XSS、CSRF等应用层攻击仍可能存在。5.以下哪些属于React的Hook？A.useStateB.useEffectC.componentDidMountD.useContext答案：A、B、D解析：componentDidMount是类组件的生命周期方法，不属于Hook；useState、useEffect、useContext都是React内置Hook。三、判断题（每题1分，共10分）1.HTML中<img>标签默认是块级元素。答案：错误解析：<img>是行内替换元素，不是块级元素。2.CSS的z-index属性只对定位元素（position不为static）有效。答案：正确解析：z-index只对position为relative、absolute、fixed或sticky的元素有效。3.JavaScript中，===比较时会先转换类型再比较值。答案：错误解析：===是严格相等运算符，不进行类型转换；==才会进行类型转换。4.在JavaScript中，NaN===NaN的结果为true。答案：错误解析：NaN不等于任何值，包括自身，应使用Number.isNaN()判断是否为NaN。5.使用const声明的对象，其属性不能被修改。答案：错误解析：const声明的变量引用不可变，但对象内部的属性仍然可以被修改。6.FetchAPI默认不会在跨域请求中携带cookies。答案：正确解析：fetch默认的credentials值为'same-origin'，跨域请求不会携带cookies，需要设置credentials:'include'。7.CSS中em单位是相对于根元素字体大小。答案：错误解析：em相对于父元素字体大小；rem才是相对于根元素字体大小。8.浏览器中的localStorage可以直接存储JavaScript对象。答案：错误解析：localStorage只能存储字符串，对象需要先通过JSON.stringify序列化后存储。9.TypeScript中any类型可以接受任意类型的值，并且类型安全。答案：错误解析：any类型会绕过类型检查，降低类型安全性，应尽量少用。10.使用CDN可以加快静态资源的加载速度。答案：正确解析：CDN通过就近节点分发内容，降低网络延迟，提高静态资源加载速度。四、简答题（每题5分，共15分）1.简述浏览器从输入URL到页面展示的主要过程。答案：主要包括以下步骤：•DNS解析：将域名解析为IP地址；•建立TCP连接：浏览器与服务器进行三次握手；•发送HTTP请求：浏览器发送请求报文；•服务器响应：返回响应报文；•浏览器解析HTML：构建DOM树；•解析CSS：构建CSSOM树；•合成渲染树：将DOM与CSSOM合并为渲染树；•布局（Layout/Reflow）：计算元素位置与尺寸；•绘制（Paint）：绘制页面像素；•合成与显示：将图层合并并显示在屏幕上。解析：该过程涵盖网络通信、解析、渲染三个阶段，是理解前端性能优化的基础。2.什么是防抖（debounce）和节流（throttle）？它们有什么区别？答案：防抖和节流都是用于优化高频事件（如scroll、resize、input等）的性能策略。•防抖：事件触发后延迟一定时间执行回调，若在延迟期内再次触发则重新计时，最终只执行最后一次。•节流：在一定时间间隔内只执行一次回调，即使事件持续触发，也会按固定频率执行。区别：防抖强调“停止触发后才执行”，适合输入联想、表单验证等场景；节流强调“固定频率执行”，适合滚动监听、按钮防连点等场景。解析：核心是对执行时机的控制方式不同，防抖是重置计时器，节流是固定时间窗口。3.请列举至少五种前端性能优化的手段。•资源压缩合并：减少HTTP请求次数和传输体积；•图片优化：使用WebP格式、压缩图片、使用雪碧图、懒加载；•代码分割与按需加载：利用动态import()或框架路由懒加载；•合理使用缓存：配置强缓存、协商缓存、ServiceWorker；•减少重排重绘：使用transform替代left/top，批量操作DOM；•使用CDN加速静态资源；•优化网络请求：DNS预解析、预加载、预连接；•代码层面优化：避免内存泄漏、减少闭包滥用、使用事件委托。解析：性能优化贯穿资源、网络、渲染、执行各层面，需综合运用。五、编程题（每题15分，共30分）1.实现一个防抖函数debounce(fn,delay,immediate)，其中fn为需要防抖的函数，delay为延迟时间（毫秒），immediate为是否立即执行（默认false）。要求正确处理this和参数传递。functiondebounce(fn,delay,immediate=false){

lettimer=null;

returnfunction(...args){

constcontext=this;

if(immediate&&!timer){

fn.apply(context,args);

}

clearTimeout(timer);

timer=setTimeout(()=>{

timer=null;

if(!immediate){

fn.apply(context,args);

}

},delay);

};

}解析：利用闭包保存timer状态；每次触发先清除上次定时器；若immediate为true且无定时器进行中，则立即执行；延迟结束后若immediate为false则执行函数，并重置timer为null，以便下次可立即执行。2.实现一个简单的发布订阅类EventBus，包含以下方法：•on(event,callback)：订阅事件•off(event,callback)：取消订阅•emit(event,...args)：触发事件•once(event,callback)：订阅一次性事件，触发一次后自动移除classEventBus{

constructor(){

this.events={};

}

on(event,callback){

if(!this.e